选择器：按照一定的规则选出符合条件的元素，为之添加CSS样式。

通配符选择器

选中所有的元素

一般用来给所有元素作一些通用性的设置

  1.  *{
  2.          margin:0;
  3.          padding:0;
  4.   }

元素选择器

元素选择器（type selectors）, 使用元素的名称;

可以选中对应的所有元素

id选择器

id选择器 (#id名);

具有唯一性，id名不能重复。

类选择器

类选择器 (.类名);

可以给多个元素设置同样的类名

后代选择器

后代选择器一: 选中所有的后代

语法：选择器之间以空格分割;

   <div class="box">
    <span>11111</span>
    <div>
      <p>我是p元素</p>
      <span>22222</span>
    </div>
   </div>

      .box span {
      color: red;
    }

04.选择器 - 图1

💎 后代选择器二: 选中下一级的后代

选择器之间以 > 分割;

   <div class="box">
    <span>11111</span>
    <div>
      <p>我是p元素</p>
      <span>22222</span>
    </div>
   </div>

        .box > span {
     color: blue;
    }

04.选择器 - 图2

选择器组

  • 交集选择器: 需要同时符合两个选择器条件;

    • 在开发中通常为了精准的选择某一个元素;
       <body>
   <div class="box">11111</div>
   <div>222222</div>
   <p class="box">33333</p>
 </body>

      div.box{
        color: red;
      }


04.选择器 - 图3

  • 并集选择器:给多个元素设置相同的样式;

  • 两个选择器以上 , 隔开

伪类选择器

选择处于特定状态的元素

:link、:visited、:hover、:active、:focus；

应用举例

  • a:link 未访问的链接（只用于a元素）；
  • a:visited 已访问的链接（只用于a元素）；
  • a:hover 鼠标挪动到链接上；
  • a:active 激活的链接（鼠标在链接上长按住未松开）

使用注意

  • :hover必须放在:link和:visited后面才能完全生效；
  • :active必须放在:hover后面才能完全生效；
  • 建议编写顺序 :link、:visited、:hover、:active；

除了a元素， :hover、:active也能用在其他元素上

:focus

表示获得焦点的元素（如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发，:focus也适用于a元素。

编写顺序建议 :link、:visited、:focus、:hover、:active

结构伪类选择器

:nth-child(1)

  • 是父元素中的第1个子元素

:nth-child(2n + 1) :nth-child(odd)

  • 父元素中的第奇数个子元素

:nth-child(2n) :nth-child(even)

  • 父元素中的第偶数个子元素

:nth-child(-n + 2)

  • 代表前2个子元素

:nth-of-type()和:nth-child()的区别

用法相似似，不同点是:nth-of-type()计数时只计算同种类型的元素

其他伪类

  • :first-child，等同于:nth-child(1)

  • :last-child，等同于:nth-last-child(1)

  • :first-of-type，等同于:nth-of-type(1)

  • :last-of-type，等同于:nth-last-of-type(1)

  • :root，根元素，就是HTML元素

  • :empty 代表里面完全空白的元素

伪元素

常用的伪元素：::before ::after

::before和::after用来在一个元素的:内容之前或之后插入其他内容可以是文字、图片) 常通过content 属性为一个元素添加修饰性的内容。来

伪元素默认为 inine-block level element

选择器权重

  • !important：10000

  • 内联样式：1000

  • id选择器：100

  • 类选择器、伪类选择器、属性选择器：10

  • 元素选择器、伪元素：1

  • 通配符：0

h1+p::after 权重：1+1+1=3 （元素选择器+元素选择器+伪元素）