css选择器

选择器

选择器的作用就是选中css样式生效的范围。

关于选择器的测试

首先要说明的是css的内部样式表不是必须写在head区域的，他是可以写在html文件的任意位置的，写在head位置的目的就是让浏览器尽可能早的加载到css样式，否则浏览器在渲染过程中可能会出现闪烁的问题(未加载css时渲染出来的页面在加载css后重新进行渲染)，但是，这个可以有效的进行测试，让内部样式表和使用样式的元素在源码上排版在一个位置，这样就可以更好的查看源码。

选择器

选择器对于一个元素是有优先级的：即如果定义了一套选择器规则，而对于一个确定的元素他适用于很多选择器规则，对于一个确定的元素，他会根据选择器的优先级顺序选择最适合他的对应的选择器规则属性，即优先级高的相同属性会覆盖优先级低的对应的属性，优先级顺序为：

简单选择器

• ID选择器
• 元素选择器
• 类选择器

通配符选择器

*：独立选择器，表示选中所有元素；

<style>
    * {
        color: red;
    }
</style>

<div>Lorem.</div>
<h1>Lorem.</h1>
<p>Lorem.</p>

属性选择器

独立选择器，根据属性名或者属性值来选中元素，也可以看资料（搜索属性选择器mdn）,下面是一些示例：

<style>
    /* 选中所有具有href属性的元素 */
    [href] {
        color: blue;
    }

    /* 选中href属性为"a"的元素 */
    [href="a"] {
        color: green;
    }

    /* 选中href中含有a单词的元素 */
    [href~="a"] {
        color: #b82c2c;
    }
</style>

<a href="a">Lorem ipsum.</a>
<a href="b a">Praesentium, tenetur!</a>
<a href="c">Illo, incidunt.</a>

伪类选择器

选中某些元素的某种状态，需要附加在选择器之后，如果没有指定具体选择器，那么就是*通配符选择器：

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。

:link

仅用于a元素，超链接从来没访问过的状态

:visited

仅用于a元素，超链接被访问过的状态

:hover

悬停状态 – 当鼠标移动到元素上时的状态，注意，这个元素上指的是元素的内容器(不包括margin区，且内容区有时会比显示的内容占据的范围要大得多)；
子元素的内容区会触发父元素的hover，这种情况发生在父块盒指定了width、height；而子块盒指定的width、height超过了父块盒内容区大小，此时光标移动到子块盒内容区中会触发父块盒的hover。

:active

激活状态 – 鼠标按下去的状态

:nth-child

符合选择器标准的第n个元素，从1开始计数，如：

/* 选中parent类中的第一个元素 */
.item :nth-child(1)
{

}

/* 选中parent类中的第2n个元素（n为整数，只要索引位置符合对应的数就被选中） */
.item :nth-child(2n)
{

}

/* 选中parent类中的第2n个元素（n为整数，只要索引位置符合对应的数就被选中）且为p元素的元素 */
.item p:nth-child(2n)
{

}

:nth-of-type

搭配元素类型机型使用(如果前面是类的话，那么会先获取对应的元素类型)，选中该类型对应的所有兄弟元素，然后排序，然后进行选择器匹配，从1开始计数
```css
/* 选中每种元素类型的第一个 */
.item :nth-of-type(1)
{

}

/* 选中parent类中p类型元素中的第2n个元素（n为整数，只要索引位置符合对应的数就被选中） */
.item p:nth-child(2n)
{

}
```

```css
<style>
    /* 直接这样写针对所有元素 */
    :hover {
        color: red;
    }
    /* 如果四个状态都要，那么要按照以下顺序，他们应该是处于同一优先级的，因此会出现后者覆盖前者的效果，因此如果乱序可能在对应的状态无法正常显示 */
    /* 超链接没访问过 */
    a:link {
        color: yellow;
    }

    /* 超链接没访问过 */
    a:visited {
        color: green;
    }

    /* 选中a元素悬停状态 */
    a:hover {
        color: black;
    }

    /* 选中鼠标按下时的状态 */
    a:active {
        color: gray;
    }
</style>
```
```html
<a href="">Lorem ipsum.</a>
<a href="">Praesentium, tenetur!</a>
<a href="">Illo, incidunt.</a>
```

