【前端自学之路】CSS之选择器

什么是选择器

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

1
2
3
div {  
color: #f00;
}

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

举个通俗例子,高中老师要带一部分同学去参加活动,那该挑哪些同学呢?老师给的条件是:所有 数学成绩高于90分 的同学跟我去参加活动。

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

有哪些选择器呢

我们先假定html结构如下:

1
2
3
4
<div id="header">
<div class="header-title"></div>
<div class="header-close"></div>
</div>

  • id选择器
1
2
3
#header {
color: #f00;
}

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

  • 标签选择器
1
2
3
div {
color: #f00;
}

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

  • class类选择器
1
2
3
4
5
6
7
.header-title {
color: #f00;
}

.header-close {
color: #f00;
}

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

  • 后代选择器
1
2
3
#header .header-title {
color: #f00;
}

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

  • 子元素选择器
1
2
3
#header>.header-title {
color: #f00;
}

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

  • 兄弟节点选择器
1
2
3
.header-title+.header-close {
color: #f00;
}

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

  • 属性选择器
1
2
3
div[id="header"] {
color: #f00;
}

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

  • 伪类选择器
1
2
3
div:hover {
color: #f00;
}

:hover 就是一种伪类选择器,标识当鼠标挪到div元素上的时候
同理还有
:first-child
:active
等等

  • 伪元素选择器
1
2
3
div:after {
color: #f00;
}

:after
:before
都是伪元素

坚持原创技术分享,谢谢鼓励我继续创作!