当前位置：首页 > news >正文

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

news 2025/6/20 15:56:38

嵌套声明

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

执行结果
在这里插入图片描述

集体声明

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

全局声明

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

执行结果
在这里插入图片描述

混合选择器

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