2. 程式人生 > >css中選擇器(selector)

css中選擇器(selector)

阿新 • • 發佈：2018-12-25

常用選擇器

最常用的選擇器型別時型別選擇器和後代選擇器。型別選擇器用來尋找特定型別的元素，比如段落或標題元素，只需指定希望特定型別的元素，比如段落或標題元素，只需要指定希望應用樣式的額元素的名稱。來興選擇器有時候也稱為元素選擇器或者簡單選擇器。

p{color : black;}
h1{font-weight:bold;}

後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器由其他兩個選擇器之間的空格表示。在這個示例中。值縮排是塊引用的後代的段落元素，其他所有段落不收影響。

blockquote p {padding-left:2em}

想要尋找特定的元素，可以使用ID選擇器

和類選擇器。

#intro {font-size:bold}
.date-posted{color:#ccc}
<p id="intro">Happy Birthday Andy</p>
<p class="date-posted">24/3/2009</p>

偽類，有時候，我們需要根據文件結構之外的其他條件對元素應用樣式，例如表單元素或連結的狀態。這要使用偽類選擇器來完成。

a:link{color:blue};
a:visited{color:green};
a:hover,a:focus,a:active{color:red}
tr:hover
 
{background-color:red}
input:focus{background-color:yellow}

: link和：visited稱為連結偽類，只能用於錨元素。：hover、:active和：focus稱為動態偽類，理論上可以應用於任何元素。大多數瀏覽器都支援這個功能。但是IE6只注意應用於錨鏈接的 : active和：hover,完全忽略：focus。IE7在任何元素上都支援:hover，但是忽略:active和：focusz。

通用選擇器

通用選擇器的作用就像是萬用字元，它匹配所有可用元素。

*{padding:0,margin:0}

高階選擇器

子選擇器和相鄰同胞選擇器

第一個高階選擇器是子選擇器。後代選擇器選擇一個元素的所有後代，而子選擇器值選擇元素的直接後代，即子元素。在下面的例子中，外層列表項顯示一個定製的圖示，而巢狀列表中的列表不受影響。

#nav>li{
    background:url(folder.png) no-repeat left top;
    padding-left:20px;
}
<ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li>
        <a href="/Services/">Services</a>
        <ul>
            <li><a href="/service/design">Design</a></li>
            <li><a href="/service/development">Development</a></li>
            <li><a href="/service/consultancy">Consultancy</a>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>

有時，你可能需要根據一個元素與另外一個元素的相鄰關係對應它的樣式。相鄰同胞選擇器可以同於定位同一個父元素下某個元素之後的元素。

h2 + p {
    font-size:1.4em;
    font-weight:bold;
    color:#777;
}
<h2>Peru</h2>
<p>The first  paragraph ...</p>
<p>The second paragraph...</p>

屬性選擇器

顧名思義，屬性選擇器可以根據某個屬性是否存在或者屬性的值來尋找元素，因此能夠實現某些有意思和強大的效果。

例如，當滑鼠停留在具有title屬性的元素上時，大多數瀏覽器會顯示一個工具提示。可以使用某些特性解釋某些內容（比如首字母縮拼詞和縮寫詞）的含義：

<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbrevitaion as it is pronounced as a word.</p>
arconym[title] {
    border-bottom : 1px dotted #999;
}
arconym[title]:hover,acronym[title]:focus{
    cursor : helper;
}

層疊和特殊性

即使在不太複雜的樣式表中，要尋找同一個元素可能有兩個或更多規則。CSS通過一個稱為層疊(cascade)的過程處理這種衝突。層疊給每個規則分配一個重要度。作者的樣式是由站點開發者編寫的，被認為是最重要的樣式開發表。使用者可以通過瀏覽器應用自己的樣式，這些樣式的重要度低一級。最後是瀏覽器或者使用者代理使用的預設樣式表，它們的重要度是最低的。

因此，層疊採用以下重要度次序。

標有！important的使用者樣式
標有！important的作者樣式表
作者樣式
使用者樣式
瀏覽器/使用者代理應用的樣式

然後，根據選擇器的特殊性決定規則的次序。具有更特殊選擇器的規則優於具有一般選擇器的規則。如果兩個規則的特殊性相同，那麼後定義的規則優先。

特殊性

為了計算規則的特殊性，給某種選擇器都分配一個數字值。然後，將規則的每個選擇器的值加在一起，計算出規則的特殊性。可惜特殊性的計算不是以10位基數的，而是採用一個更高的未指定的基數。這能確保非常特殊的選擇器（比如ID選擇器）不會被大量一般選擇器（比如類選擇器所超越）。但是為了簡化，如果在一個特定選擇其中的選擇器數量少於10個，可以以10位基數計算特殊性。

