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

Today, I will talk to you about the attribute selectors and structured pseudo-classes in CSS, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Attribute selector

Attribute name selector

Format: label signature [attribute name]

Example:

CSS Code copies content to the clipboard

Img [title] {border:2px solid blue;}

Tip: in general, people often set the same value for the alt and title properties. The text in the alt property is displayed when the picture cannot be loaded for some reason, or is read aloud by the screen reader. The title property displays a prompt containing the appropriate text when the user moves the mouse over the picture.

Attribute value selector

Format: [attribute name = "attribute value"]

Example:

CSS Code copies content to the clipboard

Img [title= "red flower"] {border:4px solid green;}

Note: in HTML5, the quotation marks of attribute values can be added or not, and it is recommended to add them for the sake of clarity.

Structured pseudo class

Structured pseudo-classes can apply styles based on the structure of the tag, such as what the parent or sibling element of an element is.

First-child and: last-child

Format:

CSS Code copies content to the clipboard

E:first-child

E:last-child

Example:

CSS Code copies content to the clipboard

Ol.results li:first-child {color:blue;}

Nth-child

Format:

CSS Code copies content to the clipboard

E:nth-child (n)

Example:

CSS Code copies content to the clipboard

Li:nth-child (3)

Description: e for element name, n for a numeric value (you can also use odd or even)

After reading the above, do you have any further understanding of the property selectors and structured pseudo-classes in CSS? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.