Pseudo-elements are often misunderstood as pseudo-classes, mainly because their syntax is similar, and they are both extensions of selector functions. The high degree of similarity leads to confusion. This article introduces pseudo-elements and common usage methods in detail, and finally analyzes the basic differences between pseudo-elements and pseudo-classes.
Basic description
CSS pseudo-elements are also keywords applied to selectors that allow changing the style of specific parts of the selected element. Generally, it is used to insert new content before and after the content of the element, or change the style of the first letter and the first line, etc.
Syntax: selector:pseudo-element { property: value; }.
div::before {content: '开始-';color: red;font-size: 15px;
}
The above code is our commonly used ::afterpseudo- element. Add a piece 开始-of content inside the div as the first sub-element of the div, and you can set different style attributes.
Common Pseudo-Elements
The following list lists the currently available pseudo-elements:
| pseudo element | describe |
|---|---|
| ::after | As the first child element of the selected element. |
| ::before | As the last child element of the selected element. |
| ::first-letter | Select 块元素the first letter of the first row and apply the style. |
| ::first-line | The first row selected 块元素, with the style applied. |
| ::selection | Applied to the part of the document that is selected by the user, such as selecting text with the mouse. |
| ::file-selector-button | Represents input(file)the label button, which is used to change the button style. |
| ::marker | Style applied to marker points on list-item elements. |
| ::slotted | Used to select elements that are placed in the HTML template. |
| ::part | Applied to any element matching the part attribute in the shadow-dom of Web components. |
Among them, ::beforeand ::aftershould be the pseudo-elements we use the most, and other pseudo-elements also have their own characteristics and functions. Here is an example to show some of them.
Example:
<div class="province"><span>中国中部的省份</span><ul><li>湖北</li><li>湖南</li></ul><input type="file" />
</div>
.province::first-letter {color: #f00;font-size: 20px;
}
.province::before {content: '选择'
}
::selection {background-color: #ff0;
}
li::marker {color: #f00;
}
input::file-selector-button {border: 1px solid #f00;font-size: 20px;border-radius: 5px;
}
The page is rendered, as shown below:
- ::before adds a text content
选择. - ::first-letter changes the font size of the first letter, changes the color to red, and changes the text of
::beforethe element because::beforeis the content of the first line of child elements. - ::file-selector-button changes the button style of the file upload control, adding red borders, rounded corners, and font size.
- ::marker changes the list elements, the dots in front of each line are red (default is black).
- ::selection When the mouse selects the content area, the background color will change to yellow.
Note: The before pseudo-element, as the first child element, will be selected and styled by first-letter. > In the future, when we want to beautify the file upload control, pseudo-elements
::file-selector-buttonare also an available choice.
::before 和 ::after
These two pseudo-elements are the most commonly used in our front-end development, this section specifically details their basic usage.
::beforeCreates a pseudo-element as the first child of the selected element; ::aftercreates a pseudo-element as the last child of the selected element. They usually display a piece of text content, and you need to use contentthe attribute to add content to the element, which is an inline element by default. It is generally used to insert a piece of content, text or small icon, etc. at the beginning and end of the element.
Note: Cannot be applied to replacement elements, such as img, br and other elements.
content attribute
The content attribute is mainly used ::beforeto ::afterinsert content in and two pseudo-elements. Its value range:
- none: no pseudo-elements
- normal: basically equal to none
- string: string text content
- uri: Specify an external resource, usually a picture, if the resource cannot be displayed, it will be ignored or a placeholder will be displayed
- counter: counter function
- attr(X): Returns the X attribute of the element as a string.
- open-quote|close-quote: front and back quotes, such as double quotes, single quotes, etc.
- no-open-quote|no-close-quote: do not generate content
example
<div class="wrap"><label>请选择您所在的城市</label>
</div>
.wrap::before {content: '开始-';color: #f00;
}
.wrap::after {content: url(./home.png);
}
label::before{content: open-quote;color: #f00;
}
label::after{content: close-quote;color: #f00;
}
The page is rendered, as shown below:
In the above code, add text content in div.wrapfront of , red text 开始-; add image resources div.wrapafter home.png; labelby adding andopen-quote attribute values before and after the element, double quotes are added, and the style attribute can be set to red.close-quote
Rendering of pseudo-elements
In addition, we need to understand that the reason why a pseudo-element adds a pseudo-word is that although it creates a new element as a sub-element of a selected element, it does not exist in the DOM document tree, but is just a logic virtual presentation on . However, some pseudo-elements can be viewed in the developer tools of the current browser, which can facilitate our debugging.
::beforeAs shown in the figure above, there are no pseudo-elements in the dom document structure on the left, and three::after pseudo-elements can be seen in the developer tools of the browser on the right .::marker
The difference between pseudo-elements and pseudo-classes
Pseudo-elements and pseudo-classes are often confused because they are similar in writing. It is more common to describe pseudo-elements as pseudo-classes. Although there is no big impact, we also need to understand the difference between them:
- Pseudo-classes change the element style according to the state, just to expand and make up for the shortcomings of the selector; while pseudo-elements create virtual new elements logically, and can add styles to the new elements.
- Pseudo-classes use single colons. CSS3 introduces double colons in pseudo-elements to distinguish pseudo-classes from pseudo-elements. Pseudo-elements also support single colons. In order to facilitate the distinction, you can always use double colons for pseudo-elements.
- A selector can follow multiple pseudo-classes at the same time and work together, but pseudo-elements will not work if they follow multiple selectors.
/*对第一个div元素应用hover状态的样式*/
div:first-child:hover {color: #ddd;
}
/*无效，没有伪元素会产生*/
.province::before::first-letter {content: '选择';color: #f00;font-size: 20px;
}
The above code, when using multiple pseudo-elements, the code will fail, no new elements will be created, and the styles will not work.
at last
Organized 75 JS high-frequency interview questions, and gave answers and analysis, which can basically guarantee that you can cope with the interviewer's questions about JS.
Friends in need, you can click the card below to receive and share for free