選擇器的特殊性分為4個成分等級：a、b、c和d。

如果樣式是行內樣式，那麼a=1
b等於ID選擇器的總數
c等於類、偽類和屬性選擇器的數量
d等於型別選擇器和偽元素選擇器的數量

選擇器 特殊性 以10位基數的特殊性
Style=”“ 1,0,0,0 1000
wrapper #content {} 0,2,0,0 200
content .datePosted {} 0,1,1,0 110
div#content {} 0,1,0,1 101
content {} 0,1,0,0 100
p.content .dateposted{} 0,0,2,1 21
p.content{} 0,0,1,1 11
div p {} 0,0,0,2 2
p {} 0,0,0,2 1

初看上去，上面的特殊性和更高的位指定的基數可能有點讓人糊塗。基本上，用style屬性編寫的規則總比其他任何規則特殊。具有ID選擇器的規則比沒有ID選擇器的規則特殊，具有類選擇的規則比只有類選擇器的規則特殊。最後，如果兩個規則的特殊性相同，那麼後定義的規則優先。

#content div#main-content h2{
    color:gray;
}
#content #main-content>h2{
    color:blue;
}
body #content div[id="main-content"] h2{
    color: green;
}
#main-content div.news-story h2{
    color:orange;
}
#main-content [class="new-story"] h2{
    color:yellow;
}
div#main-content div.news-story h2.first{
    color:red;
}
<div id="content">
    <div id="main-content">
        <h2>......</h2>
        <p>......</p>
        <div class="new-story">
            <h2 class="first">......</h2>
            <p>......</p>
        </div>
    </div>
</div>

令人吃驚的是，兩個標題都是灰色的。第一個選擇器是由兩個ID選擇器組成，因此它具有最高特殊性。後面一些選擇器看起來更負責，但是因為它們只包含一個ID，所以特殊性總是低於第一個選擇器。

在樣式表中使用特殊性

例如，如果你希望站點上大多數文字是黑色的，但介紹說明文字是灰色的，這一這樣做：

p{color:black;}
p.intro{color:grey}

對於小網站，這很好。但是，在大型站點上，你會發現例外的情況越來越多。就會過分的混亂。儘量保持一般樣式非常一般，特殊樣式儘可能特殊。

在主體上新增類或ID

一種有意思的特殊用法是在主體(body)標籤上應用類或者ID。這樣做之後，就可以根據頁面或者站點範圍內覆蓋樣式。例如，如果希望新的頁面具有特殊的佈局，那麼可以在主頁的主體元素上新增一個類名，並且使用它覆蓋樣式。

body.news{
    /*do some stuff*/
}
<body class="news">
    <p>......</p>
</body>

有時候，在特殊頁面上需要覆蓋這些樣式，比如在新聞存檔頁面上。在這種情況下，可以在主體標籤上新增ID來標識這個頁面。

body.news{
    /*do some stuff*/
}
<body>
    <p>......</p>
</body>

有時候，在特殊頁面上需要覆蓋這樣的樣式，比如在新聞存檔頁面上。在這種情況下，可以在主體標籤上新增ID來表示這個頁面。

body.news{
    /*do some stuff*/
}
body#archive{
    /* do some different stuff*/
}
<body id="archive" class="news">
    <p>......</p>
</body>

使用類標識頁面型別，使用ID表示特定頁面，就可以非常靈活地控制站點的設計和佈局。

繼承

人們常常將繼承和層疊混為一談。儘管他們初看上去有點兒相似，但是這兩個概念實際上是很不一樣的。好在，繼承是一個非常容易理解的概念。應用樣式的元素的後代會繼承樣式的某些屬性，比如顏色和字號。例如，如果將主體元素的文字顏色設定成黑色，那麼主體元素的所有後代也顯示黑色文字。對於字號，也是這樣的。如果將主體的字號設定為1.4em,那麼頁面上的所有內容都會繼承這個字號。

如果主體設定字號。你會注意到頁面上的任何標題都沒有采用這個樣式。你可能會認為標題沒有繼承文字字號。但是，實際上是瀏覽器的預設樣式表設定了標題字號。直接用於元素的任何樣式總會覆蓋繼承而來的樣式，這是因為繼承未來的樣式的特殊性為空。

繼承這一樣式非誠有用，因為它使開發人員不必在每個後代上新增相同的樣式。如果打算設定的屬性是繼承而來的屬性，那麼也可以將它應用於父元素。

