2.CSS3新特性 - 2.1 CSS3 新增选择器(上) - 《CSS学习笔记(联动HTML)》

1.属性选择器
- 权重问题
2.结构伪类选择器
- nth-child(n) 选择器（重要）
  - 特性
- 2.2 再来看后面三个关于type的
所有 CSS 伪类（重要）

1.属性选择器

属性选择器在基础选择器之后添加中括号[ ]来选择具有该属性的元素。并且可以选择自定义的属性。

<body>
    <!-- 1.使用属性选择器可以不借助于id或者class选择器 -->
    <input type="text" value="用户名">
    <input type="text">
    <!-- 2.属性选择器还可以选择属性等于某个值的元素 -->
    <input type="password" value="11111">
    <!-- 3.选择某个属性中包含某个值的元素 -->
    <input type="button" value="按钮">
    <!-- 4.属性选择器也能选择自定义的属性 -->
    <input type="text" value="我要变色！" colorChange>
    <style>
        /* 必须是input 但是同时具有value这个属性 选择这个元素使用 [] */
        input[value] {
            color: pink;
        }
        input[type=password] {
            color: pink;
        }
        input[type*=but] {
            color: skyblue;
        }
        /* 属性选择器也能选择自定义的属性，colorChange是我自定义的属性，不是html自带的 */
        input[colorChange] {
            color: springgreen;
        }
    </style>
</body>

比如米哈游官网的属性选择器，就用了很多自定义的属性选择器：

.lang-select-item[data-v-dfb510b0] 就是选择类名为lang-select-item并且具有data-v-dfb510b0这个属性的元素。

权重问题

在VSCode中将鼠标悬停在选择器上也能看到它的权重：

2.结构伪类选择器

2.1 首先来看前三个
其中 first-child 和 last-child是选择第一个和最后一个子元素，比较简单，主要重点学习 nth-child(n)

nth-child(n) 选择器（重要）

nth 就代表第几个子元素，其中的括号内可以写数字、关键字和公式

实例

<body>
    <style>
        /* 1.把所有的偶数孩子选出来 */
        ul li:nth-child(even) {
            background-color: yellow;
        }

        /* 2.把所有的奇数孩子选出来 */
        ul li:nth-child(odd) {
            background-color: purple;
        }

        /* 3.nth-child(n)也能写公式 其中n从0开始 每次加1 括号内必须是n 不能是其他的字母，如果只写n代表选择所有的孩子 */
        /* ul li:nth-child(n) {
            background-color: rgb(153, 186, 216);
        } */

        /* 4.nth-child(2n) 就表示选择了0，2，4...所有的偶数孩子，等价于even */
        ol li:nth-child(2n) {
            background-color: rgb(153, 186, 216);
        }

        /* 同理 2n-1 就是奇数 */
        ol li:nth-child(2n-1) {
            background-color: rgb(218, 95, 235);
        }
    </style>

    <ul>
        <li>我是第1个子元素</li>
        <li>我是第2个子元素</li>
        <li>我是第3个子元素</li>
        <li>我是第4个子元素</li>
        <li>我是第5个子元素</li>
        <li>我是第6个子元素</li>
    </ul>

    <ol>
        <li>我是第1个子元素</li>
        <li>我是第2个子元素</li>
        <li>我是第3个子元素</li>
        <li>我是第4个子元素</li>
        <li>我是第5个子元素</li>
        <li>我是第6个子元素</li>
    </ol>
</body>

但是nth-child有一个很反直觉的特性：

特性

nth-child在执行时，会给所有孩子排序，无论是什么标签类型，并且在使用复合选择器执行时会先查看nth-child的值，再去看前边选择器的值，举个例子：

section div:nth-child(1)  //此处我们直觉的语义应该是section里的第一个div孩子，但事实是错的
//正确的执行顺序：先看section底下的第一个孩子，再去看是否是div，若不是则选择失败。

<section>
  <p>你好</p>
  <div>世界</div>
</section>
<style>
  section div:nth-child(1) {  /*这个选择器是失效的，因为section的第一个子孩子不是div元素
    color: red;
  }
</style>

2.2 再来看后面三个关于type的

上面提到了nth-child()反直觉的语法顺序，所以才有了nth-of-type来纠正这个错误：
first-of-type last-of-type nth-of-type()在使用和规则上与上三个基本相同，用法也一样，只是nth-of-type在处理复合选择器时的顺序与nth-child不同：nth-of-type会先去看前面指定懂得元素，再去标号按顺序查找。

CSS总还有很多其他的伪类，以上只是常用的六种，以下是所有的伪类选择器：

所有 CSS 伪类（重要）

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。