CSS 选择器

2023-11-15
江苏
本文字数：2134 字
阅读完需：约 7 分钟

CSS 选择器做为 CSS 的基础，他的语法在 W3C 官网有详细的介绍。这里列举一下选择器，回过头来看这个“大纲”也方便。

基础选择器

通配选择器

选中所有 HTML 元素

<style>  * {    color: red;    font-size: 40px;  }</style>

复制代码

元素选择器

选中某种元素

<style>  span {    color: red;    font-size: 40px;  }</style>

复制代码

类选择器

根据元素的 class 值，来选择一批（或一个）元素

<style>  /* 选中class的值为'warn'的元素，这里指的是第一个和第二个span元素 */  .warn {    color: yellow;  }</style><span class="warn">1</span><span class="warn">2</span><span>3</span>

复制代码

ID 选择器

根据元素的 id 属性值，精准的选中某个元素

<style>  #first {    color: red;  }</style><span id="first">1</span>

复制代码

复合选择器

交集选择器

选中同时符合多个条件的元素

<style>  span.content {    color: red;  }</style><span>1</span><span class="content">2</span><div class="content">3</div>

复制代码

并集选择器

选中多个选择器对应的元素，也叫分组选择器

<style>  .first, div {  	color: red;  }</style><span class="first">1</span><span>2</span><div>3</div>

复制代码

后代选择器

选中指定元素中，符合要求的后代元素

<style>  /* 选中的是span1,2,3，即后代选择器可以选中儿子、孙子、重孙子... */  div span {  	color: red;  }</style><div>  <span>1</span>  <span>2</span>  <a><span>3</span></a></div><span>4</span>

复制代码

子代选择起

选中指定元素中符合要求的子元素（特指儿子）

<style>  /* 选中的是span1,2，即后代选择器只能选中儿子 */  div>span {  	color: red;  }<div>  <span>1</span>  <span>2</span>  <a><span>3</span></a></div><span>4</span>

复制代码

兄弟选择器

相邻兄弟选择器

选中指定元素后面的那个符合条件的相邻兄弟元素

<style>  /* 选中的是span2 */  .first+span {  	color: red;  }<div>  <span>0</span>  <span class="first">1</span>  <span>2</span>  <span>3</span></div>

复制代码

通用兄弟选择器

选中指定元素后面的所有符合条件的兄弟元素

<style>  /* 选中的是span2,3 */  .first~span {  	color: red;  }<div>  <span>0</span>  <span class="first">1</span>  <span>2</span>  <span>3</span></div>

复制代码

属性选择器

[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名 $="值"] 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*="值"] 选中包含某个属性，属性值包含指定的值的元素

<style>  /* 选中的是span0,1,2,3 */  span[title] {  	color: red;  }    /* 选中的是span0 */  span[title="zero"] {    color: blue;  }    /* 选中的是span1 */  span[title^="f"] {    color: blue;  }    /* 选中的是span2,3 */  span[title^="d"] {    color: orange;  }    /* 选中的是span0,2 */  span[title*="o"] {    color: green;  }<div>  <span title="zero">0</span>  <span title="first">1</span>  <span title="second">2</span>  <span title="third">3</span></div>

复制代码

伪类选择起

动态伪类

:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态

注意点：注意 LVHA 的顺序，即 link, visited, hover, active。记忆技巧 LV 好。如果不按照以上顺心，由于一个元素可能会同时触发多种状态（a 标签被点击时有 hover 和 active 两种状态加 link 或者 visited 中的一种状态），那后写的样式会覆盖先写的。

:focus 获取焦点的元素

注：表单元素才可以使用 focus

结构伪类

:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第 n 个
:first-of-type 所有同类型兄弟元素中的第 1 一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第 n 个

否定伪类

:not(选择器) 排除满足括号中条件的元素

ui 伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disable 不可用的表单元素（有 disabled 属性）

目标伪类（了解）

:target 选中锚点指向的元素

语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

伪元素选择器

::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中鼠标被选中的内容
::placeholder 选中输入框中的提示文字
::before 在元素最开始的位置创建一个子元素（必须使用 content 属性指定元素内容）
::after 在元素最后的位置创建一个子元素（必须使用 content 属性指定元素内容）

补充

选择器的优先级

基础选择器：行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器
复合选择器：通过计算一组权重来比较，可是为(a, b, c)

a：ID 选择器的个数

b：类、伪类、属性选择器的个数

c：元素、伪元素选择器的个数

三大特性

层叠性（会覆盖）
继承性（部分属性会继承父元素的，如 font-size）
优先级

选择器优先级的扩展

!important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承样式

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/70847fbd78b4c3b7ac35ab411】。文章转载请联系作者。

阡陌r

关注

即行于阡陌，也归于浩瀚 2018-03-26 加入

还未添加个人简介

发布

暂无评论

创作场景

CSS 选择器

基础选择器

通配选择器

元素选择器

类选择器

ID 选择器

复合选择器

交集选择器

并集选择器

后代选择器

子代选择起

兄弟选择器

相邻兄弟选择器

通用兄弟选择器

属性选择器

伪类选择起

动态伪类

结构伪类

否定伪类

ui 伪类

目标伪类（了解）

语言伪类（了解）

伪元素选择器

补充

选择器的优先级

三大特性

阡陌r

评论