CSS03：选择器-CSDN博客

本文链接：https://blog.csdn.net/m0_62820255/article/details/130295011

文章介绍了CSS中的各种选择器，包括全局选择器（*），元素选择器（如p），类选择器（.class）和ID选择器（#id）。强调了选择器的用途，如初始化样式，以及它们的优先级，ID选择器优先级最高，行内样式优先级最高。同时提到了合并选择器用于减少重复代码。

摘要由CSDN通过智能技术生成

全局选择器

可以与任何元素匹配，优先级最低，一般用来做初始化。

代码：

<!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>

    <style>

        *{
            font-size: 30px;
            color: greenyellow;
        }

    </style>
</head>
<body>

    <p>hello</p>
    <h3>world</h3>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

</body>
</html>

元素选择器

举例：

p{

font-size: 50px;

color: blue;

}

代码:

<!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>

    <style>

        *{
            font-size: 30px;
            color: greenyellow;
        }

        <!--选择元素p-->  
        p{
            font-size: 50px;
            color: blue;
        }

    </style>
</head>
<body>

    <p>hello</p>
    <h3>world</h3>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

</body>
</html>

再比如说，我想让“hello”中的“ell”变成另一种颜色，可用<span>标签把“ell”围起来，然后给<span>一个标签选择器。

<!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>

    <style>

        *{
            font-size: 30px;
            color: greenyellow;
        }

        p{
            font-size: 50px;
            color: blue;
        }

        span{
            font-size: 50px;
            color: brown;
        }

    </style>
</head>
<body>

    <p>h<span>ell</span>o</p>
    <h3>world</h3>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

</body>
</html>

提示

① 所有的标签都可以是选择器。

② 无论这个标签被藏得有多深都一定能够选上。

③ 选择的是所有，而不是一个。

类选择器

规定用圆点“.”来定义，针对你想要的所有标签使用。

优点：灵活

例如：想让无序列表中A换个颜色。

<!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>

    <style>

      <!--定义选择器类型-->
      .one-class{
        color: lightcoral;
      } 

    </style>
</head>
<body>

    <p>h<span>ell</span>o</p>
    <h3>world</h3>
    <ul>
        <li class="one-class">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

</body>
</html>

class属性的特点：

① 类选择器可以被多种标签使用

② 类名不能以数字开头

③ 同一个标签可以使用多个选择器，用空格隔开

ID选择器

针对某一个特定的标签使用，只能使用一次。用#定义。

特别强调

①ID是唯一的

②ID不能以数字开头

<!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>

    <style>

      #text1{
        color: red;
        font-size: 30px;
      }
      #text2{
        color: red;
        font-size: 30px;
      }

      .t1{
        color: green;
        font-size: 50px;
      }

    </style>
</head>
<body>

  <!--ID名字只能使用一次，不可重复-->
    <p id="text1">hello1</p>
    <p id="text2">hello2</p>

    <!--class可重复-->
    <p class="t1">hello3</p>
    <p class="t1">hello4</p>


</body>
</html>

合并选择器

语法：选择器1,选择器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>Document</title>

    <style>
      /* h3{
        color: green;
        background-color: lightgoldenrodyellow;
      }
      p{
        color: green;
        background-color: lightgoldenrodyellow;
      } */

      /* 以上代码重复度高，可以用合并选择器 */

      h3,p{
        color: green;
        background-color: lightgoldenrodyellow;
      }

    </style>
</head>
<body>

    <h3>文本1</h3>
    <p>文本2</p>


</body>
</html>

<!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>

    <style>

      .t1,.t2{
        color: green;
        background-color: lightgoldenrodyellow;
      }

      #t1,#t2{
        color: blue;
        background-color: lightblue;
      }

    </style>
</head>
<body>

    <h3 class="t1">文本1</h3>
    <p class="t2">文本2</p>

    <h3 id="t1">文本1</h3>
    <p id="t2">文本2</p>


</body>
</html>