css选择器的优先级都不知道，你敢说你会前端？

伪类选择器

1. a元素的伪类：link、visited、active、hover。
2. 其他
   (1) li:first-child{} (修饰第一个li)
   (2) li:last-child{} (修饰最后一个li)
   (3) li:nth-child{} (修饰第()个li)
   (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

<ul>
    <li></li>
    <li></li>
    <li><a href=""></a></li>
li:first-child {
    border:1px solid black;
li:last-child {
    border:1px solid red;
li:nth-child(2){
    border:1px solid yellow;
}

伪类选择器

p::first-line {
  color: blue;
  text-transform: uppercase;
}

群选择器

<div class="qun">
    <p><span></span></p>
.qun,span {
    margin:0;
}

全局选择器

以*开头(星号标在大括号前，修饰了包含body所有的标签)

*{
margin:0;
}

紧邻兄弟选择器（相邻选择器）

以+隔开相邻关系的元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。

<div class="qun">
    <p class="first">
        <span>第一</span>
    <p>第二</p> /*修饰*/
    <p>第三</p>
.first+p{
    margin:0;
}

子元素选择器

以>隔开父子级元素，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。

<div class="qun">
    <p class="first">
        <span>第一</span>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
.qun > span {
    color:black;
}

后代选择器

以空格隔开包含关系的元素，选择元素的所有后代

<div class="qun">
    <p class="first">
        <span>第一</span> /*修饰*/
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
.qun span {
    color:black;
}

伪类和伪元素的区别

理解：伪类：宦官；伪元素：皇帝。

根本区别

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

伪类 ：伪类的操作对象是原来的 dom结构里就存在的元素 。伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以 通过伪类来为其添加样式 。
伪元素 ：创建对象。伪元素的操作对象是新生成的dom元素,这个对象不会占用DOM节点，不会出现在DOM中，不会改变文档的内容，不可复制，仅仅是在CSS渲染层加入。

//伪类
<style>
  li:nth-child(2n+1) {
    color: #00a2d4;
</style>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
//伪元素
<style>
  p::first-letter {
    color: red;
</style>
<p>一二三四</p>
//相当于
<p><span class="first-letter">一</span>二三四</p>

数量

一个css选择符（朝代）只能有一个伪元素，但可以有多个伪类
伪类可以进行多个拼接。 伪元素不能进行拼接。

<style>
    input:out-of-range:focus {
      background: #00a2d4;
    input:out-of-range + h2::after {
      content: "超出范围"
</style>
<input type="number" min="1" max="10">
<h2>结果：</h2>
</body>

位置

伪元素在后面，伪类在前面。

<style>
    input {
      display: block;
    input::after {
      content: "已勾选";
      display: none;
      width: 50px;
      height: 50px;
      margin-left: 12px;
    input:checked::after {
      display: block;
</style>