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>

执行结果

相关推荐
奋斗的小羊羊6 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿6 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡6 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友7 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光8 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_8 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~8 小时前
CSS @media 媒体查询
前端·css·媒体
shix .9 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug9 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴9 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript