CSS选择器全解（超详细）

选择器

标签选择器

  标签选择器：
  使用标签名作为选择器 → 选中同名标签设置相同的样式 
  特点：选中同名标签设置相同的样式，无法差异化同名标签的样式
  p {
      color: red;
    }

类选择器

    步骤：
    定义类选择器 → .类名
    使用类选择器 → 标签添加 class="类名"
    
    注意：
    类名自定义，不要用纯数字或中文，尽量用英文命名
    一个类选择器可以供多个标签使用
    一个标签可以使用多个类名，类名之间用空格隔开
    开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。
    /* 定义 */
    .red {
      color: red;
    }

    .size {
      font-size: 50px;
    }

  <!-- 使用 -->
  <!-- 一个类选择器可以给多个标签使用 -->
  <p class="red">111111</p>
  <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
  <div class="red size">div 标签</div>

id选择器

    id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
    规则：同一个 id 选择器在一个页面只能使用一次
    
    步骤：
    定义 id 选择器 → #id名
    使用 id 选择器 → 标签添加 id= "id名"
    /* 定义 */
    #red {
      color: red;
    }

  <!-- 使用 -->
  <div id="red">div 标签</div>

通配符选择器

    作用：查找页面所有标签，设置相同样式。
    通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
    经验：通配符选择器可以用于清除标签的默认样式
    例如：标签默认的外边距、内边距    
    /*定义*/
    * {
      color: red;
    }

复合选择器

后代选择器

    后代选择器
    后代选择器：选中某元素的后代元素
    选择器写法：父选择器  子选择器 { CSS 属性}，父子选择器之间用空格隔开
	div 里面的 span 文字颜色是红色
	后代选择器，选中所有后代，包含儿子、孙子、重孙子... 
	/* 定义 */
    div span {
      color: red;
    }

  <span>span 标签</span>
  <div>
    <span>这是div 的儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>

子代选择器

    子代选择器
    子代选择器：选中某元素的子代元素（最近的子级）
    选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开

    /* div 的儿子 span 文字颜色是红色，孙子不是红色 */
    div > span {
      color: red;
    }

  <div>
    <span>儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>

并集选择器

    并集选择器
    并集选择器：选中多组标签设置相同的样式。
    选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开
    
    /* div、p、span 文字颜色是红色 */
    div,
    p,
    span {
      color: red;
    }

  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>

交集选择器

    交集选择器 
    交集选择器：选中同时满足多个条件的元素。
    选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号
    如果交集选择器中有标签选择器，标签选择器必须书写在最前面
    /* 第一个 p 标签文字颜色是红色 */
    /* 既又的关系：既是 p 标签，又是有 box 类 */
    p.box {
      color: red;
    }

  <p class="box">p 标签，使用了类选择器 box</p>
  <p>p 标签</p>
  <div class="box">div 标签，使用了类选择器</div>

伪类选择器

    伪类选择器 
    伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
    鼠标悬停状态：选择器:hover { CSS 属性 }
    
    /* 任何标签都可以设置鼠标悬停的状态 */
    a:hover {
      color: red;
    }

    /* div:hover */
    .box:hover {
      color: green;
    }

  <a href="#">a 标签，超链接</a>
  <div class="box">div 标签</div>

超链接伪类

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

    提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写 
    经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

    /* a:link {
      color: red;
    }

    a:visited {
      color: green;
    }

    a:hover {
      color: blue;
    }

    a:active {
      color: orange;
    } */
    /* 工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置 */
    a {
      color: red;
    }

    a:hover {
      color: green;
    }

结构伪类选择器

根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N值为1）

    第一个
    li:first-child {
      background-color: green;
    } 

    最后一个
    li:last-child {
      background-color: green;
    } 

    任意个
    li:nth-child(3) {
      background-color: green;
    } 

  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
  </ul>

:nth-child(公式）

公式中的n取值从 0 开始

功能	公式
偶数标签	2n
奇数标签	2n+1;2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5
找到第5个以前的标签	-n+5

    偶数
    li:nth-child(2n) {
      background-color: green;
    }

    奇数
    li:nth-child(2n+1) {
      background-color: green;
    }

    倍数
    li:nth-child(5n) {
      background-color: green;
    } 

    n 从0开始 
    第5个以后的标签 
    li:nth-child(n+5) {
      background-color: green;
    } 

    第5个以前的标签
    li:nth-child(-n+5) {
      background-color: green;
    }

  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
    <li>li 9</li>
    <li>li 10</li>
  </ul>

伪元素选择器

  创建虚拟元素（伪元素），用来摆放装饰性的内容
  注意点：
  必须设置 content: ""属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
  伪元素默认是行内显示模式
  权重和标签选择器相同
  <style>
    div::before{
      content: "老鼠";
    }
    div::after{
      content: "大米";
    }

  <!-- 标签内容：老鼠爱大米 -->
  <div>爱</div>