CSS Not Selector

2025年2月26日 | 阅读 7 分钟

CSS not 选择器是 CSS 的伪类元素，它不引用给定的元素。如果我们想对特定标签设置一些样式，CSS 会使用简单的类、ID 或元素名称。如果我们不想对某个属性设置样式，CSS then not 选择器会用于样式标签。

CSS Not 选择器的方法

CSS not 选择器用于带有元素、ID 和属性类的样式标签。以下方法操作 CSS not 选择器。

仅使用属性
使用属性和元素

仅使用属性

CSS not 选择器使用带有“not”选择器的属性来不引用任何属性。我们可以使用属性、属性 ID 和属性类。

语法

以下语法在样式标签中使用 CSS not 选择器。

/* write properties and their value */
}

示例

以下示例显示了“CSS not 选择器”的样式和属性。我们可以为 HTML 标签的不同属性使用不同的样式标签。

示例 1

以下示例显示了基本 CSS not 选择器的样式。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
:not(p){
background-color: lightgrey;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute
</h3>
<p id = "class2">
If we do not want to set some style tag on the attribute, then CSS does not selector uses on style tag.
</p>
<br>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 2

以下示例显示了具有 CSS 样式属性但不是选择器的相同属性。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
}
:not(p){
font-style: italic;
color: blue;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute
</h3>
<p id = "class2">
If we do not want to set some style tag on the attribute, then CSS does not selector uses on style tag.
</p>
<br>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 3

以下示例显示了带有段落标签 ID 名称的简单 not 选择器。我们可以使用相同的段落标签，但通过 ID 操作单个标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
:not(#class2){
font-style: bold;
color: green;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute ID
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 4

以下示例显示了带有段落标签类名称的简单 not 选择器。我们可以使用相同的段落标签，但通过类操作单个标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
:not(.same){
font-style: bold;
color: yellow;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute Class
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p class = "same">
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

使用元素和属性

CSS not 选择器使用带有“not”选择器的元素和属性来不引用任何属性。我们可以为相同的元素使用属性、属性 ID 和属性类。如果我们使用相同的元素或属性，或者需要使用单个属性，则使用元素和属性。

语法

以下语法在样式标签中使用 CSS not 选择器。

element:not(attribute){
/* write properties and their value */
}

描述

我们可以使用父元素等元素来引用属性。
该属性不引用 CSS 样式属性。

示例

以下示例使用属性和元素显示了 CSS，而非选择器的样式和属性。

示例 1

以下示例使用元素和属性显示了基本的 CSS，而非选择器的样式。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
p:not(#class2){
color: crimson;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements and Attribute
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 2

以下示例显示了相同的元素和不同的属性，并带有 CSS 样式属性而非选择器。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
}
p:not(.class2){
font-style: italic;
color: blue;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements and Attribute
</h3>
<p class = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 3

以下示例显示了带有段落标签 ID 名称的简单 not 选择器。我们可以使用相同的段落标签，但通过 ID 操作单个标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
div:not(p){
font-style: italic;
color: green;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements And Attribute ID
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

示例 4

以下示例显示了带有段落标签类名称的简单 not 选择器。我们可以使用相同的段落标签，但通过类操作单个标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
p:not(.good){
font-style: italic;
color: red;
font-size: 14px;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements And Attribute Class
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p class="good">
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>

输出

输出显示了 css not 选择器及其样式。

结论

CSS not 选择器是一个可用的元素，它不将 CSS 标签应用于特定的属性和元素。我们可以使用 not() 函数以及属性名来使用任何 CSS 属性及其值。

下一主题CSS 响应式设计

CSS Not Selector

CSS Not 选择器的方法

仅使用属性

使用元素和属性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Not Selector

CSS Not 选择器的方法

仅使用属性

使用元素和属性

结论

相关帖子

Adding Images in CSS

CSS Style Dropdowns

CSS Box-Shadow Bottom Only

CSS Hover Transitions

CSS Flip Image

CSS Responsive Table

CSS Layers

:nth-last-child() Selector using CSS

CSS Colorful Text

如何在 CSS 中创建固定表头

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器