前端之CSS——CSS選擇器
1、CSS介紹
爲何須要CSS（CSS的做用）？css
在沒有CSS以前，咱們想要修改HTML元素的樣式須要爲每一個HTML元素單獨定義樣式屬性，當HTML內容很是多時，就會定義不少重複的樣式屬性，而且修改的時候須要逐個修改，費心費力。html
CSS的出現解決了下面這兩個問題：web
一、將HTML頁面的內容與樣式分離。瀏覽器
二、提升web開發的工做效率。網絡
使用css的目的就是讓網頁具備美觀一致的頁面，另一個最重要的緣由是內容與格式分離。ide
什麼是CSS？佈局
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。性能
CSS的優點？字體
- 內容與表現分離
- 網頁的表現統一，容易修改
- 豐富的樣式，使頁面佈局更加靈活
- 減小網頁的代碼量，增長網頁瀏覽器速度，節省網絡帶寬
- 運用獨立頁面的css,有利於網頁被搜索引擎收錄。
如何使用CSS？網站
一般會把樣式規則的內容都保存在CSS文件中，此時該CSS文件被稱爲外部樣式表，而後在HTML文件中經過link標籤引用該CSS文件便可。這樣瀏覽器在解析到該link標籤的時候就會加載該CSS文件，並按照該文件中的樣式規則渲染HTML文件。
2、CSS語法
CSS語法能夠分爲兩個部分：一、選擇器；二、聲明。
聲明由屬性和值組成，多個聲明之間用分號分隔。
h1{ /* h1:選擇器 */ font-size: 12px; /* 聲明1：font-size是屬性，12px是值 */ color: #F00; /* 聲明2 */ }
CSS註釋如上所示：/*這是註釋*/
3、CSS引入方式
在HTML中引入CSS的方法主要有三種：內嵌樣式、行內樣式、外部樣式（連接方式、導入方式）。
一、內嵌方式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*這裏寫css代碼*/ /* 標籤選擇器 檢索整個文檔標籤 看到span標籤所有設置*/ span{ color: purple; font-size: 30px; } </style> </head> <body> <div> <p style="color: green">我是一個段落</p> </div> <div> <div> <span>我是另外一個段落</span> <span>我是另外一個段落</span> <span>我是另外一個段落</span> <a href="#">路飛</a> </div> </div> </body> </html>
格式總結： <head> <style type="text/css"> ...此處寫CSS樣式 </style> </head>
示例效果：
這種方式缺點就是對於一個包含不少網頁的網站，進行樣式修改的時候很是麻煩，僅單一網頁考慮使用。
二、行內樣式
行內樣式是在標記的style屬性中設定CSS樣式。
<div> <p style="color: green">我是一個段落</p> </div>
這種方式沒有體現出CSS的優點，不推薦使用。
3-一、外部樣式——連接式
使用 HTML 頭部的 <head> 標籤對中使用<link>標籤來引入外部的 CSS 文件。
<!doctype html> <html> <head> <meta charset="utf8"> <link rel="stylesheet" href="index.css"> </head> <body> <p>這是一個p標籤！</p> </body> </html>
外部css文件——index.css：
p { color: green; }
3-二、外部樣式——導入式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> @import url('./index.css'); </style> </head> <body> <div> <div> <a href="#">路飛</a> </div> </div> </body> </html>
index.css代碼以下：還能夠在css導入css
/*a {*/ /*font-size: 30px;*/ /*}*/ @import url('./content.css');
content.css
a { font-size: 30px; }
連接式和導入式的區別：
一、<link/>標籤屬於XHTML，@import是屬性css2.1
二、使用<link/>連接的css文件先加載到網頁中，再進行編譯顯示
三、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
四、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來講就是無效的。
4、基本選擇器
選擇器定義：在一個HTML頁面中會有不少不少的元素，不一樣的元素可能會有不一樣的樣式，某些元素又須要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素以後就能夠爲它們設置樣式了。 選擇器爲樣式規則指定一個做用範圍。
選擇器分爲兩種：一、基本選擇器；二、高級選擇器。
一、標籤選擇器
經過標籤名來選擇元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的選擇器</title> <!--內嵌樣式--> <style type="text/css"> /* 標籤選擇器 */ p{ color: red; font-size: 20px; } span{ color: purple; } </style> </head> <body> <p> 一個段落 </p> <ul> <li> <span> 按實際低瓦斯 </span> </li> </ul> </body> </html>
特性：
1.標籤選擇器能夠選中全部的標籤元素，好比div，ul，li，p等。
2.無論標籤藏多深都能選中（查看下面的示例）。
3.選中的是全部的標籤，而不是某一個，因此是用來修改「共性」而不是「特性」的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的選擇器</title> <!--內嵌樣式--> <style type="text/css"> /* 標籤選擇器 */ p{ color: red; font-size: 20px; } span{ color: purple; } </style> </head> <body> <!-- css的選擇器分兩種：一、基本選擇器 二、高級選擇器 --> <div> <p> 一個段落 </p> <ul> <li> <span> 按實際低瓦斯 </span> </li> </ul> </div> <div> <div> <div> <div> <div> <p>我是另一個段落</p> </div> </div> </div> </div> </div> </body> </html>
二、id選擇器
經過元素的ID值選擇元素。注意是經過「#」來選中id。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的選擇器</title> <!--內嵌樣式--> <style type="text/css"> #s1{ color: red; } #s2{ font-size: 30px; } </style> </head> <body> <div> <!--html裏面id是惟一的，id的值不能重複--> <span id="s1">123</span> <span id="s2">957</span> </div> </body> </html>
id選擇器使用規則：
1.同一個頁面中id不能重複
2.任何的標籤均可以設置id
3.id命名規範要以字母開頭，能夠有數字、下劃線，大小寫嚴格區分。
三、類選擇器
1.所謂類，就是class .class與id很是類似，任何標籤均可以加類。可是類是能夠重複的，這是一種歸類的概念。
2.同一個標籤中能夠攜帶多個類，多個類之間用空格隔開。
<h3 class="title alex">我是一個三級標題</h3>
小練習：實現以下所示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的選擇器</title> <!--內嵌樣式--> <style type="text/css"> body{ color:black; font-size: 14px; } /* 類選擇器 */ .title_color{ color:green; } .title_strong{ font-size: 18px; } .title_underline{ text-decoration: underline; } </style> </head> <body> <div> <p class="title_color title_strong">段落1</p> <p class="title_color title_underline">段落2</p> <p class="title_strong title_underline">段落3</p> </div> </body> </html>
總結類選擇器使用：
一、不要試圖用一個類將頁面寫完。這個標籤要攜帶多個類設置標籤的樣式。
二、每一個類要儘量的小，要有公共的概念，可以讓更多的標籤使用。
四、通用選擇器
使用*選擇全部元素。性能比較差。
* {
color: black;
}
五、基本選擇器總結
id選擇器和類選擇器對比：
儘量使用class選擇器，除非一些特殊狀況可使用id。
id通常是用在js上的，也就是說，js是經過id來獲取標籤的。
5、高級選擇器
一、後代選擇器
由於HTML元素能夠嵌套，因此咱們能夠從某個元素的後代查找特定元素，並設置樣式。
div div p { color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高級選擇器</title> <style type="text/css"> /* 後代選擇器 在css中使用很是頻繁*/ div p{ color: rebeccapurple; } div div p{ color: yellow; } .container div p{ color: green; } </style> </head> <body> <div> <div class="container"> <p>我是一個段落</p> </div> </div> </body> </html>
因爲CSS是一層層層疊覆蓋的，「我是一個段落」最終字體顏色被設置爲了綠色。
二、子元素選擇器（子代選擇器）
經過「>」鏈接在一塊兒，僅做用於子元素。
.container> p{ color:yellowgreen; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高級選擇器</title> <style type="text/css"> /*子代選擇器*/ .container> p{ color:yellowgreen; } </style> </head> <body> <div> <div class="container"> <p>我是一個段落</p> <div> <p>我是一個新段落</p> </div> </div> </div> </body> </html>
.container>p：明確指定就是container當前div下的p標籤，設置字體顏色爲黃綠。
三、交集選擇器
由兩個選擇器鏈接構成，選擇兩者範圍的交集，兩個選擇器之間不能有空格。
h3.active{ background-color: yellow; }
第一個必須是標籤選擇器；第二個必須是類選擇器（.開頭）或者ID選擇器（#開頭）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高級選擇器</title> <style type="text/css"> /*交集選擇器*/ h3{ width:300px; color: red; } .active{ font-size: 30px; } h3.active{ background-color: yellow; } </style> </head> <body> <div> <div class="container"> <p>我是一個段落</p> <div> <p>我是一個新段落</p> </div> <p>另外一個段落，也是綠色</p> <ul> <li class="item"> <h3 class="active">我是一個h3</h3> </li> </ul> </div> </div> </body> </html>
最終效果是h3內容，字體大小爲30px，字體爲紅色，300px的寬度背景顏色爲黃色。
四、並集選擇器（組合選擇器）
多個選擇器經過「,」鏈接而成，同時聲明多個風格相一樣式。
a,h4{ color: #666; font-size: 18px; text-decoration: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高級選擇器</title> <style type="text/css"> /*!* 後代選擇器 在css中使用很是頻繁*!*/ /*div p{*/ /*color: rebeccapurple;*/ /*}*/ /*div div p{*/ /*color: yellow;*/ /*}*/ /*.container div p{*/ /*color: green;*/ /*}*/ /*子代選擇器*/ .container> p{ color:yellowgreen; } /*交集選擇器*/ h3{ width:300px; color: red; } .active{ font-size: 30px; } h3.active{ background-color: yellow; } /*並集選擇器(組合) 設置多個標籤中的統同樣式*/ a,h4{ color: #666; font-size: 18px; text-decoration: none; } </style> </head> <body> <div> <div class="container"> <p>我是另外一個段落</p> <div> <p>我是一個新段落</p> <a href="#">luffy</a> </div> <p>另外一個段落，也是綠色</p> <ul> <li class="item"> <h3 class="active">我是一個h3</h3> <h4>我是一個h4標題</h4> </li> <li> <h4>我是一個h4標題</h4> <a href="#">BAT</a> </li> </ul> </div> </div> </body> </html>
6、屬性選擇器
除了HTML元素的id屬性和class屬性外，還能夠根據HTML元素的特定屬性選擇元素。
一、根據屬性查找
若是但願把label標籤中包含for屬性的全部元素變爲紅色（針對<label for="user">用戶名：</label>），能夠寫做：
label[for]{ color: red; font-size: 20px; }
二、根據屬性和值查找
若是但願把label標籤中for 屬性等於pwd的元素變爲黃色，能夠寫做：
label[for="pwd"]{ color: yellow; }
若是但願把label標籤中for屬性以vip開頭的元素變大，能夠寫做：
label[for^="vip"]{ font-size: 30px; }
若是但願把label 標籤中for屬性以p2結尾的元素變小，能夠寫做：
label[for$="p2"]{ font-size: 20px; }
若是但願把label標籤中for屬性包含字符串ser的元素變綠，能夠寫做：
label[for*="ser"]{ color: green; }
若是但願找到全部label標籤for屬性(有多個值或值以空格分割)中有一個值爲hello的元素：(包含字符串且容許有多個值或以空格分割)
label[for~="hello"]{ color: gold; }
三、表單經常使用
準備修改表格中input組元素中type屬性值爲text的框背景爲紫色：
input[type="text"]{ background-color: purple; }
四、總結
屬性選擇器一般在表單控件中使用比較頻繁。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style type="text/css"> label[for]{ color: red; font-size: 20px; } label[for="pwd"]{ color: yellow; } /*以....開頭*/ label[for^="vip"]{ font-size: 30px; } /*以...結尾*/ label[for$="p2"]{ font-size: 20px; } /*包含ser*/ label[for*="ser"]{ color: green; } label[for~="hello"]{ color: gold; } input[type="text"]{ background-color: purple; } </style> </head> <body> <!--屬性選擇器，一般在表單控件中使用比較頻繁--> <div class="box"> <form action=""> <label for="user">用戶名：</label> <input type="text" name="" id="user"> <label for="pwd">密碼：</label> <label for="vip1">vip1</label> <label for="vip2">vip2</label> <label for="user2">用戶名2：</label> <label for="user3">用戶名3：</label> <label for="hello world">hello world</label> <label for="hello">hello</label> </form> </div> </body> </html>
7、僞類選擇器
CSS僞類用於向某些選擇器添加特殊的效果。
一、下面是幾種經常使用的僞類選擇器
沒有訪問的超連接a標籤樣式：
a:link { color: blue; }
訪問過的超連接a標籤樣式：
a:visited { color: gray; }
鼠標懸浮在元素上應用樣式：
a:hover { background-color: #eee; }
鼠標點擊瞬間的樣式：
a:active { color: green; }
input輸入框獲取焦點時樣式：
input:focus { outline: none; background-color: #eee; }
示例代碼以下：（a標籤的愛恨原則）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞類選擇器</title> <style type="text/css"> /* a標籤的愛恨原則 love hate*/ /* 沒有被訪問的a標籤的樣式 */ .box ul li.item1 a:link{ color:#666; } /* 訪問事後的a標籤的樣式 */ .box ul li.item2 a:visited{ color:yellow; } /* 鼠標懸停時的a標籤的樣式 */ .box ul li.item3 a:hover{ color:darkred; } /* 鼠標點住的時候a標籤的樣式 */ .box ul li.item4 a:active{ color: yellowgreen; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">張三</a> </li> <li class="item2"> <a href="#">李四</a> </li> <li class="item3"> <a href="#">王八</a> </li> <li class="item4"> <a href="#">趙六</a> </li> </ul> </div> </body> </html>
二、幾種特殊的僞類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞類選擇器</title> <style type="text/css"> /* a標籤的愛恨原則 love hate*/ /* 沒有被訪問的a標籤的樣式 */ .box ul li.item1 a:link{ color:#666; } /* 訪問事後的a標籤的樣式 */ .box ul li.item2 a:visited{ color:yellow; } /* 鼠標懸停時的a標籤的樣式 */ .box ul li.item3 a:hover{ color:darkred; } /* 鼠標點住的時候a標籤的樣式 */ .box ul li.item4 a:active{ color: yellowgreen; } /*選中第一個元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*選中最後一個元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*選中當前指定的元素, 數值從1開始*/ div ul li:nth-child(2){ font-size: 30px; color: purple; } /* n表示選中全部元素 數值從0開始，0的時候表示沒有選中 */ div ul li:nth-child(n){ font-size: 40px; color: red; } /* 2n表示選中數值爲偶數的元素 */ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /* 2n-1表示選中數值爲奇數的元素 */ div ul li:nth-child(2n-1){ font-size: 50px; color: green; } /* 隔幾換色：好比要隔三換一，一、五、9... */ div ul li:nth-child(4n+1){ font-size: 50px; color: gold; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">張三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王八</a> </li> <li class="item4"> 4 <a href="#">趙六</a> </li> </ul> </div> </body> </html>
特別須要注意nth-child的用法，nth-child(2)表明選擇第二個元素。nth-child(n)表示選中全部的元素，數值從0開始，可是0的時候表示沒有選中。2n和2n-1能夠用來表示數值爲偶數的元素或奇數的元素。若是要是如今隔(k-1)換色，能夠巧妙地使用nth-child(kn+1)來實現。
8、僞元素選擇器
三種僞元素選擇器：first-letter、before、after。其中after是運用最多的僞元素選擇器。
一、first-letter
用於爲文本的首字母設置特殊樣式。
/* 設置第一個首字母的樣式 */ p:first-letter{ color: red; font-size: 30px; }
二、before
用於在元素的內容前面插入新內容。使用此僞元素選擇器必定要結合content屬性。
/* 在...以前添加內容，這個屬性使用不是很頻繁 */ p:before{ content: "alex"; }
在全部p標籤的內容前面加上一個alex。
三、after
用於在元素的內容後面插入新內容。一樣，使用此僞元素選擇器必定要結合content屬性。
/* 在...以後添加內容，使用很是頻繁，一般與後面講到的佈局有不少關聯(清除浮動) */ p:after{ content: "&"; color: red; font-size: 40px; }
僞元素選擇器示例代碼以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞元素選擇器</title> <style type="text/css"> /* 設置第一個首字母的樣式 */ p:first-letter{ color: red; font-size: 30px; } /* 在...以前添加內容，這個屬性使用不是很頻繁 使用此僞元素選擇器必定要結合content屬性*/ p:before{ content: "alex"; } /* 在...以後添加內容，使用很是頻繁，一般與後面講到的佈局有不少關聯（清除浮動） */ p:after{ content: "&"; color: red; font-size: 40px; } </style> </head> <body> <p> 我是一個段落 </p> </body> </html>
9、CSS的繼承性
繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。
有一些屬性是能夠繼承下來的：color、font-*、text-*、line-* 都屬於文本元素；
除了上面這四種屬性能夠繼承，其餘屬性是不能繼承的，像一些盒子元素，定位的元素（浮動、絕對定位、固定定位）不能繼承。好比backgroud-color是不能繼承的，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>繼承性</title> <style type="text/css"> .father{ color: red; font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!--繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。 有一些屬性是能夠繼承下來的：color、font-*、text-*、line-* 文本元素； 像一些盒子元素，定位的元素（浮動、絕對定位、固定定位）不能繼承 --> <div class="father" id="egon"> <div class="child"> <p>alex</p> </div> </div> </body> </html>
從上例還能夠看出：繼承性也是知足多層繼承的，<p>既繼承了父<div>的字體顏色，也繼承了爺爺<div>的字體大小和背景顏色。
10、CSS的層疊性及選擇器的優先級
若是我經過不用的選擇器找到了相同的一個元素，而且設置了不一樣的樣式，那麼瀏覽器究竟應該按照哪個樣式渲染呢？也就是不一樣的選擇器它們的優先級是怎樣的呢？
它是按照下面的選擇器的權重規則來決定的。誰的權重大，瀏覽器就會顯示誰的屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層疊性</title> <style type="text/css"> /* id選擇器 1 0 0 */ #box{ color: red; } /* 類選擇器 0 1 0 */ .container{ color: yellow; } /* 元素選擇器 0 0 1 */ p{ color: gray; } </style> </head> <body> <!--層疊性：權重大的標籤覆蓋掉了權重小的標籤，說白了就是被幹掉了 權重：誰的權重大，瀏覽器就會顯示誰的屬性 誰的權重大？很是簡單——數數 id的數量 class的數量 標籤的數量 --> <p id="box" class="container"> 猜猜我是什麼顏色 </p> </body> </html>
上例中這三個選擇器在比較權重時，先比較最高位大小，再比較次一級的大小，以此類推。頁面顯示的是紅色。
層疊性：權重大的標籤覆蓋掉了權重小的標籤，說白了就是被幹掉了。
因爲選擇器的複雜性，多種選擇器組合時對比示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /* 2個id選擇器、1個元素選擇器 201 */ #box1 #box2 p{ /* 後代選擇器 */ color: yellow; } /* 1個id選擇器、1個類選擇器、1個元素選擇器 111 */ #box2 .wrap3 p{ color: red; } /* 1個id選擇器、3個元素選擇器 103 */ div div #box3 p{ color: purple; } /* 3個類選擇器、4個元素選擇器 034 */ div.wrap2 div.wrap2 div.wrap3 p{ color: blue; } </style> </head> <body> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div> </body> </html>
上例中權重最高的數值是201，所以顯示的是黃色，當註釋掉數值201這一項時，最高數值爲111，顯示爲紅色。
注意1：CSS層疊性權重相同的狀況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /* 1 1 1 */ #box1 .wrap2 p{ color: red; } /* 1 1 1 */ #box2 .wrap3 p{ color: yellow; } </style> </head> <body> <!--當權重同樣的時候，是後設置的屬性爲準。前提權重同樣，後來者居上--> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div> </body> </html>
上例中顯示黃色。
這是因爲當權重同樣時，是後設置的屬性爲準。（前提權重同樣，後來者居上）
注意2：區分元素屬性是繼承來的，仍是選擇來的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*!* 1 1 1 *!*/ /*#box1 .wrap2 p{*/ /*color: red;*/ /*}*/ /*!* 1 1 1 *!*/ /*#box2 .wrap3 p{*/ /*color: yellow;*/ /*}*/ /* 2 1 0 */ /*繼承來的*/ #box1 #box2 .wrap3{ color: red; } /* 1 1 1 */ /*選擇來的*/ #box2 .wrap3 p{ color: green; } </style> </head> <body> <!--當權重同樣的時候，是後設置的屬性爲準。前提權重同樣，後來者居上 繼承來的屬性權重爲0 總結： 先看有沒有被選中，若是被選中了，就數數（id,class,標籤數量）誰的權重大就顯示誰的 若是沒有被選中，則權重爲0。 若是屬性都是被繼承下來的，權重都是0，"就近原則"：誰描述得近就顯示誰。 --> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div> </body> </html>
繼承來得屬性權限是0。上例顯示紅色。選中了指的是選中了最內層的標籤。
優先級總結：
一、先看有沒有被選中，若是被選中了，就數數（id,class,標籤數量）誰的權重大就顯示誰的屬性；權重同樣大，後來者居上。
二、若是沒有被選中標籤元素(繼承來的屬性)，則權重爲0。若是屬性都是被繼承下來的，即權重都是0，"就近原則"：誰描述得近就顯示誰的屬性。若是都是被繼承的，且描述得也是同樣近，則再比較權重值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*!* 1 1 1 *!*/ /*#box1 .wrap2 p{*/ /*color: red;*/ /*}*/ /*!* 1 1 1 *!*/ /*#box2 .wrap3 p{*/ /*color: yellow;*/ /*}*/ /* 0 */ /*繼承來的*/ #box1 #box2 .wrap3{ color: red; } /*!* 1 1 1 *!*/ /*!*選擇來的*!*/ /*#box2 .wrap3 p{*/ /*color: green;*/ /*}*/ /*繼承來的*/ .wrap1 #box2{ color: green; } </style> </head> <body> <!--當權重同樣的時候，是後設置的屬性爲準。前提權重同樣，後來者居上 繼承來的屬性權重爲0 總結： 先看有沒有被選中，若是被選中了，就數數（id,class,標籤數量）誰的權重大就顯示誰的 若是沒有被選中，則權重爲0。 若是屬性都是被繼承下來的，權重都是0，"就近原則"：誰描述得近就顯示誰。 --> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div> </body> </html>
上例中，顯示顏色爲紅色。.wrap3更靠近<p>。
附加註意：!important設置權重無限大
這種方式能夠強制讓樣式生效。示例以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>權重深刻</title> <style type="text/css"> p{ color:red !important; font-size: 30px; } .spe1{ color: yellow; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color:red; } .list{ color: purple !important; /* 字仍是紅色，說明不影響繼承來的權限 */ } </style> </head> <body> <!-- ! important:設置權重無限大 !important不影響繼承來的權限 --> <div> <p class="spe1 spe2">我是什麼顏色</p> <p class="spe2 spe1">我是什麼顏色</p> </div> <div class="list"> <ul> <li> 我是一個Li標籤 </li> </ul> </div> </body> </html>
上例全部字都是紅色，一方面說明!important設置的權重是無限大的；另外一方面也說明!important設置的樣式若是是繼承給下級標籤的，那是不會生效的。
- 1. 前端之CSS——CSS選擇器
- 2. 【Web前端】CSS選擇器
- 3. 【Web 前端】CSS選擇器
- 4. web前端——css選擇器
- 5. 前端之css樣式（選擇器）。。。
- 6. 前端 之 CSS選擇器、樣式
- 7. css之選擇器
- 8. CSS 之 選擇器
- 9. CSS之選擇器
- 10. css -- css選擇器
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端之CSS——CSS選擇器
- 2. 【Web前端】CSS選擇器
- 3. 【Web 前端】CSS選擇器
- 4. web前端——css選擇器
- 5. 前端之css樣式（選擇器）。。。
- 6. 前端 之 CSS選擇器、樣式
- 7. css之選擇器
- 8. CSS 之 選擇器
- 9. CSS之選擇器
- 10. css -- css選擇器