CSS Not选择器
在CSS中,not
伪类选择器是一个非常有用的工具,它可以帮助我们选择除了指定元素之外的其他元素。通过not
选择器,我们可以更精确地控制页面上的样式,使得我们的页面更加灵活和美观。
基本语法
not
选择器的基本语法如下:
:not(selector) {
/* styles */
}
其中,selector
是要排除的元素的选择器。下面我们通过一些示例来详细介绍not
选择器的用法。
示例代码
示例1:排除特定类名的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
.container:not(.exclude) {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This is a container.
</div>
<div class="container exclude">
This is an excluded container.
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了具有exclude
类名的元素,使得只有没有exclude
类名的元素应用了背景颜色。
示例2:排除特定ID的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(#exclude) {
color: red;
}
</style>
</head>
<body>
<div id="exclude">
This is an excluded div.
</div>
<div>
This is a normal div.
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了具有exclude
ID的元素,使得只有没有exclude
ID的元素应用了红色文字颜色。
示例3:排除特定元素类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(.exclude) {
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<div class="exclude">
This is an excluded div.
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了具有exclude
类名的div
元素,使得只有p
元素应用了20px的字体大小。
示例4:排除多个选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(.exclude, #exclude) {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="exclude">
This is an excluded div.
</div>
<div id="exclude">
This is another excluded div.
</div>
<div>
This is a normal div.
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了具有exclude
类名或exclude
ID的元素,使得只有没有这两个选择器的元素应用了浅绿色背景。
示例5:排除后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(.container .exclude) {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="exclude">
This is an excluded div.
</div>
<div>
This is a normal div.
</div>
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了.container .exclude
后代元素,使得只有没有这个后代元素的div
元素应用了黑色边框。
示例6:排除特定属性值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
a:not([href="https://geek-docs.com"]) {
color: blue;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
<a href="https://example.com">Example</a>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了href
属性值为https://geek-docs.com
的a
元素,使得只有href
属性值不是https://geek-docs.com
的a
元素应用了蓝色文字颜色。
示例7:排除特定伪类的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(:first-child) {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了第一个子元素的p
元素,使得只有不是第一个子元素的p
元素应用了粗体文字样式。
示例8:排除特定状态的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
input:not(:disabled) {
background-color: lightgray;
}
</style>
</head>
<body>
<input type="text" disabled>
<input type="text">
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了disabled
状态的input
元素,使得只有没有被禁用的input
元素应用了浅灰色背景。
示例9:排除特定子元素的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
ul:not(:empty) {
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul></ul>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了空的ul
元素,使得只有非空的ul
元素应用了黑色边框。
示例10:排除特定属性的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
img:not([alt]) {
border: 1px solid red;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image">
<img src="image.jpg">
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了具有alt
属性的img
元素,使得只有没有alt
属性的img
元素应用了红色边框。
示例11:排除特定文本内容的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(:contains("geek-docs.com")) {
color: green;
}
</style>
</head>
<body>
<p>Welcome to geek-docs.com</p>
<p>Welcome to our website</p>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了包含geek-docs.com
文本内容的p
元素,使得只有不包含这个文本内容的p
元素应用了绿色文字颜色。
示例12:排除特定子元素数量的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(:nth-child(2)) {
background-color: lightyellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
</div>
<div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了第二个子元素的div
元素,使得只有不是第二个子元素的div
元素应用了浅黄色背景。
示例13:排除特定状态的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
button:not(:hover) {
background-color: lightblue;
}
</style>
</head>
<body>
<button>Hover over me</button>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了鼠标悬停状态的button
元素,使得只有没有悬停的button
元素应用了浅蓝色背景。
示例14:排除特定子元素的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
ul:not(:first-of-type) {
color: purple;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
</ol>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了第一个类型的ul
元素,使得只有不是第一个类型的ul
元素应用了紫色文字颜色。
示例15:排除特定子元素的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(:last-of-type) {
font-style: italic;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
</div>
<div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>
</html>
Output:
在这个示例中,我们使用not
选择器排除了最后一个类型的div
元素,使得只有不是最后一个类型的div
元素应用了斜体文字样式。
结论
通过以上示例,我们详细介绍了not
选择器在CSS中的用法。not
选择器可以帮助我们排除特定的元素,从而更精确地控制页面上的样式。