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

Editor to share with you what selectors have been added to css3, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's learn about it together.

New selections for css3 include: ": first-of-type", ": last-of-type", ": last-child", ": root", ": empty", ": target", ": enabled", ": disabled", ": valid" and so on.

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

To use css to achieve one-to-one, one-to-many, or many-to-one control of elements in a HTML page, you need to use a CSS selector.

The elements in the HTML page are controlled through the CSS selector.

The CSS selector is used to select the pattern of the style of the element you want.

New selector for css3

The new selector added by CSS3 is mainly divided into four categories: attribute selector, relational selector, structured pseudo-class selector and pseudo-element selector.

1. Attribute selector

The attribute selector can select tags based on the attributes and attribute values of web page tags.

Attribute selector mainly includes E [at ^ = value], E [att $= value] and E [att * = value].

2. Relationship selector

The relational selector in CSS3 mainly includes descendant selector and sibling selector.

(1) relationship selector

(2) near sibling selector

(3) ordinary brother selector

3. Structured pseudo-class selector

Structured pseudo-class selectors can reduce the definition of class and id attributes within a document, making the document more concise.

4. Pseudo element selector

A pseudo-element selector is usually a tag followed by an English colon ":" and followed by a pseudo-element name.

List of selector added by css3

The selector example illustrates the CSSelement1~element2p~ul selection

Each ul element after the element 3 [attribute^ = value] a [src ^ = "https"] Select the value of each src attribute starting with "https" element 3 [attribute$=value] a [src$= ".pdf"] Select the value of each src attribute 3 [attribute*=value] a [src*= "44lan"] Select the value of each src attribute including the element 3:first-of-typep:first-of-type of the substring "44lan"

Element is the first of its parent

element

3:last-of-typep:last-of-type selects each

Element is the last of its parent

element

3:only-of-typep:only-of-type selects each

Element is the only one of its parent

element

3:only-childp:only-child selects each

Element is the only child element of its parent

3:nth-child (n) p:nth-child (2) Select each

Element is the second child element of its parent

3:nth-last-child (n) p:nth-last-child (2) Select each

Element is the second child element of its parent, counting from the last child

3:nth-of-type (n) p:nth-of-type (2) Select each

Element is the second of its parent

element

3:nth-last-of-type (n) p:nth-last-of-type (2) Select each

Element is the second of its parent

Element, counting from the last child

3:last-childp:last-child selects each

The element is the last child of its parent.

3:root:root selects the root element of the document 3:emptyp:empty selects each without any children

Elements (including text nodes)

3:target#news:target selects the currently active # news element (URL containing the click of the anchor name) 3:enabledinput:enabled selects each enabled input element 3:disabledinput:disabled selects each disabled input element 3:checkedinput:checked selects each selected input element 3:not (selector): not (p) selects each not

The element of an element

3::selection::selection matches elements that are selected or highlighted by the user and whose 3:out-of-range:out-of-range match values are outside the specified range.

Elements with 3:in-range:in-range matching values within a specified range 3:read-write:read-write to match readable and writable elements 3:read-only:read-only to match elements that set the "readonly" (read-only) attribute 3:optional:optional to match the optional input element 3:required:required to match elements with the "required" attribute set 3:valid:valid for matching input Element 3:invalid:invalid whose input value is legal is used to match element 3 whose input value is illegal.

Extended knowledge: selector list of css1 and css2

The selector example shows that CSS.class.intro selects all elements of class= "intro" 1#id#firstname selects elements of all id= "firstname" 1 elements * Select all elements 2elementp selects all

Element 1element.elementdiv.p Select all elements and

Element 1element elementdiv p selects all within the element

Element 1element > elementdiv > p Select all parents of the element

Element 2element+elementdiv+p selects all immediately after the element

Element 2 [attribute] [target] Select all elements with target attributes 2 [attribute=value] [target=_blank] Select all elements using target= "_ blank" 2 [attribute~=value] [title~=flower] Select all elements whose title attribute contains the word "flower" 2 [attribute | = language] [lang | = en] Select all elements of a lang attribute starting value = "EN" 2:linka:link Select all unaccessed links 1:visiteda:visited Select all visits Passed Link 1:activea:active Select active Link 1:hovera:hover Select Mouse over the link 1:focusinput:focus selects the input element 2::first-letterp::first-letter with focus

Choose each one.

The first letter of the element

1::first-linep::first-line

Choose each one.

The first line of the element

1::first-childp::first-child

Specifies that only if

The element is the style of the first child of its parent.

2::beforep::before

In each

Insert content before element

2::afterp::after

In each

Insert content after the element

2::lang (language) p:lang (it) Select the starting value of a lang attribute = all of "it"

element

2 above are all the contents of the article "what selectors have been added to 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!

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.