什么是css选择器
简单而言:从HTML文档中选择一系列元素
div {
color: #f00;
}
这就是一个选择器,表示的意思是 选择所有标签名为 div 的元素,并应用后面的样式组,字体颜色为红色。
举个通俗例子,高中老师要带一部分同学去参加活动,那该挑哪些同学呢?老师给的条件是:所有 数学成绩高于90分 的同学跟我去参加活动。
那这里面呢 ‘数序成绩高于90分’ 就是一个选择器。
有哪些选择器呢
我们先假定html结构如下:
<div id="header">
<div class="header-title"></div>
<div class="header-close"></div>
</div>
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
都是伪元素