CSS基本选择器：标签、类、id_类标签和id标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56238352/article/details/126820500

本文通过示例介绍了CSS中标签选择器和类选择器的使用，展示了如何统一页面元素外观，调整优先级，以及类选择器的复合使用。内容包括：1) 标签选择器用于设置所有a标签和p标签的默认样式；2) 类选择器应用于特定a标签、p标签、input和div，实现红色显示；3) 类选择器的复合使用，如`.tom`、`.jerry`和`.dog`结合，创建蓝色并带有上划线的元素。文章旨在帮助读者更好地理解和应用CSS选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、标签选择器：统一页面元素的外观

需求：让所有的a标签和所有的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>
        /* 基本选择器之标签选择器 :统一页面元素的默认外观*/
        a {
            color: red;
        }

        p {
            text-decoration: underline;
        }
    </style>
</head>

<body>
 <!-- ul>li*11>a{链接$} -->
    <ul>
        <li><a href="">链接1</a></li>
        <li><a href="">链接2</a></li>
        <li><a href="">链接3</a></li>
        <li><a href="">链接4</a></li>
        <li><a href="">链接5</a></li>
        <li><a href="">链接6</a></li>
        <li><a href="">链接7</a></li>
        <li><a href="">链接8</a></li>
        <li><a href="">链接9</a></li>
        <li><a href="">链接10</a></li>
        <li><a href="">链接11</a></li>
    </ul>

    <!-- p*10{123} -->
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</body>

</html>

1.1、突破优先级

<!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>
        h1 {
            /* !important 突破优先级 */
            color: blue!important;
        }

        .tom {
            color: red!important;
        }

        #jerry {
            color: green;
        }
    </style>
</head>

<body>
    <h1 class="tom" id="jerry">WEB Design</h1>

    <!-- 声明范围越小 权重值越高 -->

    <!-- 
       !important>id>class>标签选择器>*
        无穷>100>10>1 >0
-->
</body>

</html>

1.3、就近原则

<!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>
        .tom{
            color: aqua;
        }

        .tom{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 相同属性下 就近显示 如果想突破 用！important -->
    <h1 class="tom">12345</h1>
</body>
</html>

2、类选择器：

需求：让指定的a标签2、4、6，p，input，div显示为红色

<!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>
        /* 类选择器：使用频率最高 */
        .tom{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="" class="tom">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="" class="tom">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="" class="tom">6</a></li>
        <li><a href="">7</a></li>
        <li><a href="">8</a></li>
        <li><a href="">9</a></li>
        <li><a href="">10</a></li>
    </ul>

    <p class="tom">ppp</p>
    <input type="text" value="输入内容" class="tom">
    <div class="tom">mydiv</div>

</body>
</html>

3、类选择器的复合使用

6789既是蓝色又有上划线

<!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>
        .tom {
            color: aqua;
        }

        .jerry {
            font-size: 80px;
        }

        .dog {
            text-decoration: overline;
        }
    </style>
</head>

<body>
    <h1 class="tom jerry">12345</h1>
    <h2 class="dog tom">6789</h2>
</body>

</html>