css高阶-高级选择器

随着前端技术的发展，越来越多的样式需要呈现，但是也产生了许多的问题，因此css技术也在不断发展。这篇文档将记录现代多种CSS技术。

通用选择器

对页面内所有元素生效，如果希望为页面中所有元素设置特定的边距，就需要像下面这样：

*{
    margin:1.5rem;
}

它给每个元素一个1.5rem的边距。

属性选择器

用于那些具有相似属性但是类名不同的元素。

div[class^="component_"]{
    border:2px soild blue;
}

这个属性选择器可以为 component_label 和 component_title 等的类似元素加上上面的属性。

tip

在这种网页快速生成器中，代码编译时会将部分的css样式加上乱码尾码。因此无法精确确定样式属性，使用上面的代码可以解决这一问题。

子组合选择器

如果修改导航栏中导航的样式，但是正如上面所说的在网页快速生成的情况下，这些导航是动态生成的，具有不确定的类名，那么就可以使用子组合选择器。

.nav > ul > li > a {
    font-weight:bold;
}

伪类

为了实现不同颜色的表格交替，可以使用伪类。
下面的代码将为奇数行添加绿色的背景颜色。

tbody tr:nth-child(odd){
    background-color:green;
}

除了还可以使用 odd 奇数参数以外，还可以使用 even 和 n+1 或者 n+3 的属性定位到不同的行。