Can choose the target element label more accurately and finely
Descendant selector
-
Select descendants of elements or groups of elements
-
Write the outer label on the front, the inner label on the back, separated by spaces , and write the father and grandfather first, then the son and grandson.
-
The inclusion selector connects two simple selectors with spaces. The front selector indicates the contained objects, and the latter selector indicates the contained objects.
<style>
#red p{
color:red;
}
</style>
<body>
<div class="red">
<p>aaaaa </p>
</div>
</body>
- Can choose any included label.
Child element selector
- The child element selector can only select elements that are child elements (pro-sons) of an element
- The child selector uses a sharp angle (>) to connect two simple selectors, the front selector represents the contained parent object, and the rear selector represents the contained child object.
- Its wording is to label EDITORIAL parent, child label written on the back, in the middle with a
>connection - Advantages: Compared with the descendant selector, the matching range is smaller, and from the hierarchical structure, the matching target is more clear.
- Disadvantages: Compared with the inclusion of selectors, the matching range is limited, and you need to be familiar with the document structure.
<style>
div>p{
color:red;
}
</style>
<body>
<div>
<p>aaaaa </p>
</div>
<div>
<p>aaaaa </p>
</div>
</body>
Intersection selector
- The intersection selector is composed of two selectors, and the labels found must meet: both the characteristics of label one and the characteristics of label two.
- The first is a tag selector, the second is a class selector
- There can be no spaces between the two selectors , such as h3.special.
Union selector
-
If some selectors define the same style, you can use union selectors
-
The group selector uses a comma (,) to connect two simple selectors. The elements matched by the previous selector and the elements matched by the latter selector are mixed together as the result set of the group selector.
-
Union selectors are often used to collectively declare
| Selector | effect | feature | Usage | Separator and usage |
|---|---|---|---|---|
| Descendant selector | Used to select descendants of elements | Is to select all descendants | More | The symbol is a space. Nav a |
| Child selector | Select the most recent element | Only choose a son | less | The symbol is **> **. Nav> p |
| Intersection selector | Select the part where two labels meet | Both and | less | No symbol p.one (tag selector class selector) |
| Union selector | Select some selectors of the same style | Can be used for collective declarations | More | The symbols are commas .nav, .header |
