前端之css樣式（選擇器）。。。

時間 2019-11-19

標籤前端 css 樣式選擇器欄目 CSS 简体版

原文原文鏈接

1、css概述css

CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，對html標籤的渲染和佈局html

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。瀏覽器

例如ide

2、css的四種引入方式佈局

1.行內式spa

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。rest

2.內嵌式code

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：htm

3.連接式對象

建一個index.css的文件，存放樣式

在主頁面中吧index.css引入

4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：

要注意導入的路徑。。。。

注意啦：

導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。

因此仍是推薦用連接式。。。。。。。。。。。

3、注意嵌套規則

塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內能夠包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。

3、 css的選擇器

1.基礎選擇器

「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素

　　1.通用元素選擇器 *: 全部的標籤都變色

　　2.標籤選擇器：匹配全部使用p標籤的樣式 p{color:red}

　　3.id選擇器：匹配指定的標籤 #p2{color:red}

　　4.class類選擇器：誰指定class誰的變色，可選多個 .c1{color:red} 或者 div.c1{color:red}

實例

注意：

能夠對塊級標籤設置長寬
不能夠對內聯標籤設長寬（它只會根據他的文字大小來變）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*標籤選擇器*/
    /*全部標籤是div的都變了*/
    div{
        font-family: 華文彩雲;
    }

    /*id選擇器*/
    /*給id='c2'的設置樣式，id通常不經常使用。由於id是不能重複的。*/
    #c2{
        background-color: blueviolet;
        font-size: larger;
    }
 /*calss類選擇器*/
    .a1{
        color: red;
    }
    或
    p.a1{
        color: blue;
    }

    /*通用元素選擇器*/
    *{
        background-color: aquamarine;
        color: red;
    }
</style>
<body>
<div id="c1">
    <div id="c2">
        <p>hello haiyan</p>
        <div class="a1">哇啊卡卡</div>
    </div>
    <p>hi haiyan</p>
</div>
<span>啦啦啦</span>
<p>p2</p>
<div class="a1">
    <p class="a2">你好啊</p>
    <h1>我是h1標籤</h1>
</div>
</body>
</html>

2.組合選擇器

    1.後代選擇器 (不分層級，只讓p標籤變色) .c2 p{color:red} 
    2.子代選擇器（只在兒子層找） .c2>p{color:red}
    3.多元素選擇器：同時匹配全部指定的元素  .div,p{color:red}
　　　　　　　　　　　　　　　　　　　　　　　或者

　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{
　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;
　　　　　　　　　　　　　　　　　　　　　　　　　　 background-color: green;
　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;
　　　　　　　　　　　　　　　　}

    不經常使用

　　3.毗鄰選擇器（緊挨着，找相鄰的,只找下面的，不找上面的）.c2+p{color:red}
　　4.兄弟選擇器：同一級別的，離得很近的.c2~p{color:red}

　  5.多元素選擇器： .c2 .c3,.c2~ .c3{ color:red }

 1  .a1 .a2, .a1~p{
 2             color: blue;
 3             font-size: 15px;
 4             background-color: red;
 5         }
 6         #下面的兩個就至關於上面的一個，用逗號隔開能夠減小代碼的重用
 7         .a1 .a2{
 8             color: blue;
 9             font-size: 15px;
10             background-color: red;
11         }
12         .a1~p{
13              color: blue;
14              font-size: 15px;
15              background-color: red;
16         }

多元素選擇器的說明

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組合選擇器</title>
    <style>
        /*後代選擇器(部分層級)：選擇全部類爲a1的p標籤*/
        .a1 p{
            background-color: blue;
        }

        /*子代選擇器*/
        .c2>p{
            color: crimson;
        }

        /*毗鄰選擇器*/
        .a2+p{
            background-color: aquamarine;
        }

        /*兄弟選擇器:同一級別的，離得很近的*/
        .a2~p{
            background-color: blueviolet;
        }

        /*多元素選擇器：同時匹配全部指定的元素*/
        .div,p{
            background-color: aquamarine;
        }

        .a1 .a2, .a1~p{
            color: blue;
            font-size: 15px;
            background-color: red;
        }
        #下面的兩個就至關於上面的一個，用逗號隔開能夠減小代碼的重用
        /*.a1 .a2{*/
            /*color: blue;*/
            /*font-size: 15px;*/
            /*background-color: red;*/
        /*}*/
        /*.a1~p{*/
             /*color: blue;*/
             /*font-size: 15px;*/
             /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>
<p>hi say hello........</p>
<div class="a1">
    <div class="a2">
        <p id="s1">過去永遠是畫面</p>
        <div class="c2">
            <p>那片海</p>
        </div>

    </div>
    <p>huhhdhshsdfdfgfdgd</p>
    <h1 class="a3">第一章</h1>
    <h2>第二章</h2>
</div>
<div class="a1">
    <em>lalalalla啦啦啦啦案例</em>
    <div class="a2">
        <p>hohou後</p>
        <b>海燕&reg;</b>
    </div>
</div>
<h5>你好</h5>
<p>好好好</p>
</body>
</html>

