DongHao's 个人在线文档库

Appearance

选择器 ​

选择器可以使我们想要美化某个网页元素时可以快速的找到这个元素,总之,选择器的作用是让我们在众多的HTML元素中找到特定的元素,从而进行美化

通用选择器 ​

通用选择器（*）选择页面上的所有的 HTML 元素,选择的范围是最大的

css
/*CSS规则会影响页面上的每个HTML元素*/
* {
  text-align: center;
  color: blue;
}

分组选择器 ​

对于具有相同样式定义的标签，可以使用分组选择器来简化代码，用逗号来分隔每个选择器,对相同的元素标签进行选择操作,主要用于去除超链接的下划线,和统一管理字体样式

css
h1, h2, p {
  text-align: center;
  color: red;
}

类选择器 ​

类选择器选择有特定class属性的 HTML 元素，选择拥有特定class的元素，在写CSS时需要写一个句点（.）字符，后面跟类名,使用是非常广泛的

css
/*所有带有class="center"的HTML元素将为红色且居中对齐，相关html元素标签要引用class="center"才能生效*/
.center {
  text-align: center;
  color: red;
}
/*还可以指定特定的html元素会受类的影响，只有<p>标签引用class="center"才能生效*/
p.center {
  text-align: center;
  color: red;
}

一个元素可以同时引用多个类样式，每个样式之间使用空格进行分格，如：

class="center large"

id选择器 ​

id选择器使用HTML元素的id属性来指定特定的元素(一个元素可以设置一个id,每个元素的id是要保持唯一的,我们可以通过这个id来找到这个元素标签)，id选择器要以#开头，同时id名称不能以数字开头,id选择器要保证作用唯一的元素

css
/*这条css规则用于id="para"的HTML元素  <div id="para">测试</div>*/
#para {
    color: red;
    font-size: 20px;
}

结构选择器 ​

对于HTML的元素，元素之间都是存在相关结构的，我们可以对其结构进行选择，对其结构进行CSS样式的编写，对于以下结构的HTML元素：

html
<main>
    <article>
        <h1>jlc</h1>
        <aside>
            <h2>name</h2>
        </aside>
        <h2>Name</h2>
    </article>
</main>

我们通过结构选择器进行CSS样式的编写：

css
<style>
/*后代选择器，所有子孙的被选择的标签样式都会被修改*/
/*<h2>name</h2>和<h2>Name</h2>标签的元素都受样式的影响*/
main article h2 {
    color: red;
}

/*子元素选择器，只包含自己的子代被选中，只到儿子级别的元素被选中，孙以及下面的级别不会被选中*/
/*<h2>Name</h2>标签的元素都受样式的影响*/
main article>h2 {
    color: red;
}

/*兄弟级样式选择器，平级元素的选择*/
/*<h2>Name</h2>标签的元素都受样式的影响，h1元素的兄弟元素是h2的所有元素被选中*/
article h1~h2 {
    color: red;
}
/*<h2>Name</h2>标签的元素都受样式的影响，h1元素后面紧挨着的第一个h2元素被选中*/
article h1+h2 {
    color: red;
}
</style>

属性选择器 ​

对于标签中的某个特定的属性进行选择

html
<h1 title>jlc</h1>

<style>
    h1[title] {
        color: red;
    }
</style>

上述例子选择了<h1>标签中有title属性的元素，可以约束标签中的多个属性，当选择器的属性在标签中全部存在时，才能将这个元素选中

我们也可以对属性的值进行约束，只有属性和值都一样时才能将这个标签选中：

html
<h1 title="value">jlc</h1>

<style>
    h1[title="value"] {
        color: red;
    }
</style>

同时我们可以对属性中的某部分内容进行选择：

html
<h1 title="value">jlc</h1>

