css语法中的选择器与属性详解：嵌套声明、集体声明、全局声明、混合选择器

网小鱼的学习笔记2025-06-20 12:42

嵌套声明

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套声明</title>
<!--        这里p span 的含义是p标签下面的span标签 所以有嵌套关系-->
    <style>
        p span {
            font-weight: bold;
            color: burlywood;
        }
    </style>
</head>

<body>
    <p><span>天使投资</span>是投资的一种方式</p>
</body>
</html>

执行结果

集体声明

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>集体声明</title>

<!--    语法上是多个标签通过逗号分割-->
    <style>
        p,h1 {
            font-weight: bold;
            color: burlywood;
        }
    </style>
</head>

<body>
    <h1></h1>
    <p>欢迎访问论坛</p>
</body>
</html>

全局声明

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局声明</title>

<!--    含义是对全局进行统一申明-->
    <style>
        * {
            font-weight: bold;
            color: burlywood;
        }
    </style>
</head>

<body>
    <h1>欢迎访问论坛</h1>
    <h2>欢迎访问论坛</h2>
    <p>欢迎访问论坛</p>
</body>
</html>

执行结果

混合选择器

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
<!--    类名属性是用.控制-->
    <style>
      .font {
        font-size: 18px;
      }
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .bgcolor {
        background-color: burlywood;
      }
    </style>
</head>
<body>
<!--    混合选择器主要使用类名来实现-->
    <p class = "font red right">这里的文字，18px红色，右对齐</p>
    <div class="font blue center">这里的文字，18px蓝色，居中对齐</div>
    <div class="font blue center bgcolor">这里的文字，18px蓝色，居中对齐，有背景色</div>
</body>
</html>

执行结果