Css的分组和嵌套

作者: 北雁南飞_8854 | 来源:发表于2021-11-28 23:33 被阅读0次

CSS 分组和嵌套
Css的分组和嵌套
【第65天】css基础汇总
css学习第三天
3.Sass 嵌套规则与属性
MySQL分组数据
前端知识归纳（3）-- HTML/CSS（part4 Sass）
@Validated分组验证和嵌套验证
Android.轻松地将嵌套的数据展示在ListView和Rec
scss 笔记

分组选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>

h1,h2,p, .content
{
    color:red;
}
.content {
    font-size: 20px;
    background-color:gray;
    text-decoration:underline;
}

</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
<div class="content">这是自定义的style</div>
</body>
</html>

输出结果：

html结果

嵌套选择器
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

举个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p {
    color:blue;
    text-align:center;
}
.marked .content {
    font-size: 30px;
    background-color: black
}
    
.marked {
    background-color:red;
}

.content {
    color: yellow;
    background-color: gray
}

.marked p {
    color:white;
}
    
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
    <p>这个段落不是蓝色文本。</p>
    <div class="content">这是marked的content</div>
</div>
<div class="content">设置独立的conent的文字 </div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
    
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

输出：

html输出2