css3选择器 | 易学教程

本人有幸成为逆战班的一员，接触并学习HTML5，今天总结一下CSS3选择器的学习内容。在总结之前，我们先了解一下，什么是CSS选择器？
CSS选择器是一种将CSS效果应用到某一个或者多个xhtml标记上的一种选择机制。
div{backgroung-color: red}
接下来，我将分类说明我在逆战班目前所学CSS选择器内容：
1：ID选择器
在这里插入图片描述
ID选择器，以#开始，数字或字母结尾。在一个页面中，ID是唯一值，不能重复使用。可以通过快捷键创建（div#elem+tab键→<div id=“elme”></div>）。
2：CLASS选择器（类选择器）

CLASS选择器，名称以点开始，字母或数字结尾。可以重复使用，对多个标签应用。可以通过快捷键创建（div.elem+tab键→<div class=“elme”></div>）。
3：标签选择器（TAG选择器）
在这里插入图片描述
标签选择器，名称均为html标签，使用到该标签，CSS效果作用到该标签。一般不常用，基本用来去掉默认样式，例如ul{list-style: none}，a{text-decoration: none}。
4：群组选择器（分组选择器）

群组选择器，控制多个并列元素的效果，如图所示，对三个元素同时起作用。
5：通配选择器
在这里插入图片描述
通配选择器，*号为名称，对所有元素起作用，一般用来去掉所有标签的默认样式。
6：层次选择器

后代：div li{}，选取<div>里所有<li>元素
父子：div>li{}，选取<div>元素下名为<li>元素
兄弟：#elem~div{}，选取id为elem的元素后面的所有<div>元素
相邻：.elem+div{}，选取class为elem的元素下相邻的<div>元素

层次选择器，主要是由前几种选择器变化而来，根据前几种选择器来控制内部子元素的表现效果。
7：属性选择器

选择器	说明
M[attr]	M元素选择指定为attr属性的集合
M[attr=value]	M元素选择指定为attr属性和value值的集合
M[attr*=value]	M元素选择指定为attr属性并包含值为value的集合
M[attr^=value]	M元素选择指定为attr属性并且起始值为value的集合
M[attr$=value]	M元素选择指定为attr属性并且j结束值为value的集合
M[attr1][attr2]	M元素选择满足多个属性的集合

8：伪类选择器
CSS伪类选择器用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候。
接下来展现两个常用伪类选择器(:hover :active)
在这里插入图片描述
:hover为鼠标移入的选择器，首先，去除链接默认样式，当鼠标经了“我来自逆战班”“，字体变为红色，添加下划线

当鼠标按下的时候，字体变为蓝色，添加下划线

下面是四种经常针对a标签的伪类选择器

:link 默认状态
:visited 已访问的效果
:hover 鼠标经过状态
:active 按下状态的效果

这四个选择器中，:link、 :visited只能给a标签加，而另外两个所有标签都能添加。当a标签需要添加四个伪类的时候，注意顺序：L V H A（可以记love和hate）
其它伪类选择器
:after和:before：它们不用单独去创建一个标签，就可以给文本添加样式
div:after{content:“111”; color:red;}，即可在div区域内容的后面添加111。
9：结构性伪类选择器
这里将利用图片一一对应说明

:nth-of-type()：()中可以添加的值：number（第几个，从1开始）、n（表示一个0到无穷大的数）

添入数值，例如1，就是选中#box下，第一个div区，和它相同的，是:nth-child()，但是要注意

在这里，我们选中的是#box下第二个div，但是并不会生效，而:nth-of-type()不存在这种情况的
:first-of-type

这里很好理解，就是选中#box区域下第一个div，用法相同:first-child
:last-of-type
同:first-of-type，即为选中#box区域下最后一个div，用法相同:last-child
:only-of-type
只一个div的情况下，用此标签，用法相同:only-child

上面是我在逆战班学到的关于CSS3选择器的内容，fighting！我来自逆战班！

来源：CSDN

作者：weixin_46380993

链接：https://blog.csdn.net/weixin_46380993/article/details/104441818

标签

css

css3选择器