13-CSS3选择器的使用

一、属性选择器的使用

通过标签中的属性选择修饰的对象

1. E[attr]

   通过选择到标签和属性

   a[href]{
       color:red
   }
   

2. E[attr=“value”]

   通过选择到标签和属性中属性值

   a[href="baidu"]{
       color:red
   }
   

3. E[attr^=“value”]

   通过选择到标签和属性，属性值是以value开头的

4. E[attr$=“value”]

   通过选择到标签和属性，属性值是以value结尾的

5. E[attr*=“value”]：

   通过选择到标签和属性，属性值中含有value的

二、结构选择器的使用

把很多标签放在一起，通过选择到第几个进行修饰

好用，但没办法选择多个，拓展用法：负数

1. 标签名称全部都是一样时

   • 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){} 获取相同标签组成的集合下面的第几个子级元素（从后往前数）

2. 当标签名称不一样时

   首先把相同标签组成一个集合，再从这个集合里面选择到第几个。（将上面的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;
   }
   

3. 拓展

   • E:empty{} 选择的元素里面没有任何内容（空格也不行）
   • E:root{} 指的是浏览器

三、UI状态伪类选择器

用于选择处于某种状态下的UI元素

input:enabled{可用状态下的样式}
input:disabled{禁用状态下的样式}
input:checked{选中状态下的样式}

input{outline: red;} 控制input的外边框

四、否定伪类选择器

排除某个选择其他的元素

:not(否定的条件) 否定某个选择其他的元素

五、目标伪类选择器

可用于选择当前活动的目标元素

:target 该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

1. 语法：:target 表示可以点击改变元素的状态
2. 注意：需要结合锚点实现
3. 解释：谁改变就给谁添加即可

<div id="box">灯</div>
<a href="#box">开关</a>

#box:target{
    color: red;
    font-size: 30px;
}

案例：手风琴效果实现二级菜单