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

This article is about what basic selectors and advanced selectors are available in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

ID selector > class selector > tag selector

Inline style > internal style > external style

* once the structure pseudo-class selector is set, it cannot be changed either in the line or later.

* how to set parity rows by the structure pseudo-class selector and how to change color from the third line?

Nth-cild (2N+3) represents an odd line starting from the third line

Similarly, nth-child (2N+4) represents an even-numbered line starting from the fourth line.

Nth-cild (2N+5) represents an odd line starting from the fifth line

* set the first three:

P:nth-child (- nasty 3) {

Background-color: # b3d4fc

}

* key points using E F:nth-child (n) and E F:nth-of-type (n)

E F:nth-child (n) starts with an element in the parent, regardless of type

E F:nth-of-type (n) looks at the type first and then the position in the parent

Be careful

Child has nothing to do with sub-selector, it can be sub-selection, or descendant selection is controlled by hierarchical selector (such as table tr).

1. Hierarchical selector

Table td descendant selector td is included in table

Div > p child selector p is a child element of div

A brother p change after p1 is to deal with p, p1 is the same and only the adjacent changes below and above do not change.

All brothers after p1, change, p1 remain unchanged.

two。 Structural pseudo-class selector

P:first-child gets the element p as the first child of the parent element

P:last-child gets the element p as the last child of the parent element

P a: the nth an element in nth-child (n) p (even) (odd)

P:first-of-type must be a p element or a child element

P a:nth-of-type (n)

It must be an element of an or a child of a.

3. Attribute selector

A [id] a tag contains id

Of id=111 in the a [id=111] a tag

The a [href*=http] a tag contains the href attribute and all contain http

The a [href&=png] a tag contains the href attribute and ends with png

A [href ^ = http://] a tag contains the href attribute and starts with http://

Thank you for reading! This is the end of this article on "what are the basic selectors and advanced selectors for css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.