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

This article will explain in detail what selectors there are in CSS. 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.

What are the CSS selectors?

There are many selectors in CSS, such as ID selector, class selector, wildcard selector, pseudo-class selector and so on.

1. Tag selector

Syntax: sign {}, eg:h2 {} / / style all H2 elements.

2.ID selector

Syntax: the # id name {} / / id value is unique and cannot be duplicated. Eg:#top {} / / sets the style for id to top elements.

3. Class selector

Syntax: .class {}, eg:.box {} / / style all elements with class values of box.

4. Group selector

Syntax: selector 1, selector 2, selector N {}, eg:#box1,.box2,p {} / / set styles together for id, box1,class, box2 and p elements.

5. Wildcard selector

Syntax: * {}, eg:* {font-size:16px} / / sets the font size of the entire page to 16px.

6. Descendant selector

Syntax: selector 1 selector 2 {}, eg:p.aa {} / / selects the specified descendant .aa of the specified ancestor element p.

7. Child element selector

Syntax: parent element > child element {}, eg:p > .box {} / / select the specified child element .box of the parent element p. Note the difference between the element selector and the descendant element selector

8. Pseudo class selector

Pseudo classes can be used to represent special states, such as:

Hyperlinks that have not been visited by link-

Hyperlinks that have been visited by visited-

The element over which the hover- mouse passes

The element that active- is clicking on.

Eg:a:hover {color:red} / / the color changes to red when the mouse passes over the a tag.

II. Priority order of CSS selectors

When different values of the same attribute apply to the same element, if there is a conflict between the defined attributes, then whose value should be used, then the priority order of the CSS is involved.

1. Using! important after the attribute overrides the element style defined anywhere on the page.

two。 An internal style written within an element as a style attribute

3.id selector

4. Class selector

5. Tag selector

6. Wildcard selector

7. Customized or inherited by the browser

This is the end of the article on "what selector in 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, 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.