Home > Article > Web Front-end > What are the types of css3 relationship selectors?
What are the types of css3 relationship selectors?
- 青灯夜游Original
- 2021-12-15 16:31:173756browse
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".
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 spacesul li{color:green;} <ul> <li>宝马</li> <li>奔驰</li> </ul> <ol> <li>奥迪</li> </ol>
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:nbsp;html>
<meta>
<title>CSS3子代选择器用法</title>
<style>
h1 > strong {
color: red;
font-size: 20px;
font-family: "微软雅黑";
}
</style>
<h1>这个<strong>知识点</strong>很<strong>重要</strong>
</h1>
<h1>PHP<em><strong>中文网</strong></em>欢迎你！</h1>
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. 
nbsp;html>
<meta>
<title>CSS3紧邻兄弟选择器用法</title>
<style>
p + h2{
color: green;
font-family: "宋体";
font-size: 20px;
}
</style>
<h2>《赠汪伦》</h2>
<p>李白乘舟将欲行，</p>
<h2>忽闻岸上踏歌声。</h2>
<p>桃花潭水深千尺，</p>
<h2>不及汪伦送我情。</h2>
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. 
<!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>
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!