CSS3选择器知识整理

CSS3在CSS2.1的基础上新增了属性选择器，伪类选择器，过滤选择器，减少了对HTML类名或ID名的依赖。

CSS3选择器的分类

根据所获取的页面元素不同，可以把CSS3选择器分为五大类：基本选择器、组合选择器、伪类选择器、伪元素选择器和属性选择器。

基本选择器

基本选择器可以分为标签选择器，类选择器，ID选择器，通配符选择器。

标签选择器

标签选择器是直接引用标签的名称，也称为类型选择器。
示例：

<style>
    p{
        font-size: 12px;
        color: red;
    }
</style

<p>这是文本</p>

界面显示：

类选择器

类选择器以一个（.）前缀开头，后跟随一个自定义的类名。
示例：

<style>
    p{
        font-size: 12px;
        color: red;
    }
    .fontStyle{
              font-size: 18px;
          }
</style

<p>这是文本</p>
<p class="fontStyle">这是文本</p>

界面显示：

ID选择器

ID选择器以#作为前缀，然后是一个自定义的ID名。
示例：

<style>     
  #box{
      font-size: 18px;
      color: green;
  }
</style>
<div id="box">这是box文本</div>

界面显示：

通配符选择器

如果HTML元素中都需要定义相同的样式，这是可以使用通配符选择器，用（*）来表示。
示例：

 <style>
    *{
        font-size: 18px;
        color: #1c65dd;
    }
</style>
<div>这是box文本</div>

界面展示

组合选择器

当把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，一般叫做组合选择器。CSS提供了多种组合多个基本选择器的方式。

包含选择器

包含选择器通过空格标识符来表示。用于选择指定标签的后辈元素，并不局限于第一代后辈。
示例：

<style>
    *{
            font-size: 10px;
        }
    #header p{
        font-size: 14px;
    }
    #main p{
        font-size: 12px;
    }
</style>

<div id="header">
    <p>头部区域第一段文本</p>
    <p>头部区域第二段文本</p>
    <p>头部区域第三段文本</p>
    <div>
        <p>头部区域第四段文本</p>
    </div>
</div>
<div id="main">
    <p>主体区域第一段文本</p>
    <p>主体区域第二段文本</p>
    <p>主体区域第三段文本</p>
</div>

界面结果：

子选择器

子选择器是指定父元素包含的第一代子元素。子选择器使用（>）表示。

<style>
    *{
        font-size: 10px;
    }
    #header>p{
        font-size: 14px;
    }
    #main>p{
        font-size: 12px;
    }
</style>

<div id="header">
    <p>头部区域第一段文本</p>
    <p>头部区域第二段文本</p>
    <p>头部区域第三段文本</p>
    <div>
        <p>头部区域第四段文本</p>
    </div>
</div>
<div id="main">
    <p>主体区域第一段文本</p>
    <p>主体区域第二段文本</p>
    <p>主体区域第三段文本</p>
</div>

界面结果：

相邻选择器

相邻选择器，通过（+）号分隔符定义。其基本结构是：第一个选择器指定前面相邻的元素，样式效果在第二个选择器中生效。
示例：

<style>
    *{
        font-size: 10px;
    }
    p+h3{
        color: red;
    }
    h3+p{
        color: blue;
    }
</style>

<div id="header">
    <p>p区域第一段文本</p>
    <h3>h区域文本</h3>
    <p>p区域第二段文本</p>
</div>

界面效果

兄弟选择器

兄弟选择器是CSS3新增的一种选择器组合方式，它通过波浪符号（~）分隔符进行定义。其基本结构是第一个选择器指定同级前置元素，后一个选择器指定其同级所有后置元素。
示例：

<style>
    *{
        font-size: 10px;
    }
    p+h3{
        color: red;
    }
    h3~p{
        color: blue;
    }
</style>

 <div id="header">
    <p>p区域第一段文本</p>
    <h3>h区域文本</h3>
    <h3>h区域文本</h3>
    <h3>h区域文本</h3>
    <p>p区域第二段文本</p>
    <p>p区域第三段文本</p>
    <p>p区域第四段文本</p>
    <h4>h区域文本</h4>
    <p>p区域第五段文本</p>
</div>

界面效果：

分组选择器

分组选择器通过逗号（,）分隔符进行定义。其基本结构是第一个选择器匹配指定元素，另外一个选择器指定其他的匹配元素，把所有的匹配元素都取出来。
通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放到一起，然后通过逗号链接这些选择器，减少代码的书写量。
示例：

<style>
    *{
        font-size: 10px;
    }
    h3,h4,h5{
        color: blue;
    }
</style>

<div id="header">
    <p>p区域第一段文本</p>
    <h4>h区域文本</h4>
    <h3>h区域文本</h3>
    <h3>h区域文本</h3>
    <p>p区域第二段文本</p>
    <h5>h区域文本</h5>
    <p>p区域第四段文本</p>
    <h4>h区域文本</h4>
    <p>p区域第五段文本</p>
</div>

界面显示：

属性选择器

