00、CSS选择器

CSS的选择器分类如下图，其中最最常用的就是基础选择器中的三种：元素选择器、类选择器、id选择器。伪类选择器就是元素的不同行为、状态，或逻辑。然后不同的选择器组合，基于不同的组合关系，产生了6中组合关系选择器。

01、基础选择器（5）

1.1、通配选择器：*{}

针对所有HTML标签全部适用，选择器名=星号*（通配符），一般只做初始化使用。在 CSS3 中，星号 (*) 可以和命名空间组合使用，如 ns|*{}。

/* 通用选择器，针对所有标签 */
* {
    color: black;
    font-size: 15px;
    box-sizing: border-box; margin: 0px; padding: 0px;
    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
}

1.2、元素选择器：元素名{}

用元素名称作为选择器名称，如p、h1、div、img等，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性。

hr {
    margin: 32px 5px;
}
h1 {
    background-color: lightblue;
    text-indent: 0.5em;
}

1.3、类选择器：.类名{}

定义时前面加点.类名，在标签的属性“class”使用该样式，这应该算是最常用的选择器了。

/* 类名class选择器 */
.particle{
    font-size: 18px;
    font-family: 楷体;
}
.pindent{
    text-indent: 2em;
}
<p class="particle pindent">一段文字内容-section</p>

类选择器可以给所有需要的元素使用，可同时给多个元素使用，应用广泛。

• 类名字母开头（小写），不能以数字开头。
• 同一个标签可以用多个类选择器，空格隔开。基于此，一般会将样式抽象、分类为多个类样式，便于复用。

1.4、id选择器：#id{}

用标签的id作为选择器名称，加井号“#”，针对作用域内指定id的标签生效，所以只能使用一次。

• ID是标签的唯一标识，不能重复。如果id重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个。
• ID字母开头（小写），不能以数字开头。

/* id选择器 */
#a1{
    color:blueviolet;
    font-size: 16px;
    text-decoration-line:underline ;
}

1.5、属性选择器：[属性=value]{}

元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素，css3特性。这里的属性值匹配是大小写敏感的，结尾加上字符i（li[title*= "a" i]），则会忽略大小写敏感。

<style>
li[title]{
    color: red;
}
li[title="a"]{
    font-weight: bold;
}
li[title~="a"]{
    text-decoration: underline;
}
li[title|="a"]{
    text-indent: 2em;
}
li[title^= "a"]{
    text-shadow: 2px 2px 3px black;
}
li[title$= "a"]{
    background: center url(../res/bimg.jpg);
}
li[title*= "a"]{
    background-color: azure;
}
.cli[title]{
    font-style: italic;
}
</style>

<ul>
  <li title="a">item1：a</li>
  <li title="a b">item2：a b</li>
  <li title="c a b">item2</li>
  <li title="a-b" class="cli">item4：a-b</li>
  <li title="abc" class="cli">item5：abc</li>
  <li title="cab" class="cli">item6：cab</li>
  <li title="cba" class="cli">item7：cba</li>
  <li title="cbA1" class="cli">item8：cbA1</li>
</ul>

02、伪类选择器（43）

2.1、伪类选择器:

伪类是选择器的一种，用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮时的状态。

伪类选择器开头为冒号 ：，如a:hover{} 表示a元素鼠标悬浮时的状态（样式）

和用户交互有关的伪类，也叫用户行为伪类，或叫做动态伪类，比如:link、:active、:visited、:hover。

📢注意顺序：先a样式，然后是他的LVHA。实际项目中，<a>的:link、:visited有时候会省略，合并到a样式中。

表单文本框的校验状态样式示例：

<style>
    :root {
        /*申明css全局变量*/
        --error-color: red;
    }
    #vtag input:required+label::before{
        content: "*";
        color:var(--error-color);
    }
    #vtag input:in-range{
        border:green 1px solid;
        color: green;
        margin: 20px 0;
    }
    #vtag input:out-of-range{
        border:red 1px solid;
        color:var(--error-color);
        margin: 20px 0;
    }
    #vtag input:out-of-range+label::after{
        content: "，值必须在1到10之间";
        color:var(--error-color);
    }
</style>

<div id="vtag">
    年龄：
    <input type="number" value="13" id="t3" name="t3" min="1" max="10" required>
    <label for="t3"></label>
</div>

表格结构选择类样式：表头高亮样式；隔行换色，第一列高亮+排名次

<style>
    #vtb{
        border-collapse: collapse;
        width: 300px;
        text-align: center;
        border: 2px black solid;
    }
    #vtb tr:first-child th{ /*标题行样式*/
        background-color:blueviolet;
        font-weight: bold;
        color: white;
    }
    #vtb tr:nth-of-type(2n+2){ /*隔行换色*/
        background-color: rgb(197, 239, 245);
    }
    #vtb tr:nth-of-type(2n+3){
        background-color: rgb(230, 245, 201);
    }
    #vtb tr td:first-child{ /*第一列的样式*/
        font-weight: bold;
        color: blue;
        background-color: lightpink;
        text-align: left;
        text-indent: 3px;
    }
    #vtb tr:nth-of-type(2) td:first-child::before{ /*添加排名序号*/
        content: "🥇";
    } 
    #vtb tr:nth-of-type(3) td:first-child::before{
        content: "🥈";
    }   
    #vtb tr:nth-of-type(4) td:first-child::before{
        content: "🥉";
    }                
