A selector weight values
Selector weight value comparison:
! important infinity infinity
1000 style between the lines
id 100
class | attribute selector | pseudo class 10
The tag selector | pseudo-element 1
Tsuhaifu 0
Two common selector .css
1.id selector, class selector, tag selector, attribute selector, the selector Wildcard
2. Sons selector / descendent selectors, direct child element selector, tied selector, grouping selectors, adjacent sibling selectors
Here is the html, css code demonstrates and explains:
id selector: property values # {}
<div id="only">123</div>
#only{
background-color:red;
}
class selector: {}
<div class="demo1">234</div>
.demo1{
background:yellow;
}
.demo2{
color:#f40;
}
<! - relationship with the class-many elements, it may correspond to a plurality of class (demo1, demo2) on the same element, coupled with the intermediate space ->
<div class="demo1 demo2">345</div>
Tag selector (to span is an example): span {}
<span>456</span>
<div>
<span>567</span>
</div>
span{
color:aqua;
font-weigh:bolder;
}
<-! Tag selector can select all labels, such as selecting all the span tags, 456,567 changes at the same time, no matter how many sets of layers can be chosen tag ->
Wildcard Selector: *} {
*{
background-color:green;
} <-! * Wildcard selectors can select all the tags, meaning all the labels have the property, which is a unified style all tags follow. ->
Attribute Selector:
Attribute selectors: [attribute name = "attribute value"]
<div id="only" class="demo1">123</div>
[id="only"]{
background-color:red;
}
Attribute selectors can be written as property values only, you can not write, attribute selectors can not attribute label.
1. Sons selector / descendent selectors: tag label space + 1 + 2
<span>456</span>
<div>
<span>567</span>
</div>
Requires only span selector 567 so that red,
div (space) span {
background-color:red;
}
<div >
<span >
<em>
145
</em>
</span>
</div>
span {div I
background-color:red;
}
2. direct child element of choice: Label 1> tag 2
The 123 red
<div >
<em>123</em>
<span >
<em>
145
</em>
</span>
</div>
div> I {
background-color:red;}
3. Selector parallel: Label 1 Label 2 ++
Selector parallel: a plurality of conditions defining element, and no space, in front of the label needs to select another selector, id selector without, free position
<div>1</div>
<div class="demo1">2</div>
<p class="demo2">3</p>
Make 2 turns red
div.demo1{
background-color:red;
}
4. bank selector: tag 1, tag 2 and tag 3, 5 ....
Bank selector:
<div>1</div>
<span>2</span>
<em>3</em>
Requirements: 123 all turn red background color
Option One:
div{
background-color:red;
height:10px;
width:10px;
}
span{
background-color:red;
height:20px;
width:25ppx;
}
in{
background-color:red;
width:15px;
}
Bank selector:
div, span, I {
background-color:red;
}
div{
height:10px;
width:10px;
}
span{
height:20px;
width:25ppx;
}
in{
width:15px;
5. Adjacent Sibling Selector: Label 2 Label 1+
Adjacent sibling selector, two brothers under the same parent, sibling adjacent selector uses the plus sign (+)
h1+h2{color: pink;}