Shulou(Shulou.com)06/02 Report--

This article mainly introduces "css:: how to use before". In daily operation, I believe many people have doubts about how to use before in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "css:: how to use before"! Next, please follow the editor to study!

In css, ":: before" means "before". It is a pseudo-class element that is used to create a pseudo-element and set it as the first child of the selected element, and insert it before the rest of the element. The syntax is "element::before {style code}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What does:: before mean in css

In css,:: before is a pseudo-class element that represents the generated content element and the first child element of the abstractable style of the corresponding element, that is, the first child element of the selected element.

With:: before, you can insert what you want to insert in front of the rest of the element, and display it inline by default. :: before needs to use the content attribute to specify the value of the content.

:: befor usage scenarios (such as adding an icon in front of an element)

2019-11-29 15:35:51

/ / add a small alarm clock icon in front of this to use:: befor.test::before {content: url (. / 1597910280\ (1\) .png);} similarities:

1. Pseudo-class object, which is used to set the content before the object.

2.:: before and: before are equivalent

Differences:

: befor is written for Css2, and:: before is written for Css3

: before is more compatible than:: before, but it is recommended to use:: before in H5 development.

Description:

1. Pseudo-class elements should be used with the content attribute.

2. Pseudo-class elements are added by css rendering layer and cannot be operated through js.

3. Pseudo-class object effects are usually activated by hover pseudo-class style.

I think this is a bit of a chicken rib, but I don't need it.

The difference between pseudo elements and pseudo classes

Pseudo class

Pseudo classes are used to select information outside the DOM tree, or information that cannot be represented by a simple selector. The former contains elements that match the specified state, such as visited,:active;, and the latter contains elements from DOM trees that meet certain logical conditions, such as first-child,:first-of-type,:target. The css pseudo-class is used to add special effects to some selectors.

Pseudo element

Pseudo elements are virtual elements that are not defined in the DOM tree. Unlike other selectors, it does not take the element as the minimum selection unit, it selects the content specified by the element. For example: before means to choose

Select the content before the content of the element, that is, ";;: selection indicates that the content of the selected element is selected. Css pseudo elements are used to set special effects to some selectors.

2) grammatical differences

   in CSS3, pseudo-classes are also syntactically different from pseudo-elements, which are modified to start with::. However, for historical reasons, browsers also continue to support pseudo elements that start with:, but it is recommended that the specification start with::.

3) pseudo-class / pseudo-element list

: active Select the element being activated 1:hover Select the element suspended by the mouse 1:link select the unaccessed element 1:visited Select the element that has been accessed 1:first-child Select the element that is the first child of its parent element 2:lang select the element with the specified lang attribute 2:focus select the element with keyboard input focus 2:enable select each started element 3:disable Select each prohibited element 3:checked select each selected element 3:target select the current anchor element 3

:: first-letter selects the first word of the specified element 1::first-line selects the first line of the specified element 1::after inserts content after the content of the specified element 2::before inserts content before the content of the specified element 2::selection selects the content 3 selected by the user in the specified element

Pseudo classes have the same priority as classes, and pseudo elements have the same priority as tags. By the way, how to determine the priority, generally! important > inline style > ID selector > class selector > tag > wildcard > inheritance > browser default properties. There is also a simple calculation method, the weight of the inline stylesheet is 1000, the weight of the ID selector is 100, the weight of the Class selector is 10, the weight of the HTML tag selector is 1, the weight is not actually calculated in decimal, it is just an illustration of the idea, we can add the rules in the selector, compare the weights, the greater the weight, the higher the priority. If the weight is the same, the previous style will be overwritten by the later.

At this point, the study of "in css:: how to use before" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.