</style>
<!-- 表格效果：表头高亮样式；隔行换色，第一列高亮+排名次 -->
<table id="vtb" border="1">
    <tr>
        <th>姓名</th><th>分数</th><th>学号</th>
    </tr>
    <tr>
        <td>张三</td><td>r1-2</td><td>r1-3</td></tr>
    <tr>
        <td>周伦</td><td>r2-2</td><td>r2-3</td>
    </tr>
    <tr>
        <td>李子柒</td><td>r3-2</td><td>r3-3</td>
    </tr>
    <tr>
        <td>王小二</td><td>r4-2</td><td>r4-3</td>
    </tr>
</table>

2.2、伪元素选择器::

伪元素，顾名思义，像元素但不是真正的元素。基于一些预定的规则，像一个新的元素一样的虚拟元素，如段落中的第一行。

伪元素用双冒号开头 ::，如p::first-line{}，不过有早期版本的伪元素是单冒号开头的。

✏️可插入内容的::before 、::after 伪元素，是一组特别的伪元素，配合content属性，可用css插入（文本）内容（插入的内容不可选中）。

<style>
    #vtag p:first-child::first-letter {
        font-size: 200%;
    }
    #vtag p:first-child::first-line {
        color: red;
    }
    /* 插入内容并设置其样式（无法选中） */
    #vtag p:first-child::after {
        content: "——《四书五经》";
        color: cornflowerblue;
        font-size: 80%;
    }
    /* 设置文字选择状态样式 */
    #vtag p::selection{
        color:white;
        background-color: #ff0000;
    }
</style>
<div id="vtag">
    <p>出必告，反必面，居有常，业无变。</p>
    <p>湖畔大学的梁宁曾说过：「要找到那件能让你一直不厌其烦做下去的事，你不厌其烦的地方，就是你的天分所在。追随内心，做自己喜欢的事，时间久了，你就会成功。」</p>
</div>

03、组合关系选择器（6）

3.1、合并/并集选择器：逗号

多种基础选择器的合并组合，相当于大家共用一个样式设置，选择器名字用逗号,隔开。

选择器1, 选择器2, 选择器3, … { } 例如：div, #su1, .user{...}

<style type="text/css">
    pre, /* 标签名选择器 */
    #a1, /* id选择器 */
    .f1  /* 类名class选择器 */
    {
        color: skyblue;
        font-weight: bold;
    }
</style>

3.2、交集选择器：紧密相连

多个选择器拼接，中间无任何连接符（利用选择器本身的前缀分割），不能有空格，选择 都同时满足的元素。

选择器1选择器2选择器3… { }

a.nav.left[href]{
    background-color: #0000ff;
}
.form-float a.nav{  /*两个交集，组合成一个后代选择器*/
    color: white;
}

3.3、后代选择器：空格

用空格分割，选择指定元素的** 符合选择器条件 **的 所有后代 元素，注意这里的“后代”，即所有子元素都是筛选目标，不限等级，可跨级。支持多个层级，从第一个选择器（祖父）的开始，一直往下递归，所有符合条件的后代，最后一个选择器为目标元素。

祖父 后代1 后代2 … 后代n(递归后代n) { }

<style>
    .f1 p{
        color: red;
    }
    .f1 .f2 p{
        font-weight: bold;
    }
</style>
<div class="f1">
    <p class="f2">子代</p>
    <div class="f11">
        <p>孙代</p>
        <div class="f111">
            <p>曾孙</p>
        </div>
    </div>
    <div class="f2">
        <p>孙代2</p>
    </div>
</div>

3.4、子代选择器：大于号>

用大于号>分割，查找指定元素的子元素&第一代（儿子）元素中符合所有条件的元素。不同于后代选择器，只在第一代中找。

父>后代1>后代2>…>后代n { }

.f1>p{
    background-color: antiquewhite;
}
.f1>.f2>p{
    text-indent: 2em;
}

3.5、相邻兄弟选择器：加号+

用加号+分割，查找指定元素相邻&同级的后一个指定元素，二者有相同的父元素且相邻，中间不可间隔。只向后找一个，要求有点多。

胸弟1+兄弟2+…+兄弟n(第一个兄弟n) { }

.fb2+.fb3{
    font-weight: bold;
}
.fb2+p+p{
    color: red;
}

<div class="fb1">
    <p class="fb2">子代</p>
    <p class="fb3">兄弟1</p>
    <p class="fb4">兄弟3</p>
    <div class="fb11">
        <p>孙代</p>
        <div class="fb111">
            <p>曾孙</p>
        </div>
    </div>
    <p class="fb2">兄弟3</p>
</div>

3.6、普通兄弟选择器：波浪线~

用波浪线~分割，查找指定元素同级的所有指定兄弟元素，有相同的父元素，符合条件的都会被找出来。不同于相邻兄弟选择器，不用相邻，多个结果。

兄弟1~兄弟2~…~兄弟n(所有同级兄弟n) { }

.fb2~p{
    text-indent: 1em;
}
.fb2~.fb3~p{
    text-indent: 2em;
}

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

原文地址：http://www.cnblogs.com/anding/p/16852042.html