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

This article mainly explains "what are the common attribute selectors in css3 and how to use them?" the content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the common attribute selectors in css3 and how to use them?"

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

The attribute selector can select tags based on the attributes and attribute values of web page tags. A property selector is usually followed by a square bracket "[]", and inside the bracket is an attribute or attribute expression, as follows:

The common attribute selectors in CSS3 mainly include E [at ^ = value], E [att $= value] and E [att * = value], as shown below:

(1) E [att^ = value]

For example: div [id ^ = section]

Description: indicates that the match contains the id attribute, and the value of the id attribute is a div tag that begins with the "section" string.

(2) E [att$=value]

For example: div [id$=section]

Description: indicates that the match contains the id attribute, and the value of the id attribute is a div tag that ends with the "section" string

(3) E [att*=value]

For example: div [id*=section]

Description: indicates that the match contains the id attribute, and the value of the id attribute contains the div tag at the beginning of the "section" string.

The relational selector in CSS3 mainly includes the descendant selector and the sibling selector, in which the descendant selector is connected by symbols, and the sibling selector is connected by symbols "+" and "~", as shown below.

(1) relationship selector

For example: H2 > strong

Description: indicates that the child tag strong nested in the H2 tag is selected.

(2) near sibling selector

For example: H3roomp

Description: indicates the first sibling mark p immediately following the selection of the H3 marker.

(3) ordinary brother selector

For example: p~h3

Description: indicates that all the h3 sibling tags of the p tag are selected.

Structured pseudo-class selectors can reduce the definition of class and id attributes within a document, making the document more concise. The commonly used structured pseudo-class selectors are listed below.

: root

Used to match the document root tag, using the style defined by ": root selector", takes effect for all page tags.

: not

For example: body*:not (h3)

Used to exclude the substructure tag h3 in the body structure.

: only-child

For example: li:only-child

Used to match the only child tag (li) that belongs to a parent tag, that is, a parent tag has only one child tag (li).

: first=child

Lets you select the first child tag of the parent element.

: last-child

Lets you select the last child tag of the parent element.

: nth-child (n)

For example: p:nth-child (2)

Represents the second p tag used to select the parent element.

: nth-last-child (n)

For example: p:nth-last-child (2)

Used to represent the penultimate p tag of the parent element.

: nth-of-type (n)

For example: h3:nth-of-type (odd)

Represents the tag used to select the number of odd lines in all H3 tags.

: nth-last-of-type (2)

For example: p:nth-last-of-type (2)

Indicates that it is used to select the penultimate p flag.

: empty

Used to select all tags that have no child tags or whose text content is empty.

A pseudo-element selector is usually a tag followed by an English colon ":", followed by a pseudo-element name, as shown below.

It is important to note that there is no space between the tag and the pseudo-element name. Pseudo-element selectors are common: before selector and: after selector.

: before

For example: p:before

Indicates that content is inserted in front of the content of the p tag.

: after

For example: p:after

Indicates that content is inserted after the content of the p tag.

It is important to note that if you want to add a picture after the text, just change the content after the content property. The basic syntax format is as follows

P: after {content: url ();}

Thank you for your reading, the above is the "css3 common property selectors have and how to use" the content, after the study of this article, I believe you have a more profound understanding of what css3 common property selectors have and how to use this problem, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.