选择器（基础选择器+选择器的进阶+结构伪类选择器等）

你想要那颗糖

已于 2023-03-13 13:53:59 修改

阅读量2.9k

点赞数

分类专栏： HTML+CSS 文章标签： html css css3

于 2023-03-11 22:32:53 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129469582

版权

HTML+CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、标签选择器

1.结构：标签名 { css属性名：属性值； }，例如 div{color:red;}

2.作用：选择页面中对应的标签（找她），方便后续设置样式（改她）

3. 注意点：

（1）标签选择器选择的是一类标签，而不是单独某一个

（2）标签选择器无论嵌套关系有多深，都能找到对应的标签

二、类选择器

1.结构：.类名 { css属性名：属性值； }

2.作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

3.注意点：

（1）所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

（2）类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

（3）一个标签可以同时有多个类名，类名之间以空格隔开

（4）类名可以重复，一个类选择器可以同时选中多个标签

三、id选择器

1.结构：#id属性值 { css属性名：属性值； }

2.作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

3.注意点：

（1）所有标签上都有id属性

（2）id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

（3）一个标签上只能有一个id属性值

（4）一个id选择器只能选中一个标签

四、通配符选择器

1.结构：* { css属性名：属性值； }

2.作用：找到页面中所有的标签，设置样式

3.注意点：

（1）开发中使用极少，只会在极特殊情况下才会用到

（2）在基础班小页面中可能会用于去除标签默认的margin和padding

补充：类与id的区别

1.class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

2.类选择器以 . 开头；id选择器以 # 开头

3.id一般配合js使用，除非特殊情况，否则不要使用id设置样式

4.实际开发过程中类选择器用的最多。

5.实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

五、后代选择器

1. 选择器语法： 选择器1 选择器2 { css }；例如 .box a{color:red;}

2.作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

3. 效果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

4.注意点：后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过空格隔开

六、子代选择器

1. 选择器语法： 选择器1 > 选择器2 { css }；例如 .box>strong{color:pink;}

2.作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

3.效果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

4.注意点：子代只包括：儿子；子代选择器中，选择器与选择器之前通过 > 隔开

七、并集选择器

1. 选择器语法： 选择器1 ，选择器2 { css }

2.作用：同时选择多组标签，设置相同的样式

3.效果：找到选择器1 和选择器2 选中的标签，设置样式

4. 注意点：

（1）并集选择器中的每组选择器之间通过 , 分隔

（2）并集选择器中的每组选择器可以是基础选择器或者复合选择器

（3）并集选择器中的每组选择器通常一行写一个，提高代码的可读性

八、交集选择器

1.选择器语法：选择器1选择器2 { css }

2.作用：选中页面中同时满足多个选择器的标签

3. 结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

4. 注意点：

（1）交集选择器中的选择器之间是紧挨着的，没有东西分隔

（2）交集选择器中如果有标签选择器，标签选择器必须写在最前面

九、hover伪类选择器

1.选择器语法：选择器:hover { css }

2.作用：选中鼠标悬停在元素上的状态，设置样式

4. 注意点：伪类选择器选中的元素的 某种状态

十、结构为类选择器

1.原理：能够使用结构伪类选择器在HTML中定位元素

2.作用：根据元素在HTML中的结构关系查找元素( 根据html结构选择标签 )

3.优势：减少对于HTML中类的依赖，有利于保持代码整洁( 选择方便,省去了很多类名 )

4.场景：常用于查找某父级选择器中的子元素

5.伪类选择器权重为 0010(类选择器)

