css not first

一、引言

在Web开发中，CSS（层叠样式表）是一种常用的样式语言，用于控制网页的外观和布局。CSS的not属性（:not）是CSS选择器中的一种伪类，它可以用于选择不满足特定条件的元素。本文将详细介绍CSS的not属性的用法和示例。

二、CSS not属性的语法

CSS的not属性的语法如下所示：

:not(selector) {
    // CSS 属性
}

其中，selector表示一个CSS选择器，用于选择要排除的元素。:not选择器将选择不满足该选择器的元素，并将: not选择器应用于这些元素。

三、CSS not属性的用法

CSS的not属性可以用于选择除了特定元素之外的所有元素。它查找与给定选择器不匹配的元素，并将样式应用于这些元素。

下面是一些常见的使用场景：

1. 排除特定元素

使用:not选择器可以排除特定元素，并对其余元素应用样式。

p:not(.highlight) {
    color: blue;
}

上述代码将为所有不具有highlight类的段落元素设置蓝色颜色。例如，如果有以下HTML代码：

<p>这是一个段落。</p>
<p class="highlight">这是一个突出显示的段落。</p>
<p>这是另一个段落。</p>

则第一个和第三个段落将具有蓝色的文字颜色。

2. 排除多个元素

:not选择器也可以用于排除多个元素，并对其余元素应用样式。

:not(p, div) {
    background-color: yellow;
}

上述代码将为除段落和div元素之外的所有元素设置黄色的背景颜色。

3. 利用:not选择器与其他选择器组合

通过将:not选择器与其他选择器组合使用，可以更精确地选择要排除的元素。

:not(p.highlight) {
    color: red;
}

上述代码将为不具有highlight类的段落元素设置红色的文字颜色。

4. 利用:not选择器与其他伪类组合

还可以将:not选择器与其他伪类组合使用。

input:not([type="submit"]) {
    background-color: lightgray;
}

上述代码将为所有类型不为submit的输入框设置浅灰色的背景颜色。

四、CSS not属性的示例代码

下面通过一些示例代码进一步演示CSS的not属性的用法：

示例1：排除特定元素

<!DOCTYPE html>
<html>
<head>
<style>
p:not(.highlight) {
    color: blue;
}
</style>
</head>
<body>

<p>这是一个段落。</p>
<p class="highlight">这是一个突出显示的段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

运行结果：第一个和第三个段落具有蓝色的文字颜色。

示例2：排除多个元素

<!DOCTYPE html>
<html>
<head>
<style>
:not(p, div) {
    background-color: yellow;
}
</style>
</head>
<body>

<h1>标题一</h1>
<p>这是一个段落。</p>
<div>这是一个div元素。</div>
<p>这是另一个段落。</p>

</body>
</html>

运行结果：标题一具有默认的背景颜色，而其他元素具有黄色的背景颜色。

示例3：组合选择器

<!DOCTYPE html>
<html>
<head>
<style>
:not(p.highlight) {
    color: red;
}
</style>
</head>
<body>

<p>这是一个段落。</p>
<p class="highlight">这是一个突出显示的段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

运行结果：第一个和第三个段落具有红色的文字颜色。

示例4：组合伪类

<!DOCTYPE html>
<html>
<head>
<style>
input:not([type="submit"]) {
    background-color: lightgray;
}
</style>
</head>
<body>

<input type="text" placeholder="用户名"><br>
<input type="password" placeholder="密码"><br>
<input type="submit" value="登录">

</body>
</html>