[分享]css兄弟选择器not

CSS中的兄弟选择器not是一种非常有用的选择器。not选择器可以帮助我们筛选出不符合条件的元素，以便对剩下的元素应用某些样式。.example:not(:firstchild) { color: r...

CSS中的兄弟选择器not是一种非常有用的选择器。not选择器可以帮助我们筛选出不符合条件的元素，以便对剩下的元素应用某些样式。

.example:not(:first-child) {
   color: red;
} 

在上面的代码中，我们使用not选择器选择了除了第一个子元素以外的所有元素。这些元素都会应用红色的颜色。这种选择器在处理列表或表格时非常有用。

除了使用在选择子元素时，not选择器也可以用于标识某些元素。例如：

p:not(.example) {
   font-weight: bold;
} 

上面的代码将所有p元素中没有example类的元素加粗。这也可以通过组合选择器和其他CSS属性和值来实现。

需要注意的是，not选择器只能选择单个元素，而不能选择多个元素。

不过，可以使用逗号分隔符将not选择器与其他选择器组合，以选择多个元素。例如：

div:not(.example, .container) {
   background-color: yellow;
} 

上面的代码将所有div元素中既没有example类也没有container类的元素着上黄色背景色。