First of all, CSS3 has added selectors to make it easier and more free to select target elements, adding three types:
Attribute selector, structure pseudo class selector and pseudo element selector. Next, I'll introduce them to you respectively
1, Attribute selector:
Literally, elements are selected according to the attributes in the tag. There are five types:
1.E[att] select the E element with ATT attribute
2.E[att="val"] select the E element with ATT attribute and attribute value equal to val
3.E[att^="val"] matches the E element with ATT attribute and value starting with val
4.E[att$="val"] matches the E element with ATT attribute and value ending with val
5.E[att*="val"] match the E element with ATT attribute and val in the value
2, Structure pseudo class selector:
1. E: first child # matches the first child element E of the parent element
<head>
<style>
/* Choose the first child in ul, little li */
ul li:first-child {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
2. E: last child ， matches the last e element in the parent element
<head>
<style>
/* Choose the last child in ul, little li */
ul li:last-child {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
3. E: Nth child (n) matches the nth element of the parent element
<head>
<style>
/* Select the second child in ul, li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* Choose the sixth child in ul, li */
ul li:nth-child(6) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
4. E: First of type specifies the first of type E
<head>
<style>
ul li:first-of-type {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
5. E: last of type ， specifies the last of type E
<head>
<style>
ul li:last-of-type {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
6. E: nth of type (n) specifies the nth of type E
<head>
<style>
ul li:nth-of-type(even) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>I am the first child</li>
<li>I'm the second child</li>
<li>I'm the third child</li>
<li>I'm the fourth child</li>
<li>I'm the fifth child</li>
<li>I'm the sixth child</li>
<li>I'm the seventh child</li>
<li>I'm the eighth child</li>
</ul>
</body>
7. Key points: the difference between E: nth child and E: nth of type
E: Nth child (n) matches the nth child element E of the parent element, that is, Nth child sorts all children in the parent element (the sequence number is fixed). First find the nth child, and then see if it matches E
E: Nth of type (n) matches the nth sibling element E of the same type, that is, sort and select the specified child elements in the parent element. First match e, and then find the nth child according to E
3, Pseudo element selector:
1.::before insert content in front of the element
2.::after inserts content after the inside of the element
be careful:
before and after create an element, but they are inline elements
The newly created element cannot be found in the document tree, so we call it pseudo element syntax: element::before {}
before and after must have content attribute
Before creates an element before the parent element content, and after inserts an element after the parent element content
The pseudo element selector, like the label selector, has a weight of 1
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before The weight is 2 */
div::before {
/* This content must be written */
/* display: inline-block; */
content: 'I';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: 'Peppa Pig';
}
</style>
</head>
<body>
<div>yes</div>
</body>
The above is my share. I hope you can gain something