CSS样式2 标签选择器及权重

CSS选择器

css选择器类型有六种，分别是
标签选择器 p
类别选择器 .one
ID选择器 #left
嵌套声明 p span
集体声明 p.hl
全局声明 *
选择器

1.id选择器

<div id="only">123</div> 

#only{
    background-color: red;
    }

2.class

<div class="demo demo1">123</div>
<div class="demo">234</div>    
<div class="demo">345</div>

.demo{ 
   background-color: blue;
   }
.demo1{
    color: #f40;
    }

此时23同时拥有demo和demo1两种样式，而234和345两个都用demo的样式 。

3.标签选择器

<span>123</span>
<div></div>

4.通配符

即全局声明

*{
    background-color: black;
    }

全部都变为黑色，用*表示全部选择

<strong>123</strong>

优先级：

行间样式>id选择器>>class选择器=属性值>标签选择器>通配符选择器=伪元素
权重：1000>100>10>1>0
此处权重进制为256进制
后面加！important权重最高，为正无穷（此处为定值，即正无穷加1大于正无穷）

5父子选择器

<div>
        <em>1</em>
        <strong>
            <em>2</em>
        </strong>
    </div>

5.1父子选择器

派生选择器父子选择器，只要是父子关系成立就行，没必要是标签

div em{    background-color: red;}

5.2直接子元素选择器

div > em{    background-color: orange;}

6并列选择器

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

为了让2的背景颜色变成红色则需要用并列选择器，如果是标签选择器的话，标签选择器需要放在前面，id选择器则随便。

div.demo{
    background-color: red;
}

7 权重的计算

例一

<div class="classDiv" id="idDiv">
        <p class="classP" id="idP">1</p>
</div>

#idDiv p{
    background-color: red;}
div .classP#idP{
    background-color: green;}
/* 只要写在同一排的选择器，把权重值相加 */

第一行权重为100+1
第二行权重为1+10+100
例二

#idDiv p{
    background-color: red!important；
}
div .classP#idP{
    background-color: green!important;
}

第一行权重为100+1+无穷
第二行权重为1+10+100+无穷
权重相同时后来居上
权重的值
！important：无穷(此处的无穷为固定值，)
行间样式：1000
id：100
属性值：100
class：10
div：1
p：1
通配符选择器：0
伪元素：1
为256进制

8分组选择器

.demo1{
    width: 100px;
    height: 100px;
    background-color: red;
}
.demo2{
    width: 100px;
    height: 100px;
    background-color: green;
}

与下面代码意思相同

.demo1{
    background-color: red;
}
.demo2{
    background-color: green;
}
.demo1,
.demo2{
    width: 100px;
    height: 100px;
}