:first-child / :last-child

选中每个类型的第一个元素
加元素类型或者类名进行限定，此时只有同时满足两个条件才能被选中：

a:first-child {
    /* 选中子元素中第一个元素，且该元素必须是a元素，否则不选中 */
}

:first-of-type / :last-of-type

选中第一个对应类型的元素

a:first-of-type {
    /* 选中子元素中第一个a元素 */
}

:focus

• tabindex 可设置tab点击时的元素跳转顺序，默认是从上到下的顺序。
  元素聚焦时的样式，可以按tab键切换元素焦点；

:checked

单选或多选时选中的选择框；单选框和多选框是可替换元素，可替换元素的很多css属性无法设置，很多属性反而要依赖属性去进行设置；
单选框多选框的css可修改如下：

• margin、padding等

:disabled

表单元素disable的时候被选中

:not()

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类，使用时直接传入选择器：:not(p)

伪元素选择器

伪元素选择器是一个附加在选择器末尾的关键词，可以对被选择元素的特定部分定义样式；

::before

在整个元素的开头位置添加一个元素，可用于添加字符串

::after

在整个元素的开头位置添加一个元素，可用于在整个元素的末尾添加字符串，注意，这个字符串仅仅是字符串，即使字符串中添加了元素标签，也没有效果

::first-letter

选中第一个字母

程序范例：

<style>
    .book::before {
        content: "<p>《</p>";           /* <p></p>无效果，作为字符串输出 */
    }
    .book::after {
        content: "》";
    }
</style>

<p>Lorem ipsum dolor sit amet, <span class="book">consectetur</span> adipisicing.</p>

::first-line

选中第一行的文字

::selection

选中被用户框选的文字

::placeholder

选中表单元素的placeholder文字

选择器的组合

并且

直接将两个独立选择器连接，表示并且：

<style>
    /* <p></p>无效果，作为字符串输出 */
    p {
        text-indent: 2em;
        line-height: 1.5;
    }

    /* p && class="red" */
    p.red {
        color: red;
    }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quas?</p>
<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, reprehenderit!</p>

后代元素

两个选择器之间加空格，表示选择满足后代关系的元素：

<style>
    /* <p></p>无效果，作为字符串输出 */
    p {
        text-indent: 2em;
        line-height: 1.5;
    }

    /* 只要满足后代关系即可选中目标元素，这个是后代关系，不是父子关系 */
    .red div p {
        color: red;
    }
    .red p {
        color: red;
    }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quas?</p>
<div class="red">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, reprehenderit!</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, reprehenderit!</p>
</div>

子元素

只能选中子元素关系，用>，可以连续指定(但相邻的需要为父子关系)，和上面的后代元素一样：

<style>
    /* <p></p>无效果，作为字符串输出 */
    p {
        text-indent: 2em;
        line-height: 1.5;
    }

    .red>div>p {
        color: green;
    }

    /* 只要满足后代关系即可选中目标元素，这个是后代关系，不是父子关系 */
    .red>p {
        color: blue;
    }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quas?</p>
<div class="red">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, reprehenderit!</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, reprehenderit!</p>
</div>

后接相邻元素

可以选中目标元素的下一个相邻元素，无法选择上一个，和css渲染页面有关：

<style>
    .special {
        color: red;
    }
    /* 选中 special 类的下一个兄弟 li 元素，li 元素必须在 special 类之后才可选中 */
    .special+li {
        color: blue;
    }
</style>

<ul>
    <li>Pariatur.</li>
    <li class="special">Sapiente.</li>
    <li>Assumenda.</li>
    <li>Rem.</li>
</ul>

后接所有兄弟元素

可以选中目标元素的后面的所有兄弟元素，无法选择之前的，和css渲染页面有关：

<style>
    .special2 {
        color: red;
    }
    /* 选中 special 类的后面所有的兄弟 li 元素 */
    .special2~li {
        color: blue;
    }
</style>

<ul>
    <li>Pariatur.</li>
    <li class="special2">Sapiente.</li>
    <li>Assumenda.</li>
    <li>Rem.</li>
</ul>

选择器的并列

语法糖(可以更方便的编程)，多个选择用逗号隔开，作用就是这些选择器可以共享指定的样式。