3.屬性選擇器

 1 E[att]          匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略。
 2                 好比「[cheacked]」。如下同。）   p[title] { color:#f00; }
 3  
 4  
 5 E[att=val]      匹配全部att屬性等於「val」的E元素   div[class=」error」] { color:#f00; }
 6  
 7  
 8 E[att~=val]     匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素
 9                 td[class~=」name」] { color:#f00; }
10  
11 E[attr^=val]    匹配屬性值以指定值開頭的每一個元素                    
12                 div[class^="test"]{background:#ffff00;}
13  
14 E[attr$=val]    匹配屬性值以指定值結尾的每一個元素    div[class$="test"]{background:#ffff00;}
15  
16 E[attr*=val]    匹配屬性值中包含指定值的每一個元素    div[class*="test"]{background:#ffff00;}

View Code

index.css

/*1.匹配全部haiyan屬性的，而且只是在div標籤的*/
div[haiyan]{
    color: yellowgreen;
}


/*2.匹配全部haiyan=wawa的而且只是在div標籤的*/
div[haiyan=wawa]{
        color: aqua;
    }

/*2.上面的優先級和下面的優先級本應該是同樣的*/
/*應該顯示下面的，可是，因爲上面查找的範圍
比下面的範圍廣，因此它會把上面的也顯示了。*/



/*3.匹配全部屬性爲haiyan，而且具備多個空格分割的值，*/
/*其中一個只等於wawa的*/
 div[haiyan~=wawa]{
            color: blueviolet;
        }

 /*4.匹配屬性值以指定值開頭的每一個元素，
 而且是在div標籤裏的*/
div[haiyan^=w]{
            background-color: aquamarine;
        }
div[egon^=w]{
            background-color: aquamarine;
        }

/*5.匹配屬性值以指定值結尾的每一個元素  */
div[haiyan$=a]{
            background-color: blueviolet;
        }

/*6.匹配屬性值中包含指定值的每一個元素 */
div[haiyan*=a]{
            background-color: blueviolet;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div>
    <div haiyan = "  wawa ">你好</div>
    <div haiyan = "wawa">哎呀呀啊</div>
    <div egon = "wawa">da大</div>
    <div haiyan="cccc">啊啊哈</div>
</div>
</body>
</html>

4.僞類

anchor僞類：專用於控制連接的顯示效果

'''
        a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

        a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
        a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
        a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
        僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
                   a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        
        a:link {color: #FF0000} /* 未訪問的連接 */
        
        a:visited {color: #00FF00} /* 已訪問的連接 */
        
        a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
        
        a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

'''

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>僞類</title>
 6     <style>
 7         /*沒訪問以前*/
 8         a:link{
 9             color: blue;
10         }
11         /*鼠標放在連接上的狀態*/
12         a:hover{
13             color: chartreuse;
14         }
15         /*訪問事後*/
16         a:visited{
17             color: red;
18         }
19         /*鼠標點擊的時候*/
20         a:active{
21             color: aqua;
22         }
23 
24         /*在p標籤屬性爲c2的後面加上內容*/
25         p.c2:after{
26             content: 'hello';
27             color: chartreuse;
28         }
29 
30         /*在全部的p標籤的前面加上內容*/
31         p:before{
32             content: '你猜';
33             color: forestgreen;
34         }
35         span{
36             background-color: aqua ;
37             /*width: 100px;*/
38             /*height: 50px;*/
39             /*span標籤是一個內聯標籤，設置了窗寬不起做用*/
40            /*它是跟着你設置的文本的大小變化的*/
41         }
42     </style>
43 </head>
44 <body>
45 <p>你是誰？</p>
46 <p class="c2">你是誰？</p>
47 <p class="c3">你是誰？</p>
48 <a href="" id="c1">lalala</a>
49 <span>zzzz小</span>
50 </body>
51 </html>

例子說明

before after僞類

 :before    p:before       在每一個<p>元素以前插入內容     
 :after     p:after        在每一個<p>元素以後插入內容     

例：p:before{content:"hello";color:red;display: block;}

5.css優先級和繼承

css的繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

body{color:red;}       <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

p{color:green}

發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。　

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

css的優先級

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100

3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。
   
　　二、有!important聲明的規則高於一切。

　　三、若是!important聲明衝突，則比較優先權。

　　四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

　　五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。

繼承示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器的優先級</title>
    <style>
        /*給body的全部內容加上樣式*/
        body{
            color: crimson;
            border: 2px solid;
            border-color: aqua;
        }
        /*子類有設置樣式就用子類的，沒有就繼承了父類的*/
        p{
            color: red;
        }
        #s2{
            color: blue;
        }

        /*不能被繼承,它會用本身的邊框，而不會用父類的邊框*/
        p{
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="c1" id="s1">
    div
    <div class="c2" id="s2">
        <div class="c3" id="s3">蒼茫的天涯是個人愛</div>
        <p>火辣辣的太陽</p>
    </div>
    <p>哎呀呀哎呀呀呀</p>
</div>
<div>hello haiyan</div>
<p>nis</p>
</body>
</html>