Codewords are not easy, and helpful students hope to pay attention to my WeChat public account: Code program life, thank you! The code is self-used and fetched.
The difference between CSS pseudo-classes and pseudo-elements
Pseudo-classes
-
The core is used to select information outside the DOM tree, elements outside the document that cannot be selected by ordinary selectors, to add some special effects of the selector.
-
比如:hover :active :visited :link :visited :first-child :focus :lang等。
-
Since the state change is non-static, when the element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style.
-
It can be seen that its function is similar to class, but it is based on abstraction outside of the document, so it is called pseudo-class.
Pseudo-elements
-
There are no virtual elements defined in the DOM tree.
-
The core is the need to create elements that do not usually exist in the document
-
For example::before ::after It selects the specified content of the element, which means the content before or after the content of the selected element.
-
There is no difference between the content and the element controlled by the pseudo-element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo-element. Used to add special effects to certain selectors.
The difference between pseudo-class and pseudo-element
Representation method:
-
Pseudo-classes and pseudo-elements in CSS2 are more than colon: means.
-
After CSS2.1, it is stipulated that pseudo-classes are represented by single colons, and pseudo-elements are represented by double colons ::.
-
Browsers also accept the single colon notation of pseudo-elements that existed in the CSS2 era (:before, :after, :first\ufffeline, :first-letter, etc.).
-
All new pseudo-elements (such as ::selection) after CSS2 should be written with double colons.
-
In CSS3, pseudo-classes and pseudo-elements are also different in syntax, and pseudo-elements are modified to start with ::. Browsers also continue to support pseudo-elements beginning with:, but the recommended way of writing is:: beginning
Different definitions:
-
Pseudo-classes are fake classes. Classes can be added to achieve the effect
-
Pseudo-elements are fake elements, you need to add elements to achieve the effect
to sum up:
-
Both pseudo-classes and pseudo-elements are used to represent "elements" outside the document tree.
-
Pseudo-classes and pseudo-elements are represented by single colon: and double colon:: respectively.
-
The key point of the difference between pseudo-element and pseudo-element is whether there is no pseudo-element (or pseudo-element), do you need to add an element to achieve the effect, if it is, it is a pseudo-element, otherwise, it is a pseudo-element.
Similarities
Neither pseudo-classes nor pseudo-elements appear in the source file and the DOM tree. In other words, pseudo-classes and pseudo-elements cannot be seen in the html source file.
the difference
- Pseudo-classes are actually different states based on ordinary DOM elements, and they are a characteristic of DOM elements.
- Pseudo-elements can create abstract objects that do not exist in the DOM tree, and these abstract objects can be accessed.
Please draw the css box model, based on the principle of the box model, explain how the relative positioning, absolute positioning, and floating implementation styles are implemented
CSS box model:
Any element on the page can be regarded as a box. The box occupies a certain space and position. They restrict each other and form the layout of the web page.
The composition of W3C's box model: content, border, padding, margin
IE box model and standard box model
The only difference between the IE model and the standard model is the way the content is calculated.
- IE box model, width=content+padding
- Standard box model, width=content
Different positioning:
1. Relative positioning
Relative (relative positioning) objects cannot be stacked and do not deviate from the document flow. They can be positioned by top, bottom, left, and right with reference to their static position, and can be hierarchically graded by z-index.
2. Absolute positioning
Absolute (absolute positioning) is separated from the document flow and positioned through top, bottom, left, and right. Select the nearest parent object with positioning settings for absolute positioning. If the object's parent does not set the positioning attribute, the absolute element will be positioned at the origin of the body coordinate, which can be hierarchically classified by z-index.
3. Floating
Leaving the document flow, that is, removing the elements from the normal layout and typesetting. When other boxes are positioned, they will be positioned as if the elements deviating from the document flow do not exist.
List the categories of css selectors in the list, and write at least the differences between the three css selectors, applicable scenarios
CSS selector
The most basic selectors are: label selector, class selector, ID selector .
Other selectors:
- Adjacent selector (h1+p)
- Child selector (ul> li)
- Descendant selector (li a)
- Wildcard selector (*)
- Attribute selector (a[rel = "external"])
- Pseudo-class selector (a:hover, li:nth-child)
Some common selectors:
- Asterisk
The asterisk will select every element on the page. Many developers use it to clear margin and padding. Of course, it’s okay to use this when you practice, but I don’t recommend using it in a production environment. It will add a lot of unnecessary things to the browser. * Can also be used to select all child elements of an element.
#container * {
border：1px solid black；
}
- id selector
Use # in the selector to locate an element with id. People usually use it this way, and then everyone has to be very careful when using it. Need to ask yourself: Do I have to assign an id to this element to locate it?
The id selector is very strict and you cannot reuse it. If possible, first try to use tag names, new elements in HTML5, or pseudo-classes.
- Class selector
class selector. It is different from the id selector in that it can locate multiple elements. You can use class when you are styling multiple elements. When you want to modify a specific element that is to use id to locate it.
- Descendant selector xy
li a {
color:red;
}
If you want to locate the element more specifically, you can use it. For example, you don't need to locate all a elements, only the a tag under the li tag? At this time you need to use the descendant selector.
If your selector is like XYZA B.error, then you are wrong. I always remind myself whether I really need to modify so many elements.
- Label selector
a {
color: red; }
ul {
margin-left: 0; }
If you want to locate all certain tags on the page, not by id or class, it is simple, use the type selector directly.
- X:visited and X: link
/* :link这个伪类来定位所有还没有被访问过的链接 */
a:link {
color:red; }
/* :visited来定位所有已经被访问过的链接 */
a:visited {
color: purple; }
- x + y
ul + p {
color: red;
}
Adjacent selector. It directs the selection of the immediate successor element of the specified element. The example above is to select the first paragraph after all ul tags and set their colors to red.
- x > y
div#container > ul {
border: 1px solid black;
}
The difference between XY and X> Y is that the latter commander selects its direct children.
- x ~ y
ul ~ p {
color : red;
}
The sibling node combination selector is very similar to X+Y, but it is not so strict. The ul + p selector will only select those elements next to the specified element. And this selector will select all matching elements following the target element.
- X[title]
a[title] {
color : green;
}
Attribute selector, in the above example, only elements with title attribute will be selected. Those anchor tags that do not have this attribute will not be decorated by this code.
- X:checked
input[type=radio]:checked {
border: 1px solid black;
}
The above pseudo-category can locate the selected single-select boxes and multiple-select boxes.
- X:after
These two pseudo-classes before and after. It seems that every day everyone can find creative ways to use them. They will generate some content around the selected label.
- X:nth-child(n)
li :nth-child(3) {
color : red;
}
Note that nth-child receives an integer parameter, and then it does not start from 0. If you want to get the second element then the value you pass is li:nth-child(2).
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat public account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible Number, please pay attention, thank you
After paying attention to the official account , reply to the front-end interview questions and receive a large number of front-end interview questions summary pdf data
