css 示例_CSS第一子选择器教程和示例

最新推荐文章于 2024-05-07 14:55:18 发布

cunjiu9486

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量1.6k

点赞数 1

文章标签：列表 css html css3 less

原文链接：https://www.poftut.com/css-first-child-selector-tutorial-with-examples/

版权

css 示例

We can select the first child of the given HTML element in different ways. But CSS provides the first-child attribute in order to select the first child of the given HTML element. We will also learn nth-child to select the first child.

我们可以通过不同的方式选择给定HTML元素的第一个子元素。但是CSS提供了first-child属性，以便选择给定HTML元素的第一个孩子。我们还将学习nth-child来选择第一个孩子。

第一子句语法 (first-child Syntax)

The first-child CSS attribute syntax is like below.

第一个CSS属性的语法如下所示。

HTML_ELEMENT:first-child {
   CSS_CODE;
}

`HTML_ELEMENT` is the element type of element we want to select its first child.
HTML_ELEMENT是我们要选择其第一个子元素的元素的元素类型。
`:first-child` is the CSS selector for the first child.
`：first-child`是第一个孩子CSS选择器。
`CSS_CODE` is the CSS attributes we want to apply to the given first child elements.
CSS_CODE是我们要应用于给定的第一个子元素CSS属性。

选择具有第一个CSS的第一个孩子 (Select First Child with first-child CSS)

We will use first-child of the given HTML elements. We will set every first child background color to the yellow. In the example, we will set the body first element and div’s first elements background color to the yellow.

我们将使用给定HTML元素的first-child元素。我们将每个第一个子背景颜色设置为黄色。在示例中，我们将主体第一元素和div的第一元素的背景色设置为黄色。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
   background-color: yellow;
}

div {
   border-style: groove;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
  <div>
    <p>This paragraph is the first child of its parent (div).</p>
    <p>This paragraph is not the first child of its parent.</p>
  </div>
</div>
<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>


</body>
</html>

选择第n个子CSS的第一个子(Select First Child with nth-child CSS)

nth-child is another CSS selector that can be used to select the first child of the given HTML element. nth-child() works like a function where we will provide the child order number to the nth-child selector which will be 1 in this case.

nth-child是另一个CSS选择器，可用于选择给定HTML元素的第一个子级。 nth-child()作用类似于一个函数，在该函数中，我们将为nth-child选择器提供子订单号(在这种情况下为1)。

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(1) {
   background-color: yellow;
}

div {
   border-style: groove;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
  <div>
    <p>This paragraph is the first child of its parent (div).</p>
    <p>This paragraph is not the first child of its parent.</p>
  </div>
</div>
<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>


</body>
</html>

选择给定HTML元素的第一个子HTML元素(Select First Child HTML Element of the Given HTML Element)

选择第一项清单(Select First List Item)

We can use the first-child in order to select the first item of a list.

我们可以使用第一个孩子来选择列表的第一项。

<html>
<head>
<style>

ul li:first-child {
  color: red;
  font-weight: bold;
}

</style>
</head>
<body>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>


</body>
</html>

选择第一师(Select First Div)

We can also select the first div of the HTML elements.

我们还可以选择HTML元素的第一格。

<html>
<head>
<style>

div {border-style: groove;}

div:first-child {
color: red;
font-weight: bold;
}

</style>
</head>
<body>

<div> First div </div>
<div> Second div </div>
<div> Third div </div>
<div> Fourth div </div>
<div> Fifth div </div>
<div> Sixth div </div>
<div> Seventh div </div>


</body>
</html>

选择带有CSS last-child的Last Child HTML元素(Select Last Child HTML Element with CSS last-child)

CSS also provides the last-child selector which will select the last child of the given HTML element and apply given CSS.

CSS还提供了last-child选择器，该选择器将选择给定HTML元素的最后一个子并应用给定CSS。

<html>
<head>
<style>

div {border-style: groove;}

div:last-child {
color: red;
font-weight: bold;
}

</style>
</head>
<body>

<div> First div </div>
<div> Second div </div>
<div> Third div </div>
<div> Fourth div </div>
<div> Fifth div </div>
<div> Sixth div </div>
<div> Seventh div </div>


</body>
</html>

Select Last Child HTML Element with CSS last-child

LEARN MORE CSS :nth-child Element Selector

了解更多CSS：nth-child元素选择器

翻译自: https://www.poftut.com/css-first-child-selector-tutorial-with-examples/

css 示例

cunjiu9486

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 示例_CSS第一子选择器教程和示例

css 示例We can select the first child of the given HTML element in different ways. But CSS provides the first-child attribute in order to select the first child of the given HTML element. We will also l...
复制链接

扫一扫