規劃、組織和維護樣式表

站點越大、越複雜，圖形越豐富，CSS就越難管理。

對文件應用樣式

將外部的樣式表附加到網頁上有兩種方法。可以連結它們，也可以匯入它們：

<link href="/css/basic.css" rel="stylesheet" type="text/css">
<style type="text/css">
    <!--
    @import url("/css/advanced.css");
    -->
</style>

除了匯入到HTML文件之外，還可以從另一個樣式表中匯入樣式表。因此，你可以從HTML頁面連結基本樣式表，然後將複雜的樣式表匯入這個樣式表。

@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);

在CSS中添加註釋非常簡單。新增程式碼註釋是非常好的習慣。

如果CSS檔案非常長，那麼尋找特定的樣式會非常困難。一種改進的方法是在每個註釋頭中新增一個標誌。這個標誌僅僅是頭部文字前面新增一個額外字元，一般不會出現在CSS檔案中。

設計程式碼的結構

為了便於維護，最好把樣式劃分為幾大塊。顯然，常常把最一般的規則放在最前面。這包括應用於body標記的、應該由站點上所有元素繼承的樣式。接下來是可能需要的所有全域性reset樣式，然後是連結、標題和其他元素。

完成一般樣式之後，開始處理更特殊的樣式和輔助樣式。這些是在整個站點中使用的一般類，包括表單錯誤資訊等方面。然後，處理佈局和導航等結構性元素。

隨著在樣式表中的移動，我們在一層樣式上構建另一層樣式，處理的樣式越來越特殊，處理完頁面結構元素之後，我們把注意力轉到特定頁面相關的元件上。最後，在文件底部處理覆蓋和例外情況。整個文件的結構像下面這樣：

  • 一般性樣式

    • 主體樣式
    • reset樣式
    • 連結
    • 標題
    • 其他元素

  • 輔助樣式

    • 表單
    • 通知和錯誤
    • 一致的條目

  • 頁面結構

    • 標題、頁尾和導航
    • 佈局
    • 其他頁面結構元素

  • 頁面元件

    • 各個頁面

這裡使用一種風格統一的大註釋塊分隔每個部分。

/* @group general styles
----------------------------------------------------------------------------------*/

/* @group helper styles
----------------------------------------------------------------------------------*/

/* @group page structure
----------------------------------------------------------------------------------*/

/* @group page components
----------------------------------------------------------------------------------*/

/* @group overrides
----------------------------------------------------------------------------------*/

自我提示

對於負責的大型專案，在css檔案中新增臨時的註釋常常對開發有幫助。這些註釋可以提醒你在啟動前需要完成哪些工作，或者提醒你列寬度等常用值得查詢表。

刪除註釋和優化樣式表

註釋會使CSS檔案顯著增大。因此，你可能需要從樣式中去掉一些註釋。許多HTML/CSS和文字編輯器都有搜尋和替換選項，因此從程式碼中刪除註釋很容易。另外，還可以使用幾種線上CSS優化器。優化器不但能夠刪除註釋，還可以刪除空白，還可以從程式碼中去掉額外的位元組。如果要從當前使用的樣式表中刪除註釋，一定要保留帶註釋的版本。管理這個過程中最好的方法是建立一個部署指令碼，當你修改的內容在生產環境中生效時，他會自動刪除註釋。但是因為這是一種高階技術，可能只適用於很大的複雜站點。

減小檔案大小的最好方法是啟用伺服器端壓縮。如果使用Apache伺服器，那麼應該安裝mod_gzip或mod_deflate。所有現代瀏覽器都可以處理用GZIP壓縮的檔案並進行解壓。這些apache模組探測瀏覽器是否能夠處理這種檔案，如果可以，接傳送壓縮的版本。伺服器端壓縮能夠將這個HTML和CSS檔案減少80%，這就可以減少對寬頻的佔用。

相關推薦

css中選擇器(selector)

