数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 CSS 中使用 :not(:first-child) 选择器？
CSS 中有很多选择器，其中 :not(:first-child) 选择器非常实用。我们可以通过组合使用:not 和 :first-child 选择器轻松实现这一点。
例如，如果您想选择 div 元素中除第一个段落之外的所有段落，可以使用 div :not(:first-child) 选择器。在本文中，我们将学习如何在 CSS 中使用 :not(:first-child) 选择器。我们将探讨使用 :not(:first-child) 选择器的不同方法。
使用 :not(:first-child) 选择器的不同方法
如下所述，在 CSS 中使用 :not(:first-child) 选择器的方法有很多种。
选择元素的除第一个子元素之外的所有子元素
我们将选择元素的除第一个子元素之外的所有子元素。在这种方法中，我们将使用 :not(:first-child) 选择器，该选择器选择除元素的第一个子元素之外的所有子元素。我们可以通过编写元素选择器后跟 :not(:first-child) 伪类来简单地使用此选择器。请参见下面的语法。
语法
以下是选择 div 容器中除第一个 p 元素之外的所有 p 元素的语法。
div p:not(:first-child) {
/* Add all the CSS styles for all p
elements except the first one */
}
示例
在给定的示例中，我们选择的是除元素的第一个子元素之外的所有子元素。这里除了第一个 p 元素之外，所有 p 元素都将具有在<style>标签下定义的 CSS 样式。
<html>
<head>
<style>
div p:not(:first-child) {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all children except the first child of
an element
</h2>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>
At tutorialspoint, 40 million readers read
million pages every month.
</p>
<p>
Our Text Library Content and resources are
freely available and we prefer to keep it that
way to encourage our readers to accquire as many
skills as they would like to.
</p>
</div>
</body>
</html>
选择元素的除第一个兄弟元素之外的所有兄弟元素
我们将选择元素的除第一个兄弟元素之外的所有兄弟元素。在这种方法中，:not(:first-child) 选择器用于选择元素的除第一个兄弟元素之外的所有兄弟元素。与第一种方法相比，如果我们想将样式应用于元素的所有兄弟元素（第一个除外），则此方法很有用。我们可以通过编写元素兄弟元素的选择器后跟 :not(:first-child) 伪类来实现此目的。请参见下面的语法。
语法
以下是选择<ol>列表内的所有 li 元素（不是其父元素的第一个子元素）的语法，因为它允许将特定的 CSS 样式应用于除第一个 li 元素之外的所有 li 元素。
ul li:not(:first-child) {
/* Add all the CSS styles for all li
elements except the first one */
}
示例
在给定的示例中，我们选择的是除元素的第一个兄弟元素之外的所有兄弟元素，即 <li>。除了第一个<li>元素之外，所有其他 <li> 元素都将具有在 <style> 标签下定义的 CSS 样式。
<html>
<head>
<style>
ul li:not(:first-child) {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all siblings except the first sibling of
an element
</h2>
<div>
<ul>
<li>
Learn how to do data structures.
</li>
<li>
Learn how to do algorithms.
</li>
<li>
Learn how to do competitive programming.
</li>
</ul>
</div>
</body>
</html>
选择除其父元素的第一个子元素之外的所有元素
我们将选择除其父元素的第一个子元素之外的所有元素。我们可以使用通配符选择器 * 后跟 :not(:first-child) 选择器。到目前为止，我们已经看到了上述两种方法，当我们想要将样式应用于页面上的所有元素（其父元素的第一个子元素除外）时，此方法很有用。请参见下面的语法了解更多详细信息。
语法
以下是选择页面上不是其父元素的第一个子元素的所有元素的语法。这使我们可以将特定样式应用于其父元素的第一个子元素之外的所有元素。
*:not(:first-child) {
/* Add all the CSS styles for all elements
except for the first child of their parent */
}
示例
在给定的示例中，我们将选择页面上除其父元素的第一个子元素之外的所有元素，这些元素将具有某些样式。这里，除父元素的第一个子元素之外的所有元素都将具有在 <style> 标签下定义的 CSS 样式。
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove :not(:first-child) from below code to check */
*:not(:first-child) {
margin: 10;
border: 2px solid blue;
}
</style>
</head>
<body>
<h4>
Using not:first-child selector to
select all children except the first
child of an element
</h4>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>Simply Easy Learning</p>
<p>
Text Library Content and resources are
freely available and we prefer to keep
it that way to encourage our readers
acquire as many skills as they would like to.
</p>
</div>
<ul>
<li>Learn HTML, CSS and JavaScript</li>
<li>Learn Data Structure and Algorithm</li>
<li>Learn Data Science and Machine Learning</li>
</ul>
</body>
</html>
结论
我们学习了如何在 CSS 中使用 :not(:first-child) 选择器。我们已经看到，:not(:first-child) 选择器是两个不同选择器的非常强大的组合，用于设置网页样式。这使我们可以选择除其父元素的第一个子元素之外的所有元素，从而更容易地定位特定元素。
浏览量：181
