Article Directory
1 selector
To apply CSS styles to specific HTML elements, you must first select them. In CSS, the one that performs this task is called a selector
The selector into tag selector (selector element) , class selector , ID selector , wildcard selector , pseudo-class selectors , link pseudo class selectors , configuration (position) pseudo-class selectors , target pseudo class selector .
1.1 Tag selector
Tag selector refers to the use of HTML tag names as selectors, categorized by tag names, and specify css styles from a tag on the page
`Example:
The div tag in the figure changes the font to red through the tag selector, so all the fonts contained in the div are red.
The biggest advantage of the tag selector is that it can quickly unify the styles for the same type of tags on the page . At the same time, this is also its shortcoming , and it cannot design differentiated styles.
1.2 Class selector
The class selector is identified by "." (English symbol) followed by the class name (class).
Example: The
class name in the example is'red', and it is specified by the class name selector, and the font is set to red.
The biggest advantage of class selectors is that they can define separate or identical styles for element objects.
1. Long names or phrases can use the horizontal line to name the selector.
2. It is not recommended to use the "_" underscore to name CSS selectors.
3. Don't name pure numbers, Chinese, etc., try to use English letters to express.
There can be multiple targets with the same class name at the same time. The multi-category name selector is still more used when the later layout is more complicated.
1.3 id selector
The id selector uses "#" for identification, followed by the id name.
In this grammar, the id name is the id attribute value of the HTML element. Most HTML elements can define the id attribute. The id value of the element is unique and can only correspond to a specific element in the document .
This is different from the class name selector. The
id name is green, which changes the font to green
An error will be reported when there are two identical id names
1.4 Wildcard selector
The wildcard selector is represented by the "*" sign. It has the widest scope of all selectors and can match all elements on the page.
Add a border to all divs, 1px black solid line.
1.5 Pseudo-class selector
In order to be different from the class selector we just learned, the class selector is a dot such as .demo {} and our pseudo-class uses two dots as a colon, such as hover. There are many different types of pseudo-class selectors.
1.5.1 Link pseudo-class selector
- ：Link / is the link status visited /
- :Visted / visited link status /
- : Hover/when the mouse moves over the link /
- ：Active/when the selected link is on /
The link is red when not visited, the link
turns to green
when clicked, the link is blue when the mouse is hovered over
, the link is pink when the link is clicked and not sent
1.5.2 Structure (location) pseudo-class selector
- :first-child: The specified selector that selects the first child element belonging to its parent element
- :last-child: Select the specified selector that belongs to the last child element of its parent element
- :nth-child(n): Match the Nth child element belonging to its parent element, regardless of the element type
- :nth-last-child(n): The selector matches each element belonging to the Nth child element of its element, regardless of the type of the element, counting from the last child element.
1.5.3 Target pseudo-class selector
:target target pseudo-class selector: the selector can be used to select the target element of the current activity.
When that link is active, the target selector is triggered, and the link font is changed to red. In
short, when the mouse clicks on which link, which The link will change color
