What are the categories of CSS selectors
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!