属性选择器匹配那些具有特定属性或属性值的元素。
属性选择器列表如下，其中E表示匹配元素的选择符，可以省略；中括号为属性选择标识，不可或缺；attr表示HTML属性名，value表示HTML属性值，或者HTML属性值包含的子字符串。

属性选择器	含义
E[attr]	指定了属性名，没有确定任何属性值
E[attr=“value”]	指定了属性名，并且指定了改属性的属性值
E[attr~=“value”]	指定了属性名，并且有属性值，此时的属性值是一个词列表，以空格隔开，包含了属性值value。
E[attr^=“value”]	指定了属性名，并且有属性值，属性值以value开头
E[attr$=“value”]	指定了属性名，并且有属性值，属性值以value结尾
E[attr*=“value”]	指定了属性名，并且有属性值，属性值中包含了value
E[attr|=“value”]	指定了属性名，并且有属性值，属性值是value或以value-开头

示例：

 <style>
    *{
        font-size: 12px;
    }
    p[id]{
        color:red;
    }

    p[class="p"]{
        color:blue;
    }

    p[class~="p1"]{
        color: green;
    }

    p[class$="p2"]{
        color: rgb(128, 128, 128);
    }
</style>

<div id="header">
    <p id="p">p区域第一段文本</p>
    <h4>h区域文本</h4>
    <p class="p p1">p区域第二段文本</p>
    <h5>h区域文本</h5>
    <p class="p p2">p区域第四段文本</p>
    <h4>h区域文本</h4>
    <p class="p">p区域第五段文本</p>
</div>

界面显示：

伪类选择器

伪类选择器以（:）作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名称。
伪类选择器主要包括四种：动态伪类，结构伪类，否定伪类和状态伪类。

动态伪类

动态伪类是一类行为类样式，这些伪类不存在于HTML中，只有当用户与页面进行交互时才能体现出来。动态伪类选择器包括两种形式。

• 描点伪类：这是在链接中常见到的样式，如:link，:visited。
• 行为伪类：也称为用户操作的伪类，如:hover、:active、:focus。
  | 伪类名称 | 说明 |
  | — | — |
  | :link | 链接没有被访问时设置的样式 |
  | :visited | 链接被访问过后的样式 |
  | :hover | 鼠标移动到元素上的样式 |
  | :active | 鼠标单击元素时的样式 |
  | :focus | 元素成为焦点是的样式，常用在表单上 |

示例：

<style>
    *{
        font-size: 12px;
    }
    a:link{
        color: rgb(128, 128, 128);
    }
    a:visited{
        color: yellow;
    }
    a:hover{
        color:green;
    }
    a:active{
        color:blue;
    }
</style>
<div id="header">
    <a href="https://www.baidu.com/">百度一下</a>
</div>

结构伪类

结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过度，通过文档结构的相互关系来匹配特定的元素，从而减少元素内class属性和ID属性的定义，使文档更加简洁。
结构伪类的形式如下：

结构伪类形式	说明
:first-child	选择某个元素的第一个子元素
:last-child	选择某个元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算
:nth-of-type()	选择指定的元素
:nth-first-of-type()	选择指定元素，从元素的最后一个开始计算
:first-of-type	选择一个上级元素下的第一个同类子元素
:last-of-type	选择一个上级元素下的最后一个同类子元素
:only-child	选择的元素是它父元素的唯一一个子元素
:only-of-type	选择一个元素是它上级元素唯一一个相同类型的子元素
:empty	选择的元素里面没有任何内容

示例：

<style>
        *{
            font-size: 12px;
        }
        li:first-child{
            background-position: 2px 10px;
            font-weight: bold;
        }
        li:last-child{
            color: red;
        }
        li:nth-child(2){
            background-color: green;
        }
        li:nth-child(3n){
            background-color: rgb(128, 128, 128);
        }
    </style>
    <div id="header">
        <ul>
            <li><a>链接1</a></li>
            <li><a>链接2</a></li>
            <li><a>链接3</a></li>
            <li><a>链接4</a></li>
            <li><a>链接5</a></li>
            <li><a>链接6</a></li>
        </ul>
    </div>

界面：

否定伪类

:not()表示否定选择器，及排除或者过滤掉特定的元素。

<style>

        input:not([type="submit"]){
            border: 1px solid red;
        }
    </style>

    <div id="header">
        <label>
            邮箱：
            <input type="email"/> <br>
            用户：
            <input type="text"/> <br>
            密码：
            <input type="password"/> <br>
            <input type="submit"/>
        </label>
    </div>

除了提交类型的输入框，其他类型的输入框边框设置为特定的样式。
界面：

状态伪类

状态伪类主要是针对表单设计的，这里只做简单介绍。CSS3定义了常用的三种状态伪类选择器。

名称	说明
:enable	匹配指定范围内所有可用UI元素
:disable	匹配指定范围内所有不可用元素
:checked	匹配指定范围内所有可用UI元素

CSS3选择器的权重

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
各选择器优先级权重如下：

选择器	格式	优先级权重
ID选择器	#id	100
类选择器/伪类选择器	#classname	10
属性选择器	E[attr=“value”]	10
标签选择器	div	1
通配符选择器	*	0

注意：

• 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明，这和权重无关。
• 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。