CSS - 选择器

本文要点：

1. 什么叫选择器？它的作用是什么？
2. 选择器的种类
3. 选择器优先级别

什么叫选择器

1. CSS 选择器用于设置选择的元素的样式，简单理解就是设置被选中的元素的外观；
2. 选择器的语法：selector{property:value;} 。

选择器的种类

1. 基本的选择器：标签选择器、类别选择器、id 选择器、属性选择器；
2. 扩展选择器：后代选择器（包含选择器）、继承选择器（子选择器）、伪类选择器，伪元素选择器；
3. 其他选择器。

标签选择器

---

标签选择器用于设置指定元素名称的所有元素的样式，其语法格式为：标签名称{属性:属性值;} 。

代码：

    
    
    


这是一个段落。

效果演示：

标签选择器

类别选择器

---

类别选择器用于设置指定类的所有元素的样式，其语法格式为：.类别{CSS属性:属性值;} 。

代码：

    
    
    


段落1
段落2
段落3
段落4

效果演示：

类别选择器

id 选择器

---

id 选择器用于设置具有指定 id 的元素的样式，其语法格式为：#id{CSS属性:属性值;} 。

代码：

    
    
    


段落1
段落2
段落3
段落4

效果演示：

id 选择器

属性选择器

---

属性选择器用于设置具有指定属性的元素的样式，其语法格式为：[指定属性]{CSS属性:属性值;} 。

代码：

    
    
    


段落1
段落2
段落3
段落4

效果演示：

属性选择器

后代选择器

---

后代选择器，又称包含选择器，可以跳级（不必逐级设置），其语法格式为：父元素 子元素{属性:属性值;} 或 父元素 子元素的子元素{CSS属性:属性值;} 。

代码：

    
    
    



    
首页
    
热门
    
消息

效果演示：

后代选择器

继承选择器

---

继承选择器，又称子选择器，不可以跳级（必须逐级逐级设置），其语法格式为：父元素 > 子元素{CSS属性:属性值;} 或 父元素 > 子元素 > 子元素的子元素{属性:属性值;} 。

代码：

    
    
    



    
首页
    
热门
    
消息

效果演示：

继承选择器

伪类选择器

---

伪类选择器，CSS 中已经定义好的选择器，不能随便取名，其语法格式为：选择器:伪类{CSS属性:属性值;} 。

1. 文本伪类选择器

代码：

    
    
    


京东

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后； 伪类的名称不区分大小写。

效果演示：

伪类选择器

注意： 当打开某个链接后，即使再次刷新页面，该链接的样式仍为已访问的链接样式，可以通过清除浏览器缓存的方法解决。

2. 结构性伪类选择器

1. x:first-child： 匹配 x 元素中的第一个子元素；
2. x:last-child： 匹配 x 元素中的最后一个子元素；
3. x:nth-child(n)： 匹配 x 元素中的某一个子元素；
4. x:first-of-type： 匹配 x 元素下的某一种类型子元素的第一个元素；
5. x:last-of-type： 匹配 x 元素下的某一种类型子元素的最后一个元素；
6. x:nth-of-type(n)： 匹配 x 元素下的某一种类型子元素的第一个元素。
   注意： x 元素表示任意元素，n 可以为常量、公式（只能用n）。

代码：

    
    
    



    
段落1(div)

    
段落2(div)

    
段落3(div)


    
段落4(span)
    
段落5(span)
    
段落6(span)
    
段落7(span)



    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk

    
djfij eodf] dfk



    span1


    
标题1
    span2

    span3


    
标题2
    span4

    span5


    
标题3
    span6


    
标题4
    span7

    span8


    
标题5

    
标题6

效果演示：

结构性伪类选择器1

结构性伪类选择器2

结构性伪类选择器3

伪元素选择器

---

1. 伪元素用于向某些选择器设置特殊效果，其语法格式为：选择器:伪元素{CSS属性:属性值;} ；
2. CSS 中有如下四种伪元素选择器：

• first-line： 为某个元素的第一行文字使用样式；
• first-letter： 为某个元素中的文字的首字母或第一个字使用样式；
• before： 在某个元素之前插入一些内容，使用 content 属性来指定要插入的内容，注意：插入的内容的元素与被插入的元素一样；
• after： 在某个元素之后插入一些内容，使用 content 属性来指定要插入的内容，注意：插入的内容的元素与被插入的元素一样。

代码：

    
    
    


关于菲律宾单方面提起的南海仲裁案及其所谓裁决，中国外交部今天已发表声明全面阐述了中国政府的严正立场。
    我想再次强调，菲律宾阿基诺三世政府单方面提起仲裁的行为违反国际法，是一场披着法律外衣的政治闹剧。
    仲裁庭的行为及其裁决严重背离国际仲裁一般实践，有关裁决完全无效，没有法律拘束力。

这是原本的内容

效果演示：

伪元素选择器

其他选择器

---

1. * 选择器

用于选择所有元素，也可选择另一个元素内的所有元素。

代码：

    
    
    


段落1

标题1
span
div
这是一个链接

    
首页
    
热门
    
消息

效果演示：

* 选择器

2. 相邻选择器

1. 用于选择所有元素，也可选择另一个元素内的所有元素。
2. x + y {} 选择同一父元素下所有紧接着 x 元素之后的 y 元素；
3. x ~ y {} 选择 x 元素之后的每一个 y 元素。
   注意： x 元素、y 元素均为任意元素。

代码：

    
    
    



    
段落1

    
标题1

    
段落2

    
标题2

    
段落3

段落1

div1

标题3

段落4

标题4

div2

段落5

div3
div4
div5

标题5

效果演示：

相邻选择器1

相邻选择器2

更多选择器请参考 菜鸟教程 以及 w3cschool.com 。

---

参考资料：

• CSS 选择器 - 菜鸟教程
• CSS样式定义的优先级顺序总结 - zztfj
• 详解CSS选择器、优先级与匹配原理 - cbwcwy
• CSS3学习笔记1：结构性伪类选择器 - ccqq_w