CSS基础及选择器

wendu

　　CSS层叠样式表与表相分离。常用CSS2和CSS3。

HTML引入CSS
　　1.行内样式



<div style="color:red"></div>
　　2.内部样式



    <style type="text/css">
div {
color:red;
}
</style>
　　3.外部样式



<link rel="stylesheet" type="text/css" href="css/table.css">
　　4.导入样式



        /*在css导入样式*/
@import url(../Content/bootstrap.css);
样式选择器



    <style type="text/css">
/*标签选择器*/
a {
color: red;
}
/*类选择器*/
.top {
color: yellow;
}
/*ID选择器*/
#DivTop {
color: green;
}
/*后代继承选择器*/
table tr td {
color: orange;
}
/*群选择器*/
a, span, h1 {
font-size: 18px;
}
/*属性选择器*/
input[type=text] {
color: aqua;
}
/*伪选择器*/
a::after {
content: "aa";
color: red;
}
a::before {
content: "bb";
color: burlywood;
}
a:hover {
color:azure;
}
</style>
CSS选择器优先级计算
　　inportant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符>继承
　　权值：
     style=“”——1000
     id选择器  ——100
     类选择器/属性选择器/伪类选择器 ——10
     标签/伪对象 ——1
     通配选择器  ——0
例子：
img.thumb:after，总纬度是0,0,1,2（即：1+10+1=12；）
[data-job="frontend"]::first-letter，总纬度是0,0,1,1（即：10+1=11；）
#main::before，总纬度是0,1,0,1（即：100+1=101；）
[type="checkbox"]:checked，总纬度是0,0,2,0（即：10+10=20；）
ul#shop-list，总纬度是0,1,0,1（即：1+100=101；）