css组合选择器_CSS组合器

最新推荐文章于 2024-03-07 09:58:47 发布

cumt30111

最新推荐文章于 2024-03-07 09:58:47 发布

阅读量494

点赞数 4

文章标签： css java python css3 html5

原文链接：https://www.includehelp.com/code-snippets/css-combinators.aspx

版权

css组合选择器

Combinators in CSS are used to explain a relationship between two selectors. A selector can be simple to complex and we can combine any two selectors through combinator.

CSS中的组合器用于解释两个选择器之间的关系。选择器可以简单到复杂，我们可以通过组合器组合任意两个选择器。

There are four different combinators in CSS,

CSS中有四种不同的组合器 ，

General sibling selector (~)
通用同级选择器( 〜 )
Adjacent sibling selector (+)
相邻的同级选择器( + )
Child selector (>)
子选择器( > )
Descendant selector (space)
后代选择器( 空格 )

Let us understand these combinators one by one...

让我们一一理解这些组合器...

1)通用同级选择器(〜) (1) General sibling selector (~))

It is denoted by ~. The general sibling selector as its name suggests is useful to select the elements that are the sibling to a specified element. This can also be used to select the elements who share the same parent element.

用〜表示。顾名思义，通用的同级选择器对于选择指定元素的同级元素很有用。这也可以用于选择共享相同父元素的元素。

Syntax:

句法：

    element1 ~ element2{
        //CSS styling
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        div ~ p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

输出量

In the above example, two <p> are selected i.e. "C" and "D" because they are a sibling to specified element <div>.

在上面的示例中，选择了两个<p> ，即“ C”和“ D”，因为它们是指定元素<div>的同级。

2)相邻的兄弟选择器(+) (2) Adjacent sibling selector (+))

It is denoted by +. As its name suggests adjacent sibling selector is used to selecting the element that is adjacent to a specified element. This combinator only selects one element that is next to a specified tag.

用+表示。顾名思义，相邻兄弟选择器用于选择与指定元素相邻的元素。该组合器仅选择一个位于指定标签旁边的元素。

Syntax:

句法：

    element1 + element2{
        //CSS styling
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        div + p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

输出量

Output

输出量

In the above example, the <p> i.e. "C" is selected as it is a sibling to the specified element <div>.

在上面的示例中，选择<p>即“ C” ，因为它是指定元素<div>的同级。

3)子选择器(>) (3) Child selector (>))

It is denoted by >. The child selector selects all the elements that are children of a specified element. It can select more than one element.

用>表示。子选择器选择所有属于指定元素的子元素。它可以选择多个元素。

Syntax:

句法：

    element1 > element2{
        //CSS styling
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        div > p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

输出量

In the above example <p> element selected as it is a child of the specified element <div>.

在上面的示例中，选择的<p>元素是指定元素<div>的子元素。

4)后代选择器(空格) (4) Descendant selector (space))

It is denoted by space between two elements. The descendant selector selects all the elements that are descendant to a specified element. This combinator is useful to combine the two selectors such that selected elements have an ancestor the same as the first selector element.

用两个元素之间的间距表示。后代选择器选择属于指定元素的所有后代元素。该组合器可用于组合两个选择器，以使所选元素的祖先与第一个选择器元素相同。

Syntax:

句法：

    element1  element2 {
        //CSS styling
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        div p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

输出量

In the above example <p> is selected because it is a descendant of specified element <div>.

在上面的示例中，选择<p>是因为它是指定元素<div>的后代。

翻译自: https://www.includehelp.com/code-snippets/css-combinators.aspx

css组合选择器

cumt30111

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css组合选择器_CSS组合器

css组合选择器Combinators in CSS are used to explain a relationship between two selectors. A selector can be simple to complex and we can combine any two selectors through combinator. CSS中的组合器用于解释两个选择器之间的关...
复制链接

扫一扫