<style>
    /*以某个前缀开始进行选择*/
    /*可以选中<h1 title="value">jlc</h1>这个标签*/
    h1[title^="val"] {
        color: red;
    }
    
    /*以某个后缀结束进行选择*/
    /*可以选中<h1 title="value">jlc</h1>这个标签*/
    h1[title$="lue"] {
        color: red;
    }
    
    /*以任何位置出现相同的内容进行选择*/
    /*可以选中<h1 title="value">jlc</h1>这个标签*/
    h1[title*="alu"] {
        color: red;
    }
    
    /*以任何位置出现相同的独立内容进行选择*/
    /*可以选中<h1 title="v alu e">jlc</h1>这个标签，但是不能选中<h1 title="value">jlc</h1>这个标签*/
    h1[title~="alu"] {
        color: red;
    }
    
    /*以当前选择器的属性值开始或者以这个值开始并且以-连接的可以被选择*/
    /*可以选中<h1 title="value">jlc</h1>标签，<h1 title="value-111">jlc</h1>这个标签也可以被选中*/
    h1[title|="value"] {
        color: red;
    }
</style>

伪类选择器 ​

伪类选择器是对元素的不同状态（或者不确定是否存在的元素）进行选择设置

伪类选择器有空格针对当前自己的标签，没有空格针对当前标签的子项

css
/*针对main标签自身*/
mian:hover {
    ...
}
/*针对main标签内部的子标签*/
mian :hover {
    ...
}

比如超链接是又不同的状态的，点击前，鼠标悬停时，点击的瞬间，点击后，我们可以对其进行伪类的设置：

html
<a href="https://www.baidu.com">百度</a>

<style>
    /*点击前，默认情况下*/
    a:link {
        color: red;
    }
    /*鼠标放上去悬停时*/
    a:hover {
        color: yellow;
    }
    /*点击发生时*/
    a:active {
        color: black;
    }
    /*点击后*/
    a:visited {
        color: green;
    }
</style>

还有其他的伪类选项：获取焦点时：focus

目标的伪类选择器 ​

我们在制作锚点的时候通常会使用目标的伪类选择器

html
<body>
    <a href="#goto">goto</a>
    <div></div>
    <div id="goto">具体跳转到的内容区域</div>
</body>

<head>
    <style>
        div {
            height: 900px;
            border: solid 1px #ddd;
        }
        /*触发跳转目标后执行的样式*/
        div:target {
            color: red;
        }
    </style>
</head>

第二个div是锚点的目标div，点击超链接就会跳转到对应锚点的位置，我们可以使用伪类选择器的target对跳转目标的元素进行控制

根伪类选择器 ​

我们可以使用html {}对页面中的所有元素进行样式的控制，也可以通过根元素的伪类选择器进行对页面中所有元素的样式进行控制:root {}（是最顶级的根元素伪类选择器）

空元素伪类选择器 ​

我们可以使用:empty {}空元素伪类选择器，对空元素（在标签中没有内容的元素）进行选择控制

html
<body>
    <ul>
        <li>111</li>
        <li></li>
    </ul>
</body>

<head>
    <style>
        /*对没有内容的空元素进行隐藏*/
        :empty {
            display: none;
        }
    </style>
</head>

结构的伪类选择器 ​

结构的伪类选择器可以帮助我们快速的选择标签结构中的元素

html
<body>
    <main>
        <article>
            <h1>jlc</h1>
            <aside>
                <h2>111</h2>
            </aside>
            <h2>222</h2>
        </article>
    </main>
</body>

<head>
    <style>
        /*选择当前标签中后代的第一个元素（长子和后代的长子）*/
        /*<h1>jlc</h1>标签和<h2>111</h2>标签被选中*/
        article :first-child {
            color: red;
        }
        
        /*选择当前标签中的第一个元素（长子）*/
        /*<h1>jlc</h1>标签被选中*/
        article>:first-child {
            color: red;
        }
        /*也可以写成*/
        article h1:first-child {
            color: red;
        }
        /*如果<h1>jlc</h1>标签前面还有一个<h2>标签，那<h1>标签就不能被选中，因为first-child指的是选中第一个元素，但第一个元素不是<h1>标签的，如果我们只想选中这个类型的第一个元素，我们可以使用:first-of-type伪类选择器进行选择*/
    </style>
</head>

同理，:first-child是选择第一个元素的伪类选择器，:last-child是选择最后一个元素的伪类选择器

唯一子元素的伪类选择：:only-child，只有子元素是唯一的元素标签会被选中

css
/*<aside>元素的会被选中，该标签有唯一的子元素*/
article :only-child {
    color: red;
}
/*将article元素的唯一子元素h1进行选中*/
article>h1:only-of-type {
    color: red;
}

