CSS selectors are divided into two categories: basic selectors and composite selectors
The basic selector consists of a single selector. The
basic selector includes: label selector , class selector , id selector and wildcard selector
1. Tag selector
Refers to using HTML tag names as selectors, categorizing by tag names, and assigning a unified CSS style to a certain type of tag in the page.
Syntax:
tag name { attribute 1: attribute value 1; attribute 2: attribute value 2; … } For example, set the color of the P tag to red p { color: red; } This is not good because all P tags will turn red , Cannot differentiate settings.
2. Class selector
If you want to choose different tags differently, select one or several tags individually, you can use the class selector. Later, the
formula is called through class : style point definition, structure class (class) call. One or more, the most commonly used
syntax for development :
.Class name { attribute 1: attribute value 1; attribute 2: attribute value 2; … }
3. id selector
The id selector can specify a specific style for the
HTML element marked with a specific id. HTML elements use the id attribute to set the id selector. The id selector in CSS is defined by "#". The
formula: style#define, structure id call, only Can be called once, others must not use the
syntax:
#id名{ attribute 1: attribute value 1; attribute 2: attribute value 2; … }
4. Wildcard selector
In CSS, the wildcard selector is defined by "*", which means the
syntax for selecting all elements in the page :
* { Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; … } The wildcard selector does not need to be called, it will automatically Use styles for all elements . Only use in special cases. The usage scenarios will be explained later (the following is to make clear the inner and outer margins of all element labels) * { margin: 0; padding: 0; }
The difference between id selector and class selector
(1) Class selector (class) is like a person's name. A person can have multiple names, and a name can be used by multiple people.
(2) The id selector is like a person’s ID number, which is unique across the country and must not be repeated.
(3) The biggest difference between id selector and class selector lies in the number of uses
(4) Type selectors are used the most in modifying styles , Id selector is generally used for unique elements on the page, and is often used in conjunction with JavaScript.
Basic selector summary table
| Base selector | effect | Features | Usage | usage |
|---|---|---|---|---|
| Label selector | You can select all the same tags such as p | Cannot differentiate choice | More | p{color：red;} |
| Class selector | One or more tags can be selected | You can choose according to your needs | Much | .nav{color: red;} |
| id selector | Only one label can be selected at a time | The id attribute can only appear once in each HTML document | Generally matched with js | #nav{color: red;} |
| Wildcard selector | Select all tags | Too many choices, some do not need | Use in special circumstances | *{color: red;} |
Each basic selector has a usage scenario and needs to be mastered.
If it is to modify the style, the class selector is the most used