What are the types of css3 relationship selectors?-Front-end Q&A-php.cn

What are the types of css3 relationship selectors?

青灯夜游

Release： 2021-12-15 16:31:17

Original

3754 people have browsed it

There are 4 types of css3 relationship selectors: 1. The inclusion selector "E F" selects all F elements contained by the E element; 2. The descendant selector "E>F" selects all elements that are E The direct child element F; 3. The adjacent selector "E F" selects the F element immediately following the E element; 4. The sibling selector "E~F".

What are the types of css3 relationship selectors?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Relationship selectors in CSS3 mainly include include selectors, descendant selectors, adjacent selectors and sibling selectors:

Include selectors Connected by a space " " The selector is connected by the symbol "
The sibling selector is connected by the symbol "
"

We will explain it in detail below.
Inclusion selector (E F)
Select all F elements contained by E elements, separated by spaces
```
ul li{color:green;}

<ul>
  <li>宝马</li>
  <li>奔驰</li>
</ul>
<ol>
  <li>奥迪</li>
</ol>
```
Copy after login

CSS3 descendant selector (E>F)

The descendant selector is mainly used to select the first-level child elements of an element. For example, if you want to select the strong element that is only a child of the h1 element, you can write: h1> strong.

The following uses a case to demonstrate the usage of the descendant selector (>), as shown in the figure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3子代选择器用法</title>
    <style>
        h1 > strong {
            color: red;
            font-size: 20px;
            font-family: "微软雅黑";
    　  }
    
    </style>
</head>
<body>
    <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
　  <h1>PHP<em><strong>中文网</strong></em>欢迎你！</h1>
</body>
</html>

Copy after login

In the above code, the strong element in the 15th line of code is The child element of the h1 element, the strong element in the 16th line of code is the grandchild element of the h1 element, so the style set in the code is only valid for the 15th line of code.

CSS3 sibling selector (E F)

This selector uses the plus sign " " to link the two selectors before and after. The two elements in the selector have the same parent, and the second element must immediately follow the first.

The following uses a case to demonstrate the usage of the adjacent sibling selector.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3紧邻兄弟选择器用法</title>
    <style type="text/css">
        p + h2{
            color: green;
            font-family: "宋体";
            font-size: 20px;
       }

    </style>
</head>
<body>
　<body>
　  <h2>《赠汪伦》</h2>
　  <p>李白乘舟将欲行，</p>
　  <h2>忽闻岸上踏歌声。</h2>
　  <p>桃花潭水深千尺，</p>
　  <h2>不及汪伦送我情。</h2>
</body>

Copy after login

In the above code, lines 7 to 11 are used to define the style for the first sibling element h2 immediately after the p element. It can be seen from the structure that the position of the first sibling element immediately after the p element is the 17th line of code, so the text content of the 17th line of code will be displayed in the defined style.

What are the types of css3 relationship selectors?

As can be seen from the picture, only the h2 element immediately following the p element has the style set in the code applied.

CSS3 Adjacent Selector (E~F)

Ordinary sibling selectors use "～" to link the two selectors before and after. Find all sibling nodes behind a specified element.

The following uses a case to demonstrate the usage of ordinary sibling selectors, as shown below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3普通兄弟选择器~用法</title>
    <style type="text/css">
        p ~ h2{
            color: pink;
            font-family: "微软雅黑";
            font-size: 20px;
       }
    </style>
</head>
<body>
　<body>
    <h2>《赠汪伦》</h2>
    <p>李白乘舟将欲行，</p>
    <h2>忽闻岸上踏歌声。</h2>
    <h2>桃花潭水深千尺，</h2>
    <h2>不及汪伦送我情。</h2>
</body>
</html>

Copy after login

What are the types of css3 relationship selectors?

As can be seen from the picture, all sibling elements h2 after the p element have the styles set in the code applied.

(Learning video sharing:

css video tutorial

)

The above is the detailed content of What are the types of css3 relationship selectors?. For more information, please follow other related articles on the PHP Chinese website!