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

嵌套声明

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>

执行结果

相关推荐
cos4 分钟前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
饺子不放糖6 分钟前
CSS的float布局,让我怀疑人生
前端
阳光是sunny23 分钟前
走进AI(1):细说RAG、MCP、Agent、Function Call
前端·ai编程
剪刀石头布啊32 分钟前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊33 分钟前
js常见的单例
前端·javascript
剪刀石头布啊34 分钟前
数据口径
前端·后端·程序员
剪刀石头布啊38 分钟前
http状态码大全
前端·后端·程序员
剪刀石头布啊40 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
宇之广曜1 小时前
搭建 Mock 服务,实现前端自调
前端·mock
yuko09311 小时前
【手机验证码】+86垂直居中的有趣问题
前端