css pseudo-element selector_html/css_WEB-ITnose

Pseudo-class /* Pseudo-element selector:

The effect of pseudo-element needs to be passed This can only be achieved by adding an actual element. There are the following four pseudo-element selectors in CSS: · :first-line: Use styles for the first line of text in an element; · :first-letter: Use styles for the first line of text in an element Use styles for the first letter or first word of text; · :before: Insert some content before an element; · :after: Insert some content 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:

It is different from the general element style in DOM. Change any DOM content. just inserts some modified elements, which are visible to the user but invisible to the DOM. The effect of pseudo-class can be achieved by adding an actual class.

Commonly used pseudo-class selectors are those used on the a element, `such as a:link|a:visited|a:hover|a:active` Tip: In the CSS definition, a:hover must be placed after a:link and a:visited to be effective. Tip: In the CSS definition, a:active must be placed after a:hover to be effective.

Structural pseudo-class selector :root() selector, literally we can clearly understand it as a root selector, which means matching the root element of the document where element E is located. In an HTML document, the root element is always . The ":root" selector is equivalent to the element . The :not() selector is called a negative selector. It is exactly the same as the :not selector in jQuery and can select all elements except a certain element. The :empty() selector represents empty. Used to select elements without any content. No content here means no content at all, even a space. :target() selector is used to specify a style for a target element on the page (the id of the element is used as a hyperlink in the page). This style is only used when the user clicks on the hyperlink in the page and jumps. It works after reaching the target element :first-child() selector means selecting the element E of the first child element of the parent element. A simple understanding is to select the first child element in the element. Remember 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);/*The parameter is a specific number :nth-child(n) ;/*The parameter is n, n starts from 0 :nth-child(n*length)/*Select a multiple of n, n starts from 0 :nth-child(n length);/* Select the element after length that is greater than length :nth-child(-n length)/* Select the element before length that is less than length :nth-child(n*length 1);/* means select every other element //The above length is an integer :nth-last-child() starts from the last child element of a parent element to select a specific element. :nth-of-type(n)" selector to locate child elements of a certain type 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 a pseudo-element can be achieved by adding an actual element. There are the following four pseudo-element selectors in CSS: :first- line: is the first line of text of an element. Use styles; · :first-letter: Use styles for the first letter or first word of text in an element; · :before: Insert some content before an element; · :after: Insert some content after an element;

AAAAAAAAA BBBBBBBB AAAAAA BBBBBBB

1111

2222

333333&lt ;/p> 444444

css pseudo-element selector_html/css_WEB-ITnose

Related articles