常用的css选择器

五彩斑斓黑123

已于 2023-04-10 11:07:45 修改

阅读量1.6k

点赞数 5

分类专栏： css 技术小白文章标签： css html 前端

于 2023-03-31 12:27:42 首次发布

本文链接：https://blog.csdn.net/qq_69444691/article/details/129873058

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

技术小白

5 篇文章 0 订阅

订阅专栏

5.1 直接子类选择器 element>element

5.2 后代子类选择器 element element

6.兄弟选择器 --- element + element1

7.属性选择器（要用[]）

8.结构伪类选择器

8.1 nth-child(n) 选择某个父元素的一个或多个特定的子元素

8.2.nth-of-type

9.伪元素选择器

10.各种选择器的权重

1. 类名选择器--- .class

根据元素的class名选择（class名不唯一）

<style>
    .box {
      width: 50%;
      background-color: pink;
    }
  </style>
  <body>
    <div class="box">类名选择器</div>
  </body>

2. id选择器 --- #id

根据元素id选择（id唯一，不重复）

 <style>
    /* id选择器 */
    #test {
      width: 50%;
      background-color: lightgreen;
    }
  </style>
  <body>
    <div id="test">id选择器</div>
  </body>

3.通配符 --- *

选择所有元素

   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

4.标签选择器

通过标签类型选择元素

<span>标签选择</span>

 span {
      display: block;
      width: 50%;
      height: 30px;
      background-color: lightblue;
    }

5.后代选择器

5.1 直接子类选择器 element>element

例：.father>p选择为父级类名为father的p标签

.father>p{
      background-color: lightcoral;
    }

5.2 后代子类选择器 element element

例：.father span 选择类名为father的元素的所有后代span元素

.father span {
      display: block;
      width: 100%;
      background-color: lightsalmon;
    }

6.兄弟选择器 --- element + element1

选择紧跟着element元素后面的element1

.father + .f_b {
      background-color: rgb(33, 177, 153);
    }

以上所有选择器代码如下：

<!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>Document</title>
  </head>
  <style>
    /* 通配符 */
    * {
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
    }
    /* 类名选择器 */
    .box {
      width: 50%;
      background-color: pink;
    }
    /* id选择器 */
    #test {
      width: 50%;
      background-color: lightgreen;
    }
    /* 标签选择 */
    span {
      display: block;
      width: 50%;
      height: 30px;
      background-color: lightblue;
    }
    .father {
      width: 50%;
      /* background-color: rgb(114, 162, 245); */
    }
    /* 后代选择器 */
    .father > p {
      background-color: lightcoral;
    }
    .father span {
      display: block;
      width: 100%;
      background-color: lightsalmon;
    }
    .f_b {
      width: 50%;
    }
    .father + .f_b {
      background-color: rgb(33, 177, 153);
    }
  </style>
  <body>
    <div class="box">类名选择器</div>
    <div id="test">id选择器</div>
    <span>标签选择</span>
    <div class="father">
      <p>子</p>
      <span>father的儿子</span>
      <div>
        <p>直接子类选择器找不到我</p>
        <span>father的孙子</span>
      </div>
    </div>
    <div class="f_b">father的兄弟标签</div>
    <div class="f_b">通过 .father+f_b找不到我</div>
  </body>
</html>

效果：

7.属性选择器（要用[]）

E[att]——选择具有att属性的元素E
E[att="val:]—— 选择具有att属性且属性值等于val的E元素
E[att^="val:]—— 选择具有att属性且属性值以val开头的E元素
E[att$="val:]—— 选择具有att属性且属性值以val结尾的E元素
E[att*="val:]—— 选择具有att属性且属性值中含有val的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>Document</title>
  </head>
  <style>
    /* 1.选择具有value属性的元素input */
    input[value] {
      color: red;
    }
    /* 2.选择具有value属性且属性值等于李四的input元素 */
    input[value='李四'] {
      color: skyblue;
    }
    /* 3.选择具有value属性且属性值以 王 开头的input元素 */
    input[value^='王'] {
      color: rgb(16, 242, 219);
    }
    /* 4.选择具有value属性且属性值以 子 解为的input元素 */
    input[value$='子'] {
      color: rgb(242, 16, 174);
    }
    /* 5.选择具有value属性且属性值中含有678的input元素 */
    input[value*='678'] {
      color: rgb(35, 242, 16);
    }
  </style>
  <body>
    <input type="text" value="张三123" /><br />
    <input type="text" value="李四" /><br />
    <input type="text" value="王五" /><br />
    <input type="text" value="麻子" /><br />
    <input type="text" value="刘备678" /><br />
    <input type="text" value="关羽678" /><br />
    <input type="text" value="张飞678" /><br />
  </body>
</html>

效果展示：

8.结构伪类选择器

8.1 nth-child(n) 选择某个父元素的一个或多个特定的子元素

n可以是数字，也可以是公式
如果n是数字，就是选择第n个子元素，数字从1开始
n可以是关键字，even：偶数，odd：奇数
n也可以是公式，常见公式如下：

公式	取值
2n	偶数
2n+1	奇数
5n	5,10,15……
n+5	从第五个开始到最后，包含第五个

代码演示：

<!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>Document</title>
  </head>
  <style>
    li {
      list-style: none;
    }
    /* 1.n为数字 */
    ul li:nth-child(1) {
      color: aqua;
    }
    /* 2. n 为关键字 */
    ul li:nth-child(even) {
      color: rgb(15, 237, 59);
    }
    ul li:nth-child(odd) {
      color: rgb(191, 18, 96);
    }
    /* 3. n 为公式 */
    ul li:nth-child(5n) {
      background-color: lightcoral;
    }
  </style>
  <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>

效果展示：

8.2.nth-of-type

用法和 nth-child() 类似

nth-child 和 nth-of-type 的区别：

nth-child 对父元素里面所有孩子排序选择（序号固定）先找到第n个孩子，然后看是否和对应元素匹配
nth-of-type 对父元素里面指定的子元素进行排序选择，先去匹配对应元素，然后根据对应元素找到第n个孩子

9.伪元素选择器

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

代码演示：

<!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>Document</title>
  </head>
  <style>
    .p1::before {
      content: '添加的';
      color: red;
    }
    .p2::after {
      content: '添加的';
      color: red;
    }
  </style>
  <body>
    <p class="p1">在我前面加内容</p>
    <p class="p2">在我后面加内容</p>
  </body>
</html>

效果展示：