本文分类:
HTML&CSS

选择器的优先级

优先级与权重

  1. 简单判断方法

    • 内联样式 > id选择器 > 类选择器 > 类型选择器
  2. 权重计算方法

    • 内联样式:1000
    • id选择器:100
    • 类选择器、属性选择器、伪类选择器:10
    • 类型选择器、伪元素选择器:1

提高优先级

基本选择器

选择器 语法 示例 示例说明
通配符选择器 * * 选择所有元素
元素选择器 元素名 h1 选择所有的h1元素
ID选择器 #id #app 选择id=”app”的元素
类选择器 .class .container 选择class=”container”的元素
类选择器 元素名.class h1.title 选择所有class=”title”的h1元素

组合选择器

选择器 语法 示例 示例说明
多元素选择器 E, F h1, h2 选择所有h1和h2元素
后代选择器 E F article h1 选择article元素内的所有后代h1元素
直接子元素选择器 E > F article > h1 选择article元素内的所有直接h1子元素
相邻元素选择器 E + F article + h1 选择拥有同一个父元素,并紧邻article元素的h1元素
兄弟元素选择器 E ~ F h1 ~ p 选择拥有同一个父元素,在h1元素后面的所有p子元素

属性选择器

选择器 语法 示例 示例说明
属性存在匹配 [属性名] [title] 选择页面中有title属性的元素
属性值精确匹配 [属性名=值] [type=”text”] 选择页面中type属性的值为text的元素
属性值包含 [属性名~=值] [class~=”big”] 选择页面中class属性的值包含big的元素
属性值开头 [属性名 |=值] [lang |=”en”] 选择lang属性等于en或以en-开头的元素
属性值前缀匹配 [属性名^=值] [href^=”#”] 选择href属性值以#开头的元素
属性值后缀匹配 [属性名$=值] [href$=”pdf”] 选择 href属性值以pdf结尾的所有元素
属性值子串匹配 [属性名*=值] [href*=”big”] 选择href属性值包含big的所有元素

属性包含选择器

比较 ~= 和 *=

比较 |= 和 ^=

伪元素选择器

伪元素是在HTML中不存在的元素,它们是另一个元素的一部分,例如,定义第一个字母或者第一行时你并没有在HTML中标记它们。

选择器 语法 示例 示例说明
首字母选择器 ::first-letter p::first-letter 选择每个p元素的首字母
首行选择器 ::first-line p::first-line 选择每个p元素的首行
前置内容伪元素选择器 ::before li::before li元素内容的前面插入新内容
后置内容伪元素选择器 ::after li::after li元素内容的后面插入新内容
选中内容伪元素选择器 ::selection p::selection p元素内容被选中时

伪类选择器

伪类选择器应用于一组HTML元素,你无需在HTML中用类来标记它们。例如,即使不用伪类选择器,也可以在元素的第一个子元素上标记class=”first-child”来实现相关功能

超链接伪类选择器

语法 示例 示例说明
:link a:link 未被访问的超链接
:visited a:visited 已被成功访问的超链接

用户行为伪类选择器

语法 示例 示例说明
:hover img:hover 鼠标停留时
:active img:active 鼠标点击时
:focus input:focus 文本框获取焦点时

元素状态伪类选择器

语法 示例 示例说明
:enabled button:enabled 按钮可用时
:disabled button:disabled 按钮禁用时
:checked input[type=checkbox]:checked 复选框选中时

目标伪类选择器

如果URL后面带有#锚名称,那么这个被链接的元素就是目标元素

语法 示例 示例说明
:target div:target 选择活动的锚点指向的目标div元素

语言伪类选择器

语法 示例 示例说明
:lang() p:lang(en) 说明:选择以en开头的lang属性的p元素

否定伪类选择器

语法 示例 示例说明
:not() p:not(:lang(en)) 选择不是以en开头的lang属性的p元素

空元素选择器

语法 示例 示例说明
:empty p:empty 选择没有任何内容的p元素

结构伪类选择器

语法 示例 示例说明
:root :root 选择文档的根元素
:first-child li:first-child 如果父元素下第一个子元素为li元素,则选择它
:last-child li:last-child 如果父元素下最后一个元素为li元素,则选择它
:nth-child(n) li:nth-child(2) 如果父元素下第二个元素为li元素,则选择它
  li:nth-child(odd) 如果父元素下所有正数下来第奇数个元素为li元素,则选择它们
  li:nth-child(even) 如果父元素下所有正数下来第偶数个元素为li元素,则选择它们
:nth-last-child(n) li:nth-last-child(2) 如果父元素下倒数第二个元素为li元素,则选择它
  li:nth-last-child(odd) 如果父元素下所有倒数上去第奇数个元素为li元素,则选择它
  li:nth-last-child(even) 如果父元素下所有倒数上去第偶数个元素为li元素,则选择它
:only-child li:only-child 如果父元素下只有一个元素,且这个元素是li元素,则选择它

指定类型的子元素选择器

语法 示例 示例说明
:first-of-type dd:first-of-type 选择父元素下第一个dd子元素
:last-of-type dt:last-of-type 选择父元素下最后一个dt子元素
:nth-of-type(n) dd:nth-of-type(2) 选择父元素下第二个dd子元素
  dd:nth-of-type(odd) 选择父元素下所有正数下来第奇数个dd子元素
  dd:nth-of-type(even) 选择父元素下所有正数下来第偶数个dd子元素
:nth-last-of-type(n) dt:nth-last-of-type(2) 选择父元素下倒数第二个dt子元素
  dt:nth-last-of-type(odd) 选择父元素下所有倒数上去第奇数个dt子元素
  dt:nth-last-of-type(even) 选择父元素下所有倒数上去第偶数个dt子元素
:only-of-type li:only-of-type 选择是父元素下有唯一一个li元素,则选择它

比较 nth-child 和 nth-of-type

关于 nth-child 和 nth-of-type 需要注意两点,第一点是,选择器中的n可以是一个表达式,比如4n+1,其中n从0开始,当表达式的值为0或小于0的时候,不选择任何匹配的元素。第二点是,要仔细体会两者的区别,nth-child的含义是,如果第n个元素是指定类型的元素才选中,而nth-of-type的含义是选中第n个指定类型的元素,请看下面的示例。

#box>p:nth-child(2) {
    color: red;
}

#box>p:nth-of-type(2) {
    color: blue;
}
<div id="box">
    <h1>CSS DEMO</h1>
    <p>hiwzc.com</p> <!-- 红色 -->
    <p>hiwzc.com</p> <!-- 蓝色 -->
</div>

比较 only-child 和 only-of-type

only-child的含义是,如果父元素下只有一个元素,且这个元素是指定类型的元素,则选择它,请看下面的示例。

#box>p:only-child {
    color: red;
}
<div id="box">
    <h1>CSS DEMO</h1>
    <p>hiwzc.com</p> <!-- 不变色 -->
</div>

<div id="box">
    <p>hiwzc.com</p> <!-- 红色 -->
</div>

only-of-type的含义是,如果父元素下有指定类型的元素,且只有一个这样的元素,则选择它,请看下面的示例。

#box>p:only-child {
    color: red;
}
<div id="box">
    <h1>CSS DEMO</h1>
    <p>hiwzc.com</p> <!-- 红色 -->
</div>

<div id="box">
    <p>hiwzc.com</p> <!-- 红色 -->
</div>
本文来自 [时光记 - 王智超的个人空间](www.hiwzc.com),转载请注明出处。