Css_分组嵌套&是否可见_嵌套加分组校验-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37510446/article/details/89946715

在编写页面的时候，会出现多个元素的属性设置一致，为了保证代码的质量，我们可以将这些代码组合起来，这样可以节省代码量，便于管理：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
h1,h2,p{
color:green;
text-decoration:underline;
indent:20px;
}
</style>
</head>
<body>
<h1>设置为绿色字体且使用underline修饰，首行20px</h1>
<h2>设置为绿色字体且使用underline修饰，首行20px</h2>
<p>设置为绿色字体且使用underline修饰，首行20px</p>
</body>
</html>

嵌套，也就是多个不同的设置，可以在一个元素上显示出来，即，同一class属性，你可以设置自己的属性,公共属性，即.class属性的，可以继承

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
h1.cc{
color:green;
text-decoration:underline;
text-indent:20px;}
.cc{
background-color:yellow;
}
p.cc{
border:20px solid #a1a1a1;
}
</style>
</head>
<body>
<h1 class="cc">设置为绿色字体且使用underline修饰，首行20px</h1>
<h2 class="cc">设置背景为黄色</h2>
<p class="cc">设置边框</p>
</body>
</html>

使元素是否可见，主要有两个属性，visibility:hidden和display:none，但是这两种是有很大的区别，一个是不可见，但是会占用空间，影响布局，display是不可见，但是不占用空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
visibility:hidden;
}
#c1{
display:none;
}
</style>
</head>
<body>
<p>此元素可见</p>
<p id="cc">此元素设置为visibility不可见</p>
<p>此元素可见</p>
<p id="c1">此元素设置为display不显示,不占用空间</p>
<p>此元素可见</p>
</body>
</html>