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

This article is about how to carry out css pseudo-element selector analysis, the editor thinks it is very practical, so share it with you to learn, hope you can get something after reading this article, say no more, follow the editor to have a look.

Pseudo class

/ *

Pseudo element selector:

The effect of pseudo elements can only be achieved by adding an actual element.

There are four pseudo-element selectors in CSS:

: first-line: use the style for the first line of text of an element

: first-letter: use the style for the first letter or first word of text in an element

: before: insert something before an element

: after: insert something after an element

, /

P:first-line {background-color:yellow;}

P:first-letter {color:blue;}

P:before {content: "this is:";}

P:after {content: "! it's over";}

/ *

Pseudo-class selector:

Unlike the element style in normal DOM, it does not change any DOM content.

Just insert elements that decorate the class that are visible to the user but not visible to DOM.

The effect of pseudo-classes can be achieved by adding an actual class.

Several pseudo-class selectors are commonly used on an element, such as a:link | a:visited | a:hover | a: active`

Tip: in the definition of CSS, a:hover must be placed after a:link and a:visited to be valid.

Tip: in the definition of CSS, a:active must be placed after a:hover to be valid.

Structural pseudo-class selector

: root () selector, literally we can clearly understand that it is the root selector, which means to match the root element of the document in which the element E is located. In HTML documents, the root element is always. The ": root" selector is equivalent to an element

The: not () selector is called a negative selector, just like the: not selector in jQuery, and you can select all elements except an element.

The empty () selector is empty. Used to select elements without any content, which means that there is no content at all, even a space.

: target () selector to specify a style for a target element on the page whose id is used as a hyperlink in the page, which works only after the user clicks on the hyperlink on the page and jumps to the target element

The: first-child () selector represents element E that selects the first child of the parent element. To put it simply, it is to select the first child element of the element, remembering that it is a child element, not a descendant element.

: nth-child () selects one or more specific child elements of an element

: nth-child (length); / * Parameter is a specific number

: nth-child (n); / * the parameter is nMagine n, which is calculated from 0

Multiple selection of nth-child (n*length) / * n, where n is calculated from 0

: nth-child (n+length); / * Select elements that are greater than length

: nth-child (- n+length) / * Select elements that are less than the front of length

: nth-child (n*length+1); / * indicates how many times to choose

/ / the above length is an integer

: nth-last-child () selects a specific element by starting with the last child element of a parent element.

: nth-of-type (n) "selector to locate some type of child element in the parent element

, /

: not (p) {color:red;}

: empty {width:100px;height:20px;background:red;display: inline-block;}

: target {background:blue;}

Div p:first-child {background:gray;}

Div p:nth-child (2n) {background:yellow;}

Pseudo-element selector: the effect of pseudo-elements can only be achieved by adding an actual element. There are four pseudo-element selectors in CSS:

: first- line: use the style for the first line of text of an element

: first-letter: use the style for the first letter or first word of text in an element

: before: insert something before an element

: after: insert something after an element

AAAAAAAA

BBBBBBBB

AAAAAA

BBBBBBB

1111

2222

333333

444444

The above is how to analyze the css pseudo-element selector. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.