CSS基础及选择器

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；）