In CSS, a selector is a pattern used to select elements that need to be styled.
Attribute selector can select elements based on their attributes and attribute values.
Three basic selector types: tag name selector, class selector, ID selector
Note: The way of writing style=" "in the tag should be a way of introducing CSS, not a selector, because the selector is not used at all.
1: Tag name selector
There are many tags in an HTML document, such as p tags, h1 tags, etc. To make all p tags in the document use the same CSS style, you should use the tag selector.
html {color:black;}
h1 {color:blue;}
p2{color:silver;}
That is, directly Use HTML tags as selectors.
2: Class selector
Use tag selectors to specify the same CSS style for the same tag throughout the HTML document. But in actual application, the same tag in the HTML document will be used repeatedly. If you want to assign different CSS styles to the same tag, you should use class selectors.
<div class="test">Test code</div>
##.test {color:red;border:1px blue solid;}
in html In the document, we add class="xxx" to the opening tag of the tag to control the style (unpaired tags such as input are placed directly in the tag). In the css file corresponding to the page, use .xxx to point to this tag. , to control this tag, we call this way of finding tags by defining classes: class selectors.
This way of defining class is the most commonly used selector in front-end development. It has several outstanding features: you can set the same class for different tags, thereby using one CSS command to control several tags, reducing a lot of The code is that the page is simple to modify, easy to maintain, and easy to revise; secondly, the background staff will not use the relevant settings of the class, and there is no need to interact with the background staff; furthermore, the label can be dynamically changed through js, etc. Classname, thereby changing the style of the entire label, making it easier to implement front-end dynamic effects.
3: ID selector ID selector is similar to class selector. The difference is that ID selector The device cannot be reused. In an XHTML document, an ID selector can only assign its CSS style to one tag.
<div id="test">Test code</div>
##test {color:red ;border:1px blue solid;}
HTML elements with IDs can be manipulated by JavaScript. IDs are also commonly used by backend developers, so front-end developers should try to have as few usage of.
Next Section