对结构的中间元素进行选择控制，我们可以使用元素编号进行灵活的选择：

html
<body>
    <main>
        <article>
            <h1>jlc</h1>
            <aside>
                <h2>111</h2>
            </aside>
            <h2>222</h2>
        </article>
    </main>
</body>

<style>
    /*选择当前标签后代中的第一个元素（长子和后代的长子）*/
    /*<h1>jlc</h1>标签和<h2>111</h2>标签被选中*/
    article :nth-child(1) {
        color: red;
    }
    
    /*选择当前标签中的第一个元素（长子）*/
    /*<h1>jlc</h1>标签被选中*/
    article>:nth-child(1) {
        color: red;
    }
    
    /*选择当前标签后代中的第三个元素*/
    /*<h2>222</h2>标签被选中*/
    article :nth-child(3) {
        color: red;
    }
    
    /*选择当前标签后代中的所有*/
    article :nth-child(n) {
        color: red;
    }
</style>

我们可以通过:nth-child(n)来实现逐行变色的效果：

html
<body>
    <main>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </main>
</body>

<style>   
    /*设置列表偶数行为红色*/
    main>ul li:nth-child(2n) {
        color: red;
    }
    /*系统提供了内置的偶数的选择*/
    main>ul li:nth-child(even) {
        color: red;
    }
    /*2n->even  2n-1->odd*/
    
    /*选择当前标签后代中的前两个元素*/
    article :nth-child(-n+2) {
        color: red;
    }
    
    /*选择当前标签后代中的从第二个个元素开始的所有元素*/
    article :nth-child(n+2) {
        color: red;
    }
</style>

:nth-child()表示从前面开始进行元素的选取，同理:nth-last-child()表示从后代开始进行元素的选取，使用方式类似

排除选择器 ​

我们可以通过:not()排除选择器对选择的元素进行排除操作：

html
<body>
    <main>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </main>
</body>

<style>   
    /*选择当前标签后代中的前三个元素，但是排除选择了第二个元素*/
    article :nth-child(-n+3):not(:nth-child(2)) {
        color: red;
    }
</style>

对表单进行伪类操作 ​

我们可以通过表单伪类创建个性化的表单，我们一般是对表单元素的设置属性进行表单元素的选择，常见的选择方式有：

html
<body>
    <form action="">
        <input type="text" disable>
        <input type="text">
        <hr>
        <input type="radio" name="sex" id="boy">
        <label for="boy">男</label>
        <input type="radio" name="sex" checked id="girl">
        <label for="girl">女</label>
        <hr>
        <button>保存</button>
    </form>
</body>

  • input:disabled ：对禁用表单输入框进行选择

  • input:enabled：对没有禁用（常规可编辑（有效的））表单输入框进行选择

  • input:checked ：对单选框选中的元素进行选择控制

    对选中元素旁边标签的样式进行控制：

    css
    input:checked+label {
 color: green;
}

  • input:optional：对非必填的表单元素进行选择控制

  • input:required ：对必填的表单元素进行选择控制

  • input:valid：对验证有效的表单元素进行样式选择控制

  • input:invalid：对验证无效的表单元素进行样式选择控制

对文本进行伪类操作 ​

对文本段落的样式进行操作

html
<body>
    <div>
        <p>这个是一段文本</p>
        <p>这个是第二段文本</p>
    </div>
</body>

<style>   
    /*对文本每个段落的第一个字进行选择控制*/
    /*文本中的两段中的第一个这都变成了红色*/
    p::first-letter {
        color: red;
    }
    
    /*对文本每个段落的第一个行进行选择控制*/
    /*文本中的两段中的第一行都变成了蓝色*/
    p::first-line {
        color: blue;
    }
</style>

对文本的内容进行操作

html
<body>
    <span>jlc</span>
</body>

<style>   
    /*在<span>文本的后面添加com的内容，字体颜色为红色的*/
    span::after {
        content: 'com';
        color: red;
    }
    /*我们也可以使用::before进行在文本的前面进行添加内容*/
</style>

Released under the MIT License.

Copyright © 2021-present DongHao's