#### id selector
- grammar
- Defined by the id attribute in HTML
like:
```html
<div class="box"></div>
```
- Identify with dots in css: #
```css
#id name {
style declaration;
}
```
- Role: Select all elements with the specified class name
- Example demonstration:
```css
#box{
background-color:red;
}
<div id="box">div1</div>
```
**Note** : Unique, generally used for page unique elements such as head, bottom, etc., often used in conjunction with JavaScript.
#### Class and id naming rules
- Understand the meaning of words, try to use English
- It is always recommended to start with a letter and can contain numbers, letters, underscores, etc.
- don't start with a number
- Multiple words can be connected in camel case (newsCont), dashed (news_cont), underscored (news-cont), etc.
#### Summarize
- Summarize frequency of use
- The most commonly used of the basic selectors is the class selector
- id is used for the unique module in the page
- The global style defined by the element name selector should be used with caution
- The * sign is usually used to reset the style [least commonly used]
- Summarize the difference between id and class
- the priority of the base selector
- Compared
- Use of penetration debugging tools
>- F12/Right click-inspect
>- On the left is the HTML element structure, on the right is the CSS style
>- Ctrl+scroll wheel can zoom in and out the developer tools code size
>- Ctrl + 0 to restore browser size
>- The CSS style on the right can change the value (left and right arrows or direct input) and view the color
>- If you click on the element and find that there is no style import on the right side, it is very likely that the class name or style import is wrong
>- If there is a style, but there is a yellow exclamation mark in front of the style, it means that the style attribute is written incorrectly
>- If there is a style, but the style is penetrated by a dash, it means that there may be a writing order or priority problem
- in conclusion
> Final sorting: id (student whose ID number is XX) > class (student named Wang Xiaoshuai) > element name (all boys) > * (all students)
>The more precise the selection range, the higher the priority