[Distal study notes day20] 3.4. Css selector tag selector + id + selector + + class selector level selector set selector + + pseudo-classes and pseudo-element selector

3.4. Css selectors

css selector

Common choice has the following categories:

1, the tag selector

Tag selector, this selector impact of large-scale, recommended to use in the hierarchy selector.
For example:

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2, id selector

Select elements by id name, id name of the element can not be repeated, so the item can only set a style corresponding to an element on the page can not be reused, id General to use the program, it is not recommended to use id as a selector.
For example:

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3, class selector

Select elements by class name, a class can be applied to a plurality of elements, the elements can also be used on a plurality of classes, flexible, reusable, is one kind of most widely css selector.
For example:

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4, level selector

Are used in selecting the sub-elements parent element, the following sub-elements or sub-elements, the elements can be combined with the label, to reduce the naming hierarchy can also prevent naming conflicts.
For example:

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

5, the group selector

A plurality of selectors, if the same style settings, the group selector can be used.
For example:

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6, pseudo-classes and pseudo-element selector

Commonly used pseudo-class selection has hover, showing a state when a mouse hovers over the element, the dummy selector elements have before and after, they may be inserted through the style element content.

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>