什么是选择器

简单而言：从HTML文档中选择一系列元素

div {

color: #f00;

}

这就是一个选择器，表示的意思是 选择所有标签名为 div 的元素，并应用后面的样式组，字体颜色为红色。

举个浅显例子，高中老师要带一部分同学去参与活动，那该挑哪些同学呢？老师给的条件是：所有 数学成绩高于90分 的同学跟我去参与活动。

那这里面呢 ‘数序成绩高于90分’ 就是一个选择器。

有哪些选择器呢

我们先假定html结构如下：

• id选择器

#header {

color: #f00;

}

很清晰了，就是通过#id属性来选择最外层的div元素

• 标签选择器

div {

color: #f00;

}

通过div标签名称来选择所有的div元素

• class类选择器

.header-title {

color: #f00;

}

.header-close {

color: #f00;

}

通过.class属性值来选择所元素

• 后代选择器

#header .header-title {

color: #f00;

}

通过空格来组合选择器，从而选择相应的元素

• 子元素选择器

#header>.header-title {

color: #f00;

}

通过>来组合选择器，从而选择相应的元素

• 兄弟节点选择器

.header-title+.header-close {

color: #f00;

}

通过+来组合选择器，从而选择相应的元素

• 属性选择器

div[id="header"] {

color: #f00;

}

通过[属性名="属性值"]来选择相应的元素

• 伪类选择器

div:hover {

color: #f00;

}

:hover 就是一种伪类选择器，标识当鼠标挪到div元素上的时候

同理还有

:first-child

:active

等等

• 伪元素选择器

div:after {

color: #f00;

}

:after

:before

都是伪元素