CSS Common Selector

# # #CSS选择器的分类
# # # #标签选择器
Just use the tag name as a selector.
Syntax: Tag Selector {CSS property name: CSS property value;}
Weight: 1
```
<style>
div{color:red;}
</style>
<div>div1</div>
<div>div1</div>
<div>div1</div>
```
# # # #类选择器
Using the class tag attribute value of an HTML element as a selector, you need to precede the value of the Tag property with "."
Weight: 10
The tag attribute value (class name) of the > class can be* * Repeat* * Use
The tag attribute value (class name) of the > class can have* * Multiple* *, between the class name and the class name* * Space* * Separated
```
<style>
div{weight 1
color:red;
}
. div2{Weight 10
Color:green;
}
</style>
<div>div1</div>
<div class= "Div2" >div2</div>

```
# # # #ID Selector
Use the ID tag attribute value of an HTML element as a selector and need to precede the value of the Tag property with "#"
Weight: 100
> ID selectors are unique in HTML pages, and ID names (tag attribute values) cannot be duplicated or reused
The > ID selector is used in conjunction with JavaScript
```
<style>
. div{
color:red;}
#div {
Color:pink;}
</style>
<div class= "div" > I am div</div>
<div id= "div" > I am div</div>

```
The tag selector equals the person's last name, the class selector equals the person's name, and the ID selector equals the person's ID.

# # # #通配符选择器
All HTML elements are matched
Weight: 0<*<1
> Wildcard selector is not used in the project because it compares consumption performance
```
Clear all label default styles (spacing)
*{margin:0;padding:0;}
```

# # # #后代选择器 (derived selectors)
In the range of a root element, to find its descendant elements
Syntax: Ancestor selector descendant selector (middle space separated)
Weight: All selector weights combined with
```
<style>
. div1 ul Li Apan{color:red;}
</style>
<div class= "Div1" >
<ul><li><span> I'm div</span></li></ul>.
</div>
```

# # # #分组选择器
A CSS style that gives the unused HTML elements
Syntax: selector 1, selector 2, selector 3{css style}
Weight: calculated independently, not superimposed
```
<style>
p,h1,.box{
width:100px;
height:100px;
background-color:red;}
</style>
<p>p label </p>

<div class= "box" > I am div</div>
```

# # # #子级选择器
There is an inclusion relationship, and the child element is determined by the parent
Syntax: Parent selector > Child Selector
Weight: All selector weights combined with
> If you use a child selector, you must be a parent-child immediate relationship that cannot span generations
```
<style>
. div1>ul>li{color:red;}
</style>
<div class= "Div1" >
<ul>
<li>1111</li>
</ul>
</div>

```

# # # #标签属性选择器
Use tag attributes as selectors
Syntax: [Tag property name]{}
[Tag Property name = tag attribute value] {}
Weight: 10
> When there is a class name in the label, the tag attribute selector is generally not used, and the class selector
```
<style>
[Class] {color:red;} [Title] {color:red;}
<div class= "box" title= "ZF" > Everest training </div>
```

# # # #交集选择器
When two selectors belong to one element, the intersection selector can be used to make an accurate selection of elements.
Weight: combination of all selector weights combined with
> What are the selector combinations for the Intersect selector?
>* * Tag Selector and class selector**、* * Tag Selector and Tag Property selector* *, tag selector and ID selector, class selector and ID selector, label property selector and ID selector, class selector, and Label property selector
```
<style>
div.box{color:red;}
</style>
<div class= "box" title= "H1" id= "H2" > I am div</div>
```

# # # #伪类选择器
Add a state to an HTML element
For example: When the mouse is over, the mouse clicks ...
> Pseudo-Class selectors are often used**:hover the state of the mouse when it passes through**
```
A:hover{color:green;} State when the mouse passes
<a href "" > Hyperlinks </a>

```

# # # #伪元素
Use CSS code to* * SpecifyElements of * ** * Inside* * Add fake (non-existent in HTML) content
Weight: 10
>: Begore in the specified element* * All content* * Prior to
>: After in the specified element* * All content* * After the
>
> pseudo-elements must be guaranteed two prerequisites 1. Must have a**display:block;* * This CSS property
2. Must be provided with**content= "";**content content can be empty

> Pseudo-elements commonly used are **:after in ... After * * Generally used in clear float (float) the impact of

```
<style>
div:before{
Display:block;
Content: "I";}
</style>
<div> I'm div</div>.
```

CSS Common Selector