What are the new selectors in css3?

Editor to share with you what new selector css3 has, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Css3 added selector: "[attribute ^ = value]", "[attribute$=value]", "[attribute*=value]", ": first-of-type", ": root", ": empty", ": target", and so on.

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

1. Attribute selector:

1. [attribute ^ = value] matches each element whose attribute value begins with the specified value.

2. [attribute$=value] matches each element whose attribute value ends with the specified value.

3. [attribute*=value] matches each element that contains the specified value in the attribute value.

II. Pseudo-element and pseudo-class selector: the selector example shows that CSS:first-of-typep:first-of-type selects the first p element in which each p element is its parent, 3:last-of-typep:last-of-type selects the last p element in which each p element is its parent, 3:only-of-typep:only-of-type selects the only p element in which each p element is its parent. Child selects the only child element of each p element that is its parent 3:nth-child (n) p:nth-child (2) selects the second child element 3:nth-last-child (n) p:nth-last-child (2) of which each p element is its parent Select the second p element 3:nth-last-of-type (n) p:nth-last-of-type (2) each p element is its parent from the last child count 3:nth-of-type (n) p:nth-last-of-type (2) each p element is the second p element of its parent, and each p element is the last child of its parent from the last child count 3:last-childp:last-child. 3:root:root Select the root element of the document 3:emptyp:empty Select each p element without any children (including text nodes) 3:target#news:target Select the currently active # news element (URL containing the click of the anchor name) 3:enabledinput:enabled Select each enabled input element 3:disabledinput:disabled Select each disabled input element 3:checkedinput:checked Select each selected input Element 3:not (selector): not (p) selects the part of the 3::selection::selection matching element that is not a p element that is selected by the user or is highlighted. The 3:out-of-range:out-of-range matching value of the input element outside the specified interval is within the specified range. The input element 3:read-write:read-write is used to match readable and writable. The element 3:read-only:read-only is used to match the element 3:optional:optional that sets the "readonly" (read-only) attribute, the optional input element 3:required:required is used to match the element 3:valid:valid with the "required" attribute set, and the element 3:invalid:invalid is used to match the element whose input value is legal. 3. Hierarchical selector:

Ethereal F

Universal selector (find all the following peer elements)

Select the matching F element and all matching F elements that follow the matched E element

The above is all the contents of the article "what are the new selectors for css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!