CSS 选择器用于选择不具有特定类/属性/类型的元素

cssweb developmentfront end technology更新于 2024/8/27 14:36:17

使用 CSS :not() 伪类，我们可以通过选择那些没有特定值或与选择器不匹配的元素来优化样式。

示例

以下示例说明了 CSS :not 伪类。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: cornflowerblue;
   color: white;
}
p:not(div>p) {
   background-color: khaki;
   font-size: 1.4em;
   font-style: italic;
   color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   background-color: cadetblue;
   padding: 10%;
   height: 80px;
}
div:not(.parent) {
   box-shadow: inset 0 0 24px tomato;
   padding: 2%;
}
.parent{
   border: 4px ridge orange;
}
.one {
   background-color: lightgreen;
   border: 4px groove gray;
}
.two{
   height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html>