.content { color: #333; font-size: 16px; } .highlight { background-color: yellow; }
在这个例子中,大家定义了一个content
选择器和一个highlight
选择器,分别用于选取一个拥有指定样式的元素和一个拥有指定背景色的元素。在页面中使用class
属性给元素添加相应的类名即可应用对应的样式。
使用交集选择器时,大家可以将两个或多个选择器组合在一起来选取指定元素。例如:
.content.highlight { color: #fff; font-size: 18px; background-color: blue; }
这个选择器将选取一个拥有content
类和highlight
类的元素,并将其文字颜色设置为白色、字体大小设置为18像素、背景色设置为蓝色。
如果像下面这样定义一个选择器:
.content .highlight { color: #fff; font-size: 18px; background-color: blue; }
它将选取所有包含highlight
类的content
元素,但不会选取一个同时拥有两个类名highlight
和content
的元素。
使用交集选择器可以让大家更灵活地对页面元素进行样式设计,不同的选择器组合可以满足不同的要求。但是,过度使用交集选择器可能会导致样式复杂、选择器权重过大,从而影响页面性能。因此,在使用交集选择器时,大家需要谨慎考虑 selector 的数量和权重。