文章目录
一、属性选择器的使用
通过标签中的属性选择修饰的对象
-
E[attr]
通过选择到标签和属性
a[href]{ color:red }
-
E[attr=“value”]
通过选择到标签和属性中属性值
a[href="baidu"]{ color:red }
-
E[attr^=“value”]
通过选择到标签和属性,属性值是以value开头的
-
E[attr$=“value”]
通过选择到标签和属性,属性值是以value结尾的
-
E[attr*=“value”]:
通过选择到标签和属性,属性值中含有value的
二、结构选择器的使用
把很多标签放在一起,通过选择到第几个进行修饰
好用,但没办法选择多个,拓展用法:负数
-
标签名称全部都是一样时
- E:first-child 获取相同标签组成的集合下面的第一个子级元素
- E:last-child 获取相同标签组成的集合下面的最后一个子级元素
- E:nth-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从前往后数)
- nth表示第几个
- child 子级、孩子
- (n)表示第几个,默认n为全部
- n可以是?【重点】
- 数字:1、2、3、4
- odd 奇数、even 偶数
- 2n 偶数、2n-1 奇数
- 负数用法:-n+数字 表示从第一个到第几个
- E:nth-last-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从后往前数)
-
当标签名称不一样时
首先把相同标签组成一个集合,再从这个集合里面选择到第几个。(将上面的child换成of-type)
- E:first-of-type 第一个子级元素
- E:last-of-type 最后一个子级元素
- E:nth-of-type(n){} 第几个子级元素(从前往后数)
- E:nth-last-of-type(n){} 第几个子级元素(从后往前数)
<!-- 将第三个a标签内的文字变红色 --> <ul> <li><a href="">这是第1个</a></li> <li><a href="">这是第2个</a></li> <li><a href="">这是第3个</a></li> </ul>
ul li:nth-of-type(3) a{ color: red; }
-
拓展
- E:empty{} 选择的元素里面没有任何内容(空格也不行)
- E:root{} 指的是浏览器
三、UI状态伪类选择器
用于选择处于某种状态下的UI元素
input:enabled{可用状态下的样式}
input:disabled{禁用状态下的样式}
input:checked{选中状态下的样式}
input{outline: red;} 控制input的外边框
四、否定伪类选择器
排除某个选择其他的元素
:not(否定的条件) 否定某个选择其他的元素
五、目标伪类选择器
可用于选择当前活动的目标元素
:target 该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用
- 语法::target 表示可以点击改变元素的状态
- 注意:需要结合锚点实现
- 解释:谁改变就给谁添加即可
<div id="box">灯</div>
<a href="#box">开关</a>
#box:target{
color: red;
font-size: 30px;
}