css3 简化继承名 |css让边框不占据

一种让CSS代码更简洁清晰的方式就是简化继承名。在以往的版本中，大家可能需要这样写：

body div.container section.main h1 {
font-size: 3rem;
font-weight: bold;
color: #333;
}

现在，大家可以使用CSS3提供的后代选择器，将这个样式简化为：

body .container main h1 {
font-size: 3rem;
font-weight: bold;
color: #333;
}

这里用到了一个后代选择器，它可以帮助大家省略掉每一级继承名。同时，大家也可以使用子选择器“>”来进一步简化：

body >.container >main >h1 {
font-size: 3rem;
font-weight: bold;
color: #333;
}

这个样式只会作用于main元素的直接子元素h1，避免了不必要的选择器匹配。

除了后代选择器和子选择器，CSS3还引入了其他一些选择器，如属性选择器、伪类选择器、伪元素选择器等，让大家能够更轻松地取得所需元素，并对其进行样式设置。

总的来说，CSS3的选择器提高了大家的样式控制能力，而简化继承名的做法则让大家的代码更加简洁清晰，值得大家在实际开发中使用。