CSS3 new selector
CSS3 adds attribute selector, structure pseudo class selector and pseudo element selector to us. Let us choose the target elements more conveniently and freely.
1, Attribute selector
the attribute selector can select elements according to the specific attributes of the element, so it can not use the class or id selector.
| Selector | brief introduction |
|---|---|
| E[att] | Select the E element with att attribute |
| E[att="val"] | Select the E element with att attribute and attribute value equal to val |
| E[att^="val"] | Select the E element with att attribute and attribute value starting with val |
| E[att$="val"] | Select the E element with att attribute and attribute value ending with val |
| E[att*="val"] | Select the E element that has the att attribute and the attribute value contains val |
- E[att]: select an e element with ATT attribute
- E[att = "val"]: select e element with ATT attribute and attribute value equal to val [key]
- E[att ^ = "Val"): select the E element with ATT attribute and attribute value starting with val
- E[att $= "Val"): select the E element with ATT attribute and attribute value ending with val
- E[att * = "Val"): select the E element with ATT attribute and attribute value containing val
[note] the weight of the attribute selector is 0, 0, 1, 0. Same as class selector weights. Selector weight problem
2, Structure pseudo class selector
structure pseudo class selector mainly selects elements according to the document structure. It is often used to select child elements according to the parent selector.
| Selector | brief introduction |
|---|---|
| E:firse-child | Matches the first child element E in the parent element |
| E:last-child | Matches the last child element E in the parent element |
| E:nth-child(n) | Matches the nth child element E in the parent element |
| E:first-of-type | Matches the first child element of the specified type E |
| E:last-of-type | Matches the last child element of the specified type E |
| E:nth-of-type(n) | Matches the nth child element of the specified type E |
- E: Fire child and E: last child: match the first and last child elements
- E: Nth child (n): one or more specific child elements of a selector element can be selected. The parameter n after the bracket can be a number, a keyword, or a formula.
number: select the nth child element, starting from 1.
Keywords: even, odd.
formula: the common formula is as follows (if n is a formula, it starts from 0, but the element does not have the 0th or when n exceeds the number of child elements, it will be ignored)
| formula | Value |
|---|---|
| n | All child elements |
| 2n | even numbers |
| 2n+1 | Odd number |
| 5n | Multiple of 5 |
| n+5 | From the fifth to the last |
| -n+5 | The first 5 (including the fifth) |
e: first of type, e: last of type and E: nth of type (n) are similar to e: first child, e: last child and E: nth child (n), with the following differences:
-
E: First child (n): it means to find the nth child element directly in the parent element, and then judge whether it is a given type E. if yes, the writing style is valid, and if not, it will not be valid.
-
E: First of type (n): it means to find and sort all the child elements of type E in the parent element, and then select the nth of the found e child elements. If any, set it to the corresponding style. If not, it will not take effect.
3, Pseudo element selector [key]
pseudo element selector can help us create new tag elements with CSS without HTML tags, so as to simplify the HTML structure.
the two important pseudo elements are:: before,:: after. Pseudo elements are preceded by two colons.
-
:: before: inserts content before the inside of the element
-
: After: inserts content after the inside of the element
[Note:]
- Elements created before and after are inline elements
- The element created by before and after cannot be found in the document tree, so it is called a pseudo element
- Syntax: element::before {}
- before and after must have content attribute
- The pseudo element selector has the same weight as the label selector: 0,0,0,1
Pseudo element selector usage scenario 1: pseudo element Font Icon
make the following figure with pseudo elements:
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
margin: 5px auto;
}
div::after{
content: '\e609'; // Lower triangle icon coding
font-family: 'iconfont'; // Ali Font Icon
position: absolute;
top: 8px;
right: 10px;
}
for the use of font icons, see: Use of CSS font icons
Pseudo element selector usage scenario 2: imitation potato video effect
use pseudo elements to add mouse over display mask layer for potato video:
<style>
.tudou {
position: relative;
display: inline-block;
font-family: "iconfont";
width: 220px;
height: 125px;
border: 1px solid red;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::after { // Add pseudo element
content: "";
display: none;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(85, 56, 56, 0.6) url(images/bofang.png) no-repeat center;
}
.tudou:hover::after{ // Move the mouse to tudou to display the after in it
display: block;
}
</style>
<body>
<div class="tudou">
<img src="images/shipin1.png" alt="">
</div>
<div class="tudou">
<img src="images/shipin2.png" alt="">
</div>
<div class="tudou">
<img src="images/shipin3.png" alt="">
</div>
</body>
Pseudo element selector usage scenario 3: pseudo element floating
why to clear floating: when the parent box has no height and the child box has floating, the height of the parent box will be 0 (because the floating element does not occupy a position), which will affect the following standard flow box. Video link
<style>
.one {
border: 1px solid red;
}
.one span{
/* float: left; */ // Floating code
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="two"></div>
</body>
div before neutron box floating:
after adding floating to div neutron box:
- Additional labeling method to remove floating (partition method): method recommended by W3C
add an empty block level element after the floating element:
<style>
.one {
border: 1px solid red;
}
.one span{
float: left;
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.cc{ // Additional label clear left and right float
clear: both;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
<div class="cc"></div> // Additional labels added
</div>
<div class="two"></div>
</body>
- Add overflow to parent
you can add an overflow attribute to the parent and set its attribute value to hidden, auto or scroll.
<style>
.one {
border: 1px solid red;
overflow: hidden; //Parent add clear floating code
}
.one span{
float: left;
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="two"></div>
</body>
- An upgrade and optimization of additional labeling method when pseudo elements are clearly floating
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
you should be clear about the parent element of the floating. You can clear the floating by adding the class clearfix. The principle is the same as the additional labeling method.
// More common writing
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}