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

一、css概述

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html标簽的渲染和布局

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

例如

二、css的四種引入方式

1.行内式

行内式是在标記的style屬性中設定CSS樣式。這種方式沒有展現出CSS的優勢，不推薦使用。

2.内嵌式

嵌入式是将CSS樣式集中寫在網頁的<head></head>标簽對的<style></style>标簽對中。格式如下：

3.連結式

建一個index.css的檔案，存放樣式

在首頁面中吧index.css引入

4.導入式

将一個獨立的.css檔案引入HTML檔案中，導入式使用CSS規則引入外部CSS檔案，<style>标記也是寫在<head>标記中，使用的文法如下：

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

注意啦：

導入式會在整個網頁裝載完後再裝載CSS檔案，是以這就導緻了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

是以還是推薦用連結式。。。。。。。。。。。

三、注意嵌套規則

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

三、 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;
        }
       <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">子代選擇器</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
    .c2&gt;p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> crimson</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>

    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">毗鄰選擇器</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
    .a2+p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> aquamarine</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>

    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">兄弟選擇器:同一級别的，離得很近的</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
    .a2~p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blueviolet</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>

    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">多元素選擇器：同時比對所有指定的元素</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
    .div,p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> aquamarine</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .a1 .a2, .a1~p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 15px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    #下面的兩個就相當于上面的一個，用逗号隔開可以減少代碼的重用
    </span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">.a1 .a2{</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">color: blue;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">font-size: 15px;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-color: red;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">}</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">.a1~p{</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">color: blue;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">font-size: 15px;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-color: red;</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
    <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">}</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
                   


</head>
<body>
<p>hi say hello........</p>
<div class="a1">
<div class="a2">
<p id="s1">過去永遠是畫面</p>
<div class="c2">
<p>那片海</p>
</div>

       <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>huhhdhshsdfdfgfdgd<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="a3"</span><span style="color: #0000ff;">&gt;</span>第一章<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span>第二章<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span>
                   


</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 ==&gt; 點過狀态 沒有點過的狀态 滑鼠懸浮狀态 激活狀态
    
    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、文内的樣式優先級為1,0,0,0，是以始終高于外部定義。

　　2、有!important聲明的規則高于一切。


　　3、如果!important聲明沖突，則比較優先權。


　　4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。


　　5、由繼承而得到的樣式沒有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;
        }
       <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">不能被繼承,它會用自己的邊框，而不會用父類的邊框</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
                   


</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>

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