6.案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类基本使用</title>
  <style>
    /* 1.选择奇数项的标签 */
    ul li:nth-child(odd){
      background-color: hotpink;
    }
    /* 1.选择偶数项的标签 */
    ul li:nth-child(even){
      background-color: pink;
    }
    /* 3.选择偶数 */
    ul li:nth-child(2n){
      background-color: blue;
    }
    /* 4.选择奇数 */
    ul li:nth-child(2n+1){
      background-color: skyblue;
    }
    /* 5.选择倍数标签 */
    ul li:nth-child(5n){
      background-color: green;
    }
    /* 6.从第五个开始一直到最后 */
    ul li:nth-child(n+5){
      background-color: red;
    }
    /* 7.选择前五个 */
    ul li:nth-child(-n+5){
      background-color: orange;
    }


  </style>
</head>
<body>
  <ul>
    <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标签</li>
  </ul>
  
</body>
</html>

2.结构伪类选择器易错点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类易错点</title>
  <style>
    /* 怎样选中第一个li标签? */
    ul li:first-child a{
      background-color: pink;
    }

    /* 怎样选中第二个li标签? */
    ul li:nth-child(2) a {
      color: aqua;
    }

    /* 怎么选中倒数第三个标签？ */
    ul li:nth-last-child(3) a{
      background-color: blue;
    }
  </style>
</head>

<body>
  <!-- ul>li*10>a{我是第$个a标签} -->
  <ul>
    <li><a href="#">我是第1个a标签</a></li>
    <li><a href="#">我是第2个a标签</a></li>
    <li><a href="#">我是第3个a标签</a></li>
    <li><a href="#">我是第4个a标签</a></li>
    <li><a href="#">我是第5个a标签</a></li>
  </ul>
</body>

</html>

十一、链接伪类选择器

link 设置a对象在未被访问前的样式表属性。IE3将:link伪类的样式表属性作用于visited伪类。

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链接伪类选择器</title>
    <style>
      a{
        text-decoration: none;
      }
      /* 1.未访问的状态 */
      a:link{
        color: red;
      }
      /* 2.被访问过的状态 */
      a:visited{
        color: green;
      }
      /* 3.鼠标悬停状态 */
      a:hover{
        color: orange;
        font-weight: 700;
      }
      /* 4.鼠标点击不放开的状态 */
      a:active{
        color: purple;
      }
    </style>
  </head>
  <body>
    <a href="#">链接伪类选择器的使用</a>
  </body>
</html>

十二、焦点伪类选择器

焦点伪类选择器用于选中元素获取焦点时状态，常用于表单控件

E:focus{css属性}（E表示元素、标签）

代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>焦点伪类选择器</title>
    <style>
      /* 用于选中元素获取焦点时状态，常用于表单控件
        E:focus{css属性} 
        E表示元素(标签)
     */
     /* 1.单选框被选中的状态 */
     input:focus{
      width: 200px;
      height: 100px;
      background-color: pink;
     }


     /* 2.复选框被选中的状态 */
     input:checked{
      width: 40px;
      height: 40px;
     }

    </style>
  </head>
  <body>
    <input type="text" name="" id="">
    <hr>
    <input type="checkbox">睡觉
    <input type="checkbox">打游戏
    <input type="checkbox">看剧
  </body>
</html>

十三、属性选择器

属性选择器使用的[] 经验用于input标签,它是html标签的属性来选择元素

E[attr]{css属性}

E[attr="val"]{css属性}

attr表示属性的意思

val表示属性值的意思

伪类,类,属性选择器权重都是0010

代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性选择器</title>
    <style>
      /* 
        属性选择器使用的[]  经验用于input标签,它是html标签的属性来选择元素
          E[attr]{css属性}
          E[attr="val"]{css属性}
          attr表示属性的意思
          val表示属性值的意思
          伪类,类,属性选择器权重都是0010
    */

    /* 1.选择input标签具有Type属性才能被选中 */
    input[type] {
      background-color: pink;
    }

    /* 2.选择input标签具有Type属性并且属性值为password才能被选中 */
    input[type="password"]{
      background-color: aqua;
    }

    </style>
  </head>

  <body>
    <input type="text">
    <input type="password" name="" id="">
  </body>
</html>

效果展示：