CSS composite selector
Descendant selector
In the CSS selector, the HTML tags in the special position are declared by nesting. The outer tags are written in the front, and the inner tags are written in the back, separated by spaces . When the tags are nested, the inner tags are written. Become the offspring of the outer label.
That is, first meet the outer label and then meet the inner label, so that it can be modified by the descendant selector
Look at the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div h3{
color: red;
}
</style>
</head>
<body>
<div>
<h3>水果</h3>
<ul>
<li>
<h3>列表中的h3</h3>
香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h3>手机品牌</h2>
<ul>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
</div>
<h3>div外面的h3标题</h3>
</body>
</html>
Look at the picture below. First, all h3 in the red box div will be modified by the descendant selector above. All h3 in the div range will turn red. The h3 in the blue box below is not in the div, so it will not be Retouch.
running result:
So this is easy to understand, keep reading
Intersection selector
By the two selectors are directly connected configuration, the intersection of the respective selected range of elements in both the first must be a tag selector , the second selector must be a class or an ID selector there is no space between the selector, writing must continue .
Look at the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3.aa{
color: red;
}
h3#bb{
color: green;
}
</style>
</head>
<body>
<h3 class="aa">水果</h3>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h3>手机品牌</h2>
<ul>
<h3 class="aa">列表里的h3标题</h3>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
<div class="aa">class为aa但是不是h3标签的情况</div>
<h3 id="bb">第二部分为id选择器的情况</h3>
</body>
</html>
Look at the picture below. The
red box is the case where the first part is the sticky note selector and the second part is the class selector. The
green box is the first part is the sticky note selector and the second part is the id selector. The
purple box is although the class is aa but not h3 tag, so it will not be modified
running result:
This is also easy to understand. It is intersection. The first part is consistent and the second part is also the case that can be modified. As the name implies, the intersection is taken.
Union selector
Multiple selectors are connected by commas, and the union selector is used to declare the same style union at the same time
, and it will be modified as long as it meets one of them
Look at the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3,li{
color: red;
}
</style>
</head>
<body>
<h3>水果</h3>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h2>手机品牌</h2>
<ul>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
<h3>牛哄哄的柯南</h3>
</body>
</html>
h3,li{
color: red;
}
As shown in the figure below, all h3 or li will be modified to red.
h2 does not belong to any of them, so it will not be modified
running result:
The effect is like this, union, as long as it is one of them, it will be marked. Note that multiple selectors are connected by commas.
Writing is not easy, if it helps you after reading, thank you for your support!
If you are a computer terminal, there is "one-key triple connection" in the lower right corner, right click it [haha]
Come on!
Work together!
Keafmd