作为Write for DOnations计划的一部分，作者选择了科技多样性基金来接受捐赠。
简介
_选择器_是网络浏览器用来寻找并通过CSS将特定的样式应用到一个元素上。你可以用类型选择器广泛地应用这些样式，选择许多同类的元素。除了针对一个元素的特定属性，如id 或class ，还可以根据一个元素与另一个元素的关系或接近程度来选择它。例如，你可以选择一个跟在前面的元素后面的HTML元素，或者选择一个系列中的第一个元素。
在本教程中，你将使用几种基于CSS关系的方法来选择和设计HTML页面上的元素。你将创建一个页面内容，为每个关系选择器提供不同的样式设计方案。你将使用后代组合器、子代组合器、一般兄弟姐妹组合器和相邻兄弟姐妹组合器，以及first- 、last- 、only- 、nth-child 伪类选择器。这些选择器根据周围元素的相对条件来应用样式，而不是传统选择器的直接方法。
前提条件
- 对CSS的级联和特异性功能有所了解，你可以通过阅读《如何用级联和特异性将CSS样式应用于HTML》来获得。
- 对类型选择器、组合器选择器和选择器组的了解，可以在《如何用CSS选择HTML元素的样式》中找到。
- 在你的本地机器上保存一个空的HTML文件，即
index.html，你可以从你选择的文本编辑器和网络浏览器中访问。要开始学习，请查看我们的《如何设置你的HTML项目》教程，并按照《如何使用和理解HTML元素》中的说明，在浏览器中查看你的HTML。如果你是HTML的新手，可以试试整个《如何用HTML建立网站》系列。
设置初始HTML和CSS
首先，你将设置HTML和CSS代码，你将在本教程的其余部分进行操作。
首先，在你的文本编辑器中打开index.html 。然后，在该文件中添加以下HTML。
index.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
接下来，进入<head> 标签，添加一个<meta> 标签，以定义HTML文件的字符集。然后设置页面的标题，添加一个<meta> 标签，定义移动设备应该如何呈现页面，最后用<link> 标签加载你稍后要做的CSS文件。这些添加的内容在下面的代码块中得到了强调。在整个教程中，随着代码的添加和修改，你会遇到这种突出显示的方法。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relationship Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
添加完<head> 的内容后，移到<body> 元素，你将在这里为一个谈论CSS选择器的页面添加内容。在文本编辑器中把这个代码块的高亮部分添加到你的index.html 文件中。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relationship Selectors</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Relationship Selectors</h1>
<main class="content-width">
</main>
</body>
</html>
请确保将这些添加的内容保存到index.html 。<h1> 元素显示页面的标题。content-width 属性为class 的<main> 元素将包含页面的内容，你将在整个教程中添加这些内容。
接下来，在你的index.html 文件的同一目录下创建一个名为styles.css 的新文件，然后在文本编辑器中打开这个新文件。这个文件将加载浏览器将应用于index.html 的内容的样式。在你的styles.css 文件中添加以下CSS代码。
styles.css
body {
font-family: system-ui, sans-serif;
color: #333;
}
.content-width {
width: 90%;
margin: 2rem auto;
max-width: 70ch;
}
section{
margin: 4rem 0;
}
h1 {
text-align: center;
}
h2 {
color: mediumblue;
}
在这段代码中，body 类型选择器为页面上的font-family 和color 值定义了新的默认值。.content-width 类选择器被设置为页面宽度的90%，并增长到当前font-size 的最大宽度为70个字符宽度。70个字符是一行文本的理想最大长度。.content-width 属性上的margin ，保持元素上方和下方的空间，并保持容器的水平居中。在这个页面上会有几个<section> 元素，所以section 类型选择器应用了一个margin ，使每个分组之间有充足的空间。最后，h1 和h2 类型选择器将<h1> 内容设置为居中，<h2> 内容的颜色为mediumblue 。
在本节中，你为你的HTML和CSS文件设置了起点。在下一节中，你将为index.html ，添加更多的内容，然后使用后裔组合器来应用CSS的样式。
后裔组合器
在使用基于关系的选择器时，你会遇到一些家族术语，如_父系_、子系、祖系，以及这里所说的_子系_。后裔组合器是一个以空格分隔的选择器列表，它与HTML结构相匹配，以便将样式应用于有特定祖先的元素。列表中的最后一个选择器是接受样式的选择器，是列表中前一个选择器的后裔。
后裔组合器是对一个样式进行_范围化_的最快速的方法。范围是提供额外的细节以增加选择器的特殊性的方法。后裔组合器通过在选择器前加上一个祖先选择器来帮助界定范围。例如，a 类型选择器将获得一个页面上所有的<a> 标签，但header a 后裔选择器将只选择<header> 元素内的<a> 标签。
要开始使用后裔组合器，在文本编辑器中打开index.html 。创建一个<section> 元素，其class 属性为descendant 。在<section> 元素内，添加一个包含Descendant Combinator Selector 的<h2> 元素，然后添加两个<p> 元素，并用Cupcake Ipsum 的内容填充它们。将第二个<p> 元素包裹在一个<blockquote> 。以下代码块中突出显示的HTML演示了如何设置。
index.html
...
<main class="content-width">
<section class="descendant">
<h2>Descendant Combinator Selector</h2>
<p>Sweet roll pudding ice cream jelly beans caramels cookie caramels. Macaroon cheesecake cookie marzipan icing jujubes. Chocolate bar jelly-o wafer toffee cookie muffin soufflé lemon drops bonbon. Soufflé danish gingerbread sweet roll marzipan carrot cake.</p>
<blockquote>
<p>Bear claw pastry tootsie roll biscuit jujubes oat cake toffee wafer lemon drops. Croissant pie lemon drops cake chupa chups chocolate bar chupa chups marshmallow. Cake pudding icing tiramisu tiramisu pastry topping. Gingerbread shortbread lollipop chocolate bar icing.</p>
</blockquote>
</section>
</main>
...
保存你对index.html 的修改，然后在你的文本编辑器中打开styles.css 。添加一个.descendant 类选择器，后面是一个空格，然后是blockquote 类型选择器。这将创建一个选择器，该选择器只适用于blockquote 元素，而该元素是在一个包含class 属性的元素里面的descendant 。下面代码块中的突出显示的CSS演示了这个选择器对blockquote 元素的样式。
styles.css
...
h2 {
color: mediumblue;
}
.descendant blockquote {
margin: 2rem 0;
padding: 1rem 1rem 1rem 2rem;
border-left: 0.125rem indigo solid;
background-color: lavender;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。在这个blockquote 元素上使用的属性用margin 属性提供了额外的上下间距。然后，padding 属性在容器内提供了内容空间。最后，容器在视觉上由border-left 属性创建的实线indigo 和用background-color 属性应用的lavender 背景的组合来定义。下面的截图显示了这段代码在浏览器中的呈现方式。
你也可以将子代组合器选择器应用于子代元素，无论该元素相对于祖先选择器在HTML中的位置有多深。类似于前面的代码对.descendant 类选择器内的<blockquote> 元素设置样式，接下来你将对所有<p> 元素应用样式，不管它们包含在哪个元素中。
回到你的文本编辑器中的styles.css 文件。然后，为一个p 元素选择器添加一个新的后裔组合器，其祖先是.descendant 。在选择器块内，将line-height 属性设置为1.5 。在下面的代码块中，突出显示的CSS显示了这将是什么样子。
styles.css
...
.descendant blockquote {
margin: 2rem 0;
padding: 1rem 1rem 1rem 2rem;
border-left: 0.125rem indigo solid;
background-color: lavender;
}
.descendant p {
line-height: 1.5;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。现在两个<p> 元素的文本行都变大了，尽管其中一个<p> 元素是在<blockquote> 元素里面。下面的图片说明了这在浏览器中的呈现方式。
最后，回到你的文本编辑器中的styles.css 文件。你将创建一个新的下级选择器，将样式直接应用到<blockquote> 元素内的<p> 元素。首先写出.descendant blockquote p ，这将告诉浏览器在页面上找到<p> 元素，该元素位于<blockquote> 元素的某处，而该元素又位于一个属性为class 的元素内descendant 。然后在选择器块中，添加一个font-size 属性，设置为1.25rem ，以及一个color 属性，其值为#222 。下面代码块中突出显示的CSS展示了必要的结构。
styles.css
...
.descendant p {
line-height: 1.5;
}
.descendant blockquote p {
font-size: 1.25rem;
color: #222;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。<p> 元素的内容在<blockquote> 内的font-size 现在会大得多，并且有一个稍微柔和的灰色，如下图所示。
在这一节中，你使用了子孙组合器选择器来对在另一个元素内部发现的元素应用样式。在下一节中，你将使用子代组合器选择器，只选择一个元素的第一层子代。
子母组合器选择器
在确定样式的范围时，有时你不需要在祖先选择器内的所有元素，只需要在元素内的那些元素。例如，你可能想为一个导航栏中的所有顶层链接设计样式，而不是任何包含在子导航元素中的链接。在这种情况下，当只有一个给定的父元素的子元素需要被样式化时，你可以使用儿童组合器选择器。
在使用这个新的选择器之前，在你的文本编辑器中返回到index.html ，在<main> 元素内和前一个<section> 元素之后添加以下代码块中的高亮HTML。
index.html
...
<main class="content-width">
...
<section class="child">
<h2>Child Combinator Selector</h2>
<p>Sweet roll carrot cake cake chocolate bar sugar plum. Cheesecake caramels jelly-o sugar plum icing muffin marzipan chocolate bar jujubes. Dessert cotton candy gummies chocolate cake sweet.</p>
<div>
<p>Liquorice sesame snaps chocolate bar soufflé oat cake candy canes fruitcake lollipop candy. Macaroon wafer cotton candy tootsie roll jelly halvah. Icing powder soufflé toffee dessert gummies bear claw donut cake.</p>
</div>
</section>
</main>
...
保存你对index.html 的修改，然后在你的文本编辑器中打开styles.css 。
<p> 首先，你将用一个line-height 属性来扩展.descendant p 选择器，以包括在<section> 内发现的child 类的元素。你将通过使用一个通用组合器来完成，它允许多个选择器共享相同的样式。每个选择器之间需要一个逗号来应用这些样式。在.descendant p 选择器后添加一个逗号，然后添加一个.child p 下属组合器，如下面突出显示的代码所示。
styles.css
...
.descendant p,
.child p {
line-height: 1.5;
}
...
保存你对styles.css 的修改，并在浏览器中打开index.html 。现在，新部分的内容在每行文字之间将有一个较大的空间。下面的图片描述了这将在浏览器中出现的情况。
接下来，为了只选择<p> 元素，也就是<section class="child"> 元素的直接子元素，你将使用子组合器选择器。这个选择器的构造是：先写父选择器，再写大于号（> ），然后写子选择器。
在你的文本编辑器中返回到styles.css ，并转到文件的末尾。通过设置父选择器为.child ，子选择器为p ，创建一个子组合器选择器。然后在选择器块中，将color 属性设置为一个命名的值forestgreen 。下面代码块中高亮的CSS显示了这是如何写的。
styles.css
...
.descendant blockquote p {
font-size: 1.25rem;
color: #222;
}
.child > p {
color: forestgreen;
}
保存你对styles.css 的修改，在浏览器中打开index.html 。只有第一个<p> 元素的文本设置为forestgreen 颜色。包裹第二个<p> 元素的<div> 元素将与<section> 元素的关系从子代改为孙代。正因为如此，该<p> 元素对于儿童组合器选择器是无效的。下面的图片说明了这种情况在浏览器中是如何呈现的。
在本节中，你使用了子组合器选择器来选择和应用父元素的直接子元素的样式。在下一节中，你将处理兄弟姐妹元素的关系，当它们有一个共同的父元素时，你将把样式应用到元素中。
兄弟姐妹组合器选择器
一般的兄弟姐妹组合器提供了一种方法，可以将样式应用于在一个特定元素之后的、具有相同父元素的元素，但这些元素可能不在彼此的旁边。通常情况下，当HTML是已知的但不可预测的时候，就会出现这种情况，比如动态生成的内容。
首先，你将需要HTML同级元素来使用选择器。在你的文本编辑器中返回到index.html 。然后，在关闭的</main> 标签前添加以下代码块中高亮显示的HTML。
index.html
...
<main class="content-width">
...
<section class="general-sibling">
<h2>General Sibling Combinator Selector</h2>
<p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>
<div>
<p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
</div>
<p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>
<p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
</section>
</main>
...
保存你的修改到index.html ，然后在你的文本编辑器中打开styles.css 。
<p> 接下来，你将用一个line-height 属性来扩展分组选择器，以包括在<section> 内发现的general-sibling 类的元素。同样，这也是通过在.child p 选择器后面添加一个逗号，并添加一个.general-sibling p 下降组合器来实现的，如下面突出显示的CSS所示。
styles.css
...
.descendant p,
.child p,
.general-sibling p {
line-height: 1.5;
}
...
保存你对styles.css 的修改，并在你的浏览器中刷新index.html 。现在，新部分的内容在每行文字之间将有一个较大的空间。下面的图片描述了在浏览器中出现的情况。
接下来，你将为同一父级的另一个<p> 元素之后的兄弟姐妹<p> 元素编写样式。这是通过写一个选择器，后面是一个tilde (~)，再后面是你想要样式的兄弟姐妹的选择器来完成的。
在你的文本编辑器中回到styles.css ，为.general-sibling p 添加一个新的选择器。这将找到<p> 元素，其父辈有一个class 属性的general-sibling 。然后在p 元素的选择器后面添加tilde符号。在选择器块内，将color 属性设置为lightseagreen 的命名值，如下面代码块的高亮CSS所示。
styles.css
...
.child > p {
color: forestgreen;
}
.general-sibling p ~ p {
color: lightseagreen;
}
保存你对styles.css 的修改，并返回你的浏览器刷新index.html 。下面的图片展示了这段代码在浏览器中的呈现方式。
四个段落中只有最后两段会有lightseagreen 的颜色。这是因为第一段是初始化选择器，即组合器的.general-sibling p 部分，这意味着随后的<p> 元素将接受造型。第二段文字在一个<p> 元素内，但因为它嵌套在一个<div> 元素内，所以它不再是初始化选择器的同级元素。
同级选择器不一定是同一元素的类型。为了证明这一点，回到文本编辑器中的styles.css 文件，将选择器中的第一个p 改为div ，正如下面的代码块中所强调的那样。
styles.css
...
.general-sibling div ~ p {
color: lightseagreen;
}
保存对styles.css 的小改动，并在你的浏览器中刷新index.html 。视觉上没有什么变化，但浏览器应用样式的方式确实改变了。接受样式的元素必须是<p> ，这些元素是在tilde之前的选择器的同级次元素。由于HTML的顺序是<p />,<div />,<p />, 然后是<p /> ，两个一般的同级选择器的结果都是一样的。第一个<p> 元素没有收到样式，因为尽管它是一个同级元素，但它在初始化.general-sibling div 选择器之前。
在这一节中，你使用了一般的同级元素组合器，将样式应用于任何特定类型的同级元素。在下一节中，你将使用相邻的兄弟姐妹组合器来应用样式到紧跟在一个元素之后的兄弟姐妹。
相邻的同胞组合器选择器
如果你只需要在HTML中两个特定的元素相邻时应用一个样式，相邻的同胞组合器将帮助选择合适的元素。当在标题文本和正文文本之间应用额外的空间，或者在元素之间添加一个分隔符时，这可能很有用。
要开始使用相邻兄弟姐妹组合器，首先在你的文本编辑器中打开index.html 。然后，在<main> 元素内，添加以下代码块中突出显示的HTML。
index.html
...
<main class="content-width">
...
<section class="adjacent-sibling">
<h2>Adjacent Sibling Combinator Selector</h2>
<p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>
<div>
<p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
</div>
<p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>
<p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
</section>
</main>
保存你的改动到index.html ，然后在你的文本编辑器中打开styles.css 。用.adjacent-sibling p 来扩展line-height 的选择器分组，正如下面的代码块所强调的那样。
styles.css
...
.descendant p,
.child p,
.general-sibling p,
.adjacent-sibling p {
line-height: 1.5;
}
...
接下来，转到styles.css 文件的最后一行。在这里，你将写一个相邻的兄弟姐妹组合器选择器，对一个<p> 元素应用顶部边框和额外的填充，该元素前面是另一个<p> 。在下面的代码块中，突出显示的CSS显示了这是如何写的。
styles.css
...
.general-sibling div ~ p {
color: lightseagreen;
}
.adjacent-sibling p + p {
border-top: 1px solid black;
padding-top: 1em;
}
因为这个样式应该只应用于<section class="adjacent-sibling"> 元素内的<p> 元素，所以第一个选择器必须使用一个下级组合器。选择器中的第二个元素只需要使用一个元素选择器，因为那是与兄弟姐妹相邻的元素。
**注意：**在使用同胞选择器时，一定要记住序列中的最后一个选择器是被选择的元素。假设一个相邻的兄弟姐妹组合器被写成.adjacent-sibling p + .adjacent-sibling p 。<p> 这段代码的意图可能是在<p> 之后选择.adjacent-sibling 的一个祖先。但是，这个相邻的兄弟姐妹选择器将试图以.adjacent-sibling 的祖先内的<p> 为目标，该祖先紧跟在<p> 的兄弟姐妹之后，而该兄弟姐妹又是另一个元素的后代，该元素的class 的adjacent-sibling 。
保存你对styles.css 的修改，并在浏览器中刷新index.html 。边框将呈现在最后一段的上方，因为这里是一个<p> 挨着一个<p> 。上面的额外填充物在视觉上补偿了边距，因此上下两行的间距相等，如下图所示。
这个选择器并不局限于相似的兄弟姐妹，它可以是任何类型的兄弟姐妹选择器。回到styles.css ，创建一个新的相邻同级选择器，在<div> 元素和相邻的<p> 元素之间添加一个红色边框，以及一些额外的顶部填充。下面的代码块中突出显示的CSS演示了如何设置。
styles.css
...
.adjacent-sibling p + p {
border-top: 1px solid black;
padding-top: 1em;
}
.adjacent-sibling div + p {
border-top: 1px solid red;
padding-top: 1em;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。现在在第二段和第三段之间有一条红线，因为这是一个<div> 元素挨着一个<p> 元素的地方。下图显示了在浏览器中呈现的情况。
在这一节中，你使用了相邻的兄弟姐妹组合器，将样式应用于紧随兄弟姐妹元素之后的元素。在下一节中，你将使用第一个孩子的伪类来为父元素的第一个元素应用样式。
first-child 伪类选择器
当涉及到处理特定的子元素时，CSS提供了_伪类选择器_来细化选择过程。伪类选择器是一个与选择器的条件有关的状态。在本节中，你将针对作为指定或未指定的父元素的第一个子元素，也就是第一个嵌套的元素。
要开始，在你的文本编辑器中打开index.html 。然后，在<main> 元素内，添加以下代码块中突出显示的HTML。
index.html
...
<main class="content-width">
...
<section>
<h2>First and Last Child Pseudo-Class Selector</h2>
<ul>
<li>Sugar plum gingerbread</li>
<li>Sesame snaps sweet ice cream</li>
<li>Jelly beans macaroon dessert</li>
<li>Chocolate cheesecake</li>
<li>Sweet roll pastry carrot cake</li>
<li>Sugar plum tart cake</li>
<li>Pudding soufflé</li>
<li>Marshmallow oat cake</li>
</ul>
</section>
</main>
这个HTML创建了一个无序列表，由<ul> 元素定义，里面嵌套了八个列表项(<li>)。这将在浏览器中默认创建一个带子弹头的内容列表。
保存这些修改到index.html ，然后在你的文本编辑器中打开styles.css 。
在你的CSS文件中，添加一个ul 元素选择器。这一部分将不需要任何与类有关的范围。然后在选择器块内添加属性list-style ，其值为none ，这将会移除子弹头列表的样式。将margin 属性设置为1rem 0 ，将padding 属性设置为0 ，这将覆盖浏览器的默认样式。下面的代码块中突出显示的CSS演示了如何设置。
styles.css
...
.adjacent-sibling div + p {
border-top: 1px solid red;
padding-top: 1em;
}
ul {
list-style: none;
margin: 1rem 0;
padding: 0;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。无序列表将不再有子弹，并将与标题文本对齐，如下图所示。
接下来，为了给列表项提供一些默认样式，创建一个li 元素选择器。在选择器块中应用一个padding 属性，其值为0.5rem 0.75rem 。然后，添加一个浅绿色的background-color 属性，值为hsl(120, 50%, 95%) 。最后，添加一个border 属性，设置为1px 和solid ，使用hsl(120, 50%, 80%) ，颜色稍微深一些，正如下面的代码块中所强调的。
styles.css
...
ul {
list-style: none;
margin: 1rem 0;
padding: 0;
}
ul li {
padding: 0.5rem 0.75rem;
background-color: hsl(120, 50%, 95%);
border: 1px solid hsl(120, 50%, 80%);
}
保存这些修改到styles.css ，并在浏览器中打开index.html 。现在每个列表项都有一个浅绿色的背景颜色和一个深绿色的边框，文字被padding 属性嵌入。下面的图片显示了这在浏览器中的呈现。
列表项的顶部和底部边框使项目之间的边框厚度加倍，使得边框厚度不一致。为了解决这种情况，在你的文本编辑器中返回到styles.css 。然后，添加一个新的相邻的兄弟姐妹组合器，选择一个<li> 元素，该元素在一个<li> 元素之后，在一个<ul> 元素之内，如下面的代码块所描述。
styles.css
...
ul li {
padding: 0.5rem 0.75rem;
background-color: hsl(120, 50%, 95%);
border: 1px solid hsl(120, 50%, 80%);
}
ul li + li {
border-top: none;
}
保存添加到styles.css ，并在浏览器中刷新index.html 。列表项之间多余的粗线已经通过移除任何列表项顶部的边框来解决，这些列表项位于另一个列表项之后。下面的图片展示了在浏览器中出现的情况。
现在，返回styles.css ，对第一个列表项的顶部应用圆角。由于这需要只应用于无序列表的第一个列表项，你可以使用子组合器选择器。这将确保只有无序列表的第一个直接子项被选中。在li 元素选择器之后，立即附加:first-child ，不要有空格。对于顶部的圆角样式，使用border-radius 属性，其值设置为0.75rem 0.75rem 0 0 ，这将在左上角和右上角添加圆角。下面代码块中高亮的CSS显示了这是如何写的。
styles.css
...
ul li + li {
border-top: none;
}
ul > li:first-child {
border-radius: 0.75rem 0.75rem 0 0;
}
将这一改动保存到styles.css ，然后返回浏览器刷新index.html 。无序列表中的第一个项目现在在元素的顶部有圆角。下面的图片说明了在浏览器中是如何呈现的。
在本节中，你为一个列表创建了样式，并为<ul> 父元素的第一个子元素<li> 应用了圆角。在下一节中，你将用last-child 伪类选择器为列表末尾的<li> 样式。
last-child 伪类选择器
与first-child 伪类选择器捕捉父元素的第一个元素一样，last-child 伪类选择器捕捉父元素的最后一个元素。在上一节中，你在第一个列表项的顶部添加了圆角。在本节中，你将为最后一个项目的底部添加圆角。
要开始，请回到你的文本编辑器中的styles.css 。在:first-child 的选择器块之后，在li 元素选择器上添加一个类似格式的子组合器，即:last-child 。在选择器块中，添加一个border-radius 属性，然后对于值使用0 0 0.75rem 0.75rem 。这个值将把顶部的值设置为0 ，右下方和左下方的曲线值设置为0.75rem 。下面代码块中的高亮CSS显示了这是如何组成的。
styles.css
...
ul > li:first-child {
border-radius: 0.75rem 0.75rem 0 0;
}
ul > li:last-child {
border-radius: 0 0 0.75rem 0.75rem;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。现在，整个无序列表看起来像一个具有平等圆角的盒子。下面的图片展示了在浏览器中是如何呈现的。
在本节中，你使用了last-child 伪类来为无序列表中的最后一个元素<li> 应用样式。在下一节中，你将为只有一个子元素的情况编写样式。
only-child 伪类选择器
当应用样式到可以改变或更新的内容时，可能会出现只有一个子元素的情况。在这些情况下，该元素既是第一个也是最后一个子元素，这可能导致伪类互相覆盖对方的样式。对于这种情况，有另一个伪类选择器专门针对唯一的孩子的情况。
首先，在你的文本编辑器中打开index.html ，在<main> 元素内和前一个<section> 元素后添加以下代码块中的高亮HTML。
index.html
...
<main class="content-width">
...
<section>
<h2>Only Child Pseudo-Class Selector</h2>
<ul>
<li>Sweet roll pastry carrot cake</li>
</ul>
</section>
</main>
保存对index.thml 的修改，然后返回浏览器，刷新页面。浏览器在顶部应用:first-child 圆角，但随后:last-child 圆角属性覆盖了第一个圆角。这导致单个列表项在顶部有尖角，在底部有圆角。下图显示了浏览器对该代码的渲染。
回到你的文本编辑器，打开styles.css 。为了解决这种情况，你将在一个子组合器的li 部分使用:only-child 伪类选择器。然后，对于border-radius 属性，将其值设置为单一的0.75rem ，这将把曲线应用于所有四个角。下面代码块中突出显示的CSS显示了这是如何写的。
styles.css
...
ul > li:last-child {
border-radius: 0 0 0.75rem 0.75rem;
}
ul > li:only-child {
border-radius: 0.75rem;
}
将这些添加的内容保存到styles.css ，返回到浏览器，刷新index.html 。现在单个列表项的四边都有圆角，如下图所示。
在这一节中，你使用了only-child 伪类选择器来为无序列表中的单个<li> 元素应用样式。在下一节中，你将使用一个伪类选择器，根据其在父元素中的数字计数，将样式应用到任何特定的子元素。
nth-child 伪类选择器
nth-child 伪类选择器允许你为选择子元素设置模式。其他选择器使用一个元素的特征，如属性值，来寻找匹配的HTML元素。nth-child 伪类选择器以HTML元素在其父元素中的特定数字位置为目标。术语_nth_是一个数学短语，指的是一个系列中的一个不确定的数字。这个特殊的选择器可以选择偶数和奇数的子元素以及序列中的特定数字元素。
要为这个选择器设置HTML，在你的文本编辑器中打开index.html 。然后，在最后一个</section> 标签后添加以下代码块的高亮部分。
index.html
...
<main class="content-width">
...
<section>
<h2>Nth Child Pseudo-Class Selector</h2>
<ol>
<li>Caramel marshmallows</li>
<li>Gummi bears</li>
<li>pudding donut</li>
<li>Chocolate bar</li>
<li>Lemon drops</li>
<li>Lollipop</li>
<li>Danish soufflé</li>
</ol>
</section>
</main>
这段代码设置了一个有序的列表，正如<ol> 元素所定义的。与<ul> 不同的是，<ol> 对每个列表项都用圆点标记，而对每个项目则用数字依次标记。
请确保将这些修改保存到index.html 。然后回到你的文本编辑器中的styles.css 。你将为有序列表和列表项设置一些调整后的样式。创建一个ol 元素选择器，将padding 属性设置为0 。接下来，添加一个list-style-position 属性，其值为inside ；这将把生成的数字移到<li> 元素的盒子模型内。0.25rem最后，创建一个ol li 的下级组合器，其属性设置为padding 。参考以下代码块的突出显示的CSS，了解如何编写。
styles.css
...
ul > li:only-child {
border-radius: 0.75rem;
}
ol {
padding: 0;
list-style-position: inside;
}
ol li {
padding: 0.25rem;
}
保存你的修改到styles.css ，然后打开网页浏览器，加载你的index.html 文件。新的部分将呈现出一个由七个项目组成的列表，每个项目都是以其数值的顺序开始的，如下面的图片中所示。
要开始使用nth-child 伪类，在你的文本编辑器中回到styles.css 。选择器的设置与之前的伪类一样，但在最后有一个小括号。这个括号包含了选择元素的单词值或数字值。为了选择所有偶数的列表项，为ol 和li 创建一个后裔组合器。然后，添加:nth-child() ，在括号内添加单词even 。在选择器块中，将background-color 属性设置为aliceblue ，如下面的代码块中所强调的。
styles.css
...
ol li {
padding: 0.25rem;
}
ol li:nth-child(even) {
background-color: aliceblue;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。列表中的第二、第四和第六项现在有一个浅蓝色的背景。这就是如何创建一种被称为斑马纹的样式，它有助于长信息列表的可读性。下面的图片展示了这在浏览器中的呈现方式。
接下来，回到文本编辑器中的styles.css ，对奇数的列表项做同样的事情。用:nth-child() 伪类选择器创建另一个后裔组合器。这一次，在括号内添加单词值odd 。然后在选择器块中把background-color 属性设置为lavenderblush ，是一种浅粉色。下面的高亮代码显示了如何设置。
styles.css
...
ol li:nth-child(even) {
background-color: aliceblue;
}
ol li:nth-child(odd) {
background-color: lavenderblush;
}
保存该更改到styles.css ，并在浏览器中重新加载index.html 。列表现在在lavenderblush 和aliceblue 之间交替出现，新的颜色出现在第一、第三、第五和第七个列表项上。下图显示了这一情况的出现。
最后，可以插入一个数字值，而不是一个单词值。回到styles.css ，添加另一个ol li:nth-child() 选择器，这次在括号内添加一个4 。这将选择列表中的第四个项目。为了使这个项目突出，添加一个color 属性，设置为white ，一个background-color 属性，设置为indigo ，正如下面的代码块中所强调的。
styles.css
...
ol li:nth-child(odd) {
background-color: lavenderblush;
}
ol li:nth-child(4) {
color: white;
background-color: indigo;
}
保存你对styles.css 的修改，并在浏览器中打开index.html 。奇数和偶数项保留了交替的斑马纹样式，但第四项现在有一个紫色的背景和白色的文字。下图显示了在浏览器中呈现的情况。
注意： :nth-child() 伪类也能够使用代数方程，比如3n ，以选择列表中的每一个第三项。CSS Tricks有一个nth-child测试工具来测试nth-child值，以帮助理解这个伪类选择器的复杂多功能性。
在最后一节中，你用:nth-child() 伪类选择器对偶数元素、奇数元素，特别是列表中的第四个元素应用样式。
总结
在本教程中，你已经使用了许多基于关系概念的新选择器。你使用了子孙组合器和子孙组合器选择器来选择其他元素内部的元素。然后，你使用了一般的兄弟姐妹组合器和相邻的兄弟姐妹组合器来选择有一个共同的父元素，并根据接近程度应用样式。最后，你使用了一系列的伪类选择器来设计第一个、最后一个和唯一的子元素的样式，以及中间的第N个元素。这些选择器将帮助你对项目的样式进行磨练和定位。
如果你想阅读更多的CSS教程，可以试试《如何用CSS为HTML定型》系列中的其他教程。
