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

This article will explain in detail what CSS selectors are about, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Compound selector

Union selector: multiple type selectors separated by commas between div,span,p {} in order for multiple selectors to set the same style.

Descendant selector: all li in ul li {} ul are styled, including li in ul, a child element in li. That is, the grandson of ul1.

Direct descendant selector: ul > li {} ignore the subclass li after the parent class, regardless of the li in the subclass ul after the subclass.

Pseudo selector

Pseudo element selector: using with selector

1.first-line selector

2.first-letter selector

3.before {content: ""} (preceded by text)

4.after {content: ""}

Pseudo-class selector: selects the location of elements such as li in ul based on element location

Nth-child selector: based on the location of the index element, starting at 1

Child element selector:

1.nth-child (n): selects the nth element of the element as a selector.

N=odd odd number; n=even even number

2.nth-last-child (n): reciprocal index

First-child: ul li:first-child {}

Last-child: ul li:last-child {}

Dynamic pseudo-class selector

1. (: link): specify the style when the link is not clicked

2.vistited: the effect of the link being accessed. Generally, because the browser cache displays errors.

3.hover: the style of mouse hover

4.active: the style when the user clicks

5.focus: get the style when focusing

Add:

CSS is not strict about case, but it still has to write a standard.

Weight size comparison:

The weight of an inline style sheet is 1000

The weight of the ID selector is 1000

The weight of the Class class selector is 10

The weight of the HTML tag selector is 1

Priority: important > inline style > id > class > tag | pseudo class | attribute selector > pseudo element > wildcard (*) > inheritance

This is the end of this article on "what are the CSS selectors?". 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, please 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.