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

This article will share with you about the categories of CSS selectors. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Selectors are divided into two main categories:

1. Basic selector

a. Tag selector: the name of the selector represents the tag on the html page

P {

Color:red

Border:1px dashed green

}

b. Class selector: specifies the use of dots. To define

Advantages: flexibility

Eg: .one {background-color:#ff0099;}

C. ID selector: specify to be defined by #

Eg: # one {cursor:hand;}

Difference: the tag selector is for a class of tags on the page.

The class selector can be used by a variety of tags.

The ID selector is a value for a specific label (one). ID is the only identification of this tag on this page.

D: universal selector: defined with * to represent all the tags on the page.

* {

Font-size:30px

Margin-left:0px

Margin-top:0px

}

two。 Expansion selector

a. Combination selector: separated by commas

Eg: precedence h _ 2, h _ 3, one, one, two {color:red;}

b. Association selector (descendant selector): separated by spaces

Eg: h5 span I {color:red;}

Represents the style of the I tag in the span tag in the h5 tag

The h5 and span and I tags are not necessarily next to each other.

c. Pseudo class selector

1): static pseudo class: the stipulation is defined by:. Only two。 Can only be used for hyperlinks.

: link indicates the color before the hyperlink is clicked

: visited indicates the color after the link is clicked

Eg:a:link {color:red;}

A:visited {color:yellow;}

Note: the style defined by a:link {} is for all hyperlinks with href attributes written (excluding anchors).

A {} defined style for all hyperlinks (including anchors)

2): dynamic pseudo-class: applies to all tags

: hover: when moving to a tag

: focus: when a tag gets focus

: active: when you click a tab without relaxing the mouse

Eg: label:hover {color:#00ff00;}

Input:focus {

Background-color:#ff9999

Border:1px solid red

}

A:active {

Color:blue

}

Thank you for reading! This is the end of this article on "what are the categories of 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, 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.