常用選擇器 最常用的選擇器型別時型別選擇器和後代選擇器。型別選擇器用來尋找特定型別的元素，比如段落或標題元素，只需指定希望特定型別的元素，比如段落或標題元素，只需要指定希望應用樣式的額元素的名稱。來興選擇器有時候也稱為元素選擇器或者簡單選擇器。 p{co

CSS中選擇器權重計算的例題

css第一題：根據以上代碼，我們來判斷一下P語句中的“文字”到底是什麽顏色？#box1 .spec2 p 這是第一個，根據權重判斷，我們可以看出有一個id選擇器，一個類選擇器，一個標簽選擇器，其權重應該是1,1,1div div #box3 p 這是第二個，我們可以看出有一個id選擇器，沒有類選擇器，3個標簽

CSS中選擇器以及偽類和偽元素選擇器

3.5結構選擇器 （1）後代選擇器：可以選擇一個元素的後代元素，這個後代元素包括兒子，孫子，以及後代結構。 <<style type="text/css">         .content a{             font-size: 25px;

關於css中選擇器優先順序的總結

上一篇博文中對於現有的css的選擇器進行了總結。接下來對於css中的優先順序進行一下總結，總結可能不盡精確，如有不妥之處，還望前輩即時指出。 css選擇器優先順序 開發中可能會遇到這樣的問題，在兩個css選擇器都能定位到某元素，但是瀏覽器按照哪個選擇器定

00-css中選擇器的複習

css選擇器的使用相關的複習 div>p: 子代 div+p： div後面相鄰的第一個p div~p: div後面所有的兄弟p 屬性選擇器 id選擇器 # 通過id 來選擇

CSS | css類選擇器中的空格

導讀：有時候遇到css類選擇器中間沒有空格的，應用兩個類樣式都有效果，但是加個空格在類選擇器中間，有的樣式就沒有效果了，這是為什麼呢？？ 無空格 .m-nav.nav-expanded {} 這兩個樣式同級，class中同時有.m-nav和.nav-e

sass中選擇器，css中的選擇器可以直接使用;

from: https://www.sass.hk/guide/ 這裡繼承 混合器等 講解比較簡單，具體環境中會有各種問題--- article { ~ article {

CSS相鄰選擇器(>)選擇子元素而不包含該子元素的子元素，及如何讓DIV中的內容垂直居中

1、CSS 相鄰選擇器“>”，其作用是選擇某元素子元素，而不包含該子元素的子元素 <!DOCTYPE HTML> <html> <head> <style type="text/css">

android中listview的item點選切換實現效果（選擇器selector）

public class V2_Adapter_TarentoCreateActivity_OverSea_City extends BaseAdapter{private V2_TarentoCreateActivity_OverSea_Place v2_TarentoCreateActivity_Over

CSS關聯選擇器的大致類型總結

子元素 類型 括號 中間 大括號 作用 第一個 關聯 選擇符 1.包含選擇符（A F） 選擇所有被A元素包含的F元素，中間用空格隔開 2.子選擇符（A>F） 選擇所有作為A元素的直接子元素F，對更深一層的元素不起作用，用大括號表示。 3.相鄰選擇符（A+F）選擇緊貼在

CSS-聯合選擇器

range html relative :active reset checkbox 統一 圖像 otto 深層布局，逐級進去，指向某一個標簽，叫：關聯選擇器 - 設置嵌套標簽的樣式 div p {} day02 昨天內容回顧 1

CSS同時選擇器

cnblogs code log blank sch css style warning 我們 【CSS同時選擇器】 　　同一個div擁有多個class時，我們可以作多個class作為組合來選擇對象。方法就是將多個.className直接連接在一起（中間不能有空格）。

5 css類選擇器的使用

ext har code spa doctype font utf-8 meta title <!doctype html> <html> <head> <meta charset="utf-8"> <title>

css的選擇器的優先級

相同 之間 混淆 但是 大小 選擇器 優先級 class 標簽 css覆蓋是在打代碼的時候，開發者很普通很普通，也是很經常經常用到的，但是容易混淆他們之間的優先級。 【】【】【】 第一個是id，第二個是class，第三個是元素名。有一個就加一。比較這個三位數的大小，越大優先

CSS常用選擇器記錄-:nth-of-type(n)

center pan col eight 記錄 logs round css 子元素 :nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。 .step_icon3 li.item{ wid

HTML學習筆記 CSS學習選擇器 第五節 （原創）

ext spa family 如果 styles ctype css gre utf <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

HTML學習筆記 CSS學習選擇器案例 第五節 （原創） 參考使用表

樣式 back ack aid head 派生選擇器 char logs pan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Css 後代選擇器與子代選擇器的區別

javascrip width 沒有 什麽 for -1 adding 選擇器 light 後代選擇器用空格，比如A B｛border:1px solid red;｝ 子代選擇器用>, 比如A>B｛border:1px solid red;｝ 但是，如果你仔

【css】選擇器

通配符選擇器標簽、通配符選擇器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽選擇器</title> <styl

CSS屬性選擇器

images 選擇器 cnblogs src .cn image mage log ges CSS屬性選擇器