CSS 選擇器常見型別

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

E、F、G代表任意元素；attribute【簡寫成attr】代表任意元素的屬性，value代表屬性的屬性值；

基本選擇符：

基本選擇器符號/其他標記	語法	名稱	說明	範例	版本
*（星號）	* {property:value;}	通用選擇器	匹配所以元素	p *{color:#00FF00}	CSS2
E	E{property:value;}	型別選擇器	匹配指定標記的元素	p{color:#00FF00}	CSS1
#（井號）	#myid{property:value;} E#myid{property:value;}	ID選擇器	匹配唯一標識id屬性為myid的E元素	#intor{text-align:center}	CSS1
.（實點）	.myclass{property:value;} E.myclass{property:value;}	類選擇器	匹配class屬性為myclassd的所有E元素	.important {color:red;} p.important {color:red;} .important.urgent {background:silver;}	CSS1

瀏覽器測試： Chrome 60.0.3112.113、IE 11.0、Firefox 55

通用選擇器：
在通用選擇，寫有“*”，匹配任意元素型別的名稱。它匹配文件樹中的任何單個元素。
如果通用選擇器不是簡單選擇器的唯一元件，則可以省略“*”。例如：
- *[lang=fr] 並且[lang=fr]是相當的。
- *.warning並且.warning是相當的。
- *#myid並且#myid是相當的。

注意：
1、任意元素或選擇器的前面放在 *；
2、* 和任意元素或選擇器之間新增空格；

樣例：
CSS 四種程式碼：

*{
    font-family:"Microsoft YaHei"; /*關於微軟雅黑字型呈現效果：使用"YaHei":Chrome、Firefox呈現效果，而IE無法顯示；使用"Microsoft YaHei"：Chrome、Firefox、IE都能呈現效果。*/ 

}

* p{
    color:#0000FF;
    text-decration:underline;
}

* .container{
    border: 1px solid #0000ff;
}

.container{
    border:1px solid #0000ff;
    width:220px;
    *width:300px;
}

HTML程式碼一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
    * .container{
        border: 1px solid #0000ff;
    }
    </style>
</head>
<body>
    <p><span class="container">通用選擇器</span>全體元素都受到影響</p>
    <p>這個段落不受該樣式的影響。</p>
    <hr/>
    <ul class="container">雪糕味道：
        <li>芒果味</li>
        <li><strong>茉莉</strong>味</li>
        <li>草莓味</li>
        <li>巧克力味</li>
    </ul>
    <p class="container">h1~h2 標題效果：</p>
    <h1 class="container">一級標題</h1>
    <h2>二級標題</h2>
</body>
</html>

執行結果：
這裡寫圖片描述

Chrome、Firefox、IE呈現效果一樣。

HTML程式碼二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
    .container{
        border:1px solid #0000ff;
        width:220px;
        *width:300px;
    }
    </style>
</head>
<body>
    <p><span class="container">通用選擇器</span>全體元素都受到影響</p>
    <p>這個段落不受該樣式的影響。</p>
    <hr/>
    <ul class="container">雪糕味道：
        <li>芒果味</li>
        <li><strong>茉莉</strong>味</li>
        <li>草莓味</li>
        <li>巧克力味</li>
    </ul>
    <p class="container">h1~h2 標題效果：</p>
    <h1 class="container">一級標題</h1>
    <h2>二級標題</h2>
</body>
</html>

執行結果：
這裡寫圖片描述
Chrome、Firefox、IE呈現效果一樣。

關於CSS hack問題：
由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。

型別選擇器
樣例：
CSS 程式碼：

p{
    color:#0000FF;
    text-decration:underline;
}

h1{
    color:color:#01eecc;
}

li{
    color:#07aa00;
}

HTML程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        p{
            color:#0000FF;
            text-decration:underline;
        }
        h1{
            color:#01eecc;
        }
        li{
            color:#07aa00;
        }       
    </style>

</head>
<body>
    <ul>雪糕味道：
        <li>芒果味</li>
        <li><strong>茉莉</strong>味</li>
        <li>草莓味</li>
        <li>巧克力味</li>
    </ul>
    <p>h1~h2 標題效果：</p>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
</body>
</html>

執行結果：
這裡寫圖片描述

Chrome、Firefox、IE呈現效果一樣。

關係選擇器：

關係選擇器	語法	名稱	說明	版本
, （逗號）	E,F,G{property:value;}	選擇器分組	選擇所有的E元素、F元素和G元素	CSS1
空格	E F{property:value;}	包含選擇符/後代選擇器	選擇所有被E元素包含或者後代的F元素	CSS1
>（大於）	E>F{property:value;}	子元素選擇器	選擇所有作為E元素的子元素F	CSS2
+（加號）	E+F{property:value;}	相鄰選擇器	選擇緊貼在E元素之後的F元素	CSS2
~（波浪號）	E~F{property:value;}	間接相鄰選擇器	選擇緊跟E元素之後相鄰的全部元素F	CSS3

屬性選擇器：

注意：E 代表任意元素。
這裡寫圖片描述

簡單屬性選擇：E[attr]
CSS 程式碼：

<style src="text/css">
/*兩個[]方括號之間不能有空格，否者無法呈現效果*/
    *[title] {color:red;}
    a[href][title]{color:#ff0000;}
    img[alt]{border: 10px solid #32db18;}
</style>

HTML 程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        a[href][title]{color:#ff0000;}
        img[alt]{border: 10px solid #32db18;}
    </style>
</head>
<body>
    <p>被應用樣式：</p>
    <a href="http://new.baidu.com" title="百度新聞搜尋——全球最大的中文新聞平臺">百度新聞</a>
    <a href="http://http://www.csdn.net" title="CSDN首頁">CSDN官網</a>
    <a href="http://http://image.baidu.com" title="百度圖片-發現多彩世界">百度圖片</a><br/><br/>
    <img src="./time.png" align="baseline" alt="頭像"/>

    <p>無法應用樣式：</p>
    <a href="http://new.baidu.com/society" name="百度新聞">社會新聞</a>
    <a href="http://http://www.csdn.net" >CSDN官網</a>
    <a title="CSDN首頁">CSDN官網</a>
</body>
</html>

執行結果：
這裡寫圖片描述

根據具體屬性值選擇
CSS 程式碼：

<style src="text/css">
    a[href="http://new.baidu.com"]{color: #e20600;}
    /*兩個[]方括號之間不能有空格，否者無法呈現效果*/
    a[href="http://new.baidu.com"][title="百度新聞"]{color: #CC2582;}
    /*結合class選擇器使用*/
    p[class="important warning"] {color:#24CC03;} 
</style>

HTML 程式碼1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>test測試</title>
    <head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        a[href="http://new.baidu.com"]{color: #e20600;}
    </style>
</head>
<body>

    <p class="important warning">被應用樣式：</p>
    <a href="http://new.baidu.com" title="百度新聞">百度新聞</a>


    <p class="important">無法應用樣式：</p>
    <a href="http://new.baidu.com/gounei" title="百度新聞">國內新聞</a>
    <a href="http://new.baidu.com/gouji" title="百度新聞">國際新聞</a>
    <a href="http://http://image.baidu.com" title="百度圖片-發現多彩世界">百度圖片</a>
    <a href="http://http://www.csdn.net" title="CSDN首頁">CSDN官網</a>
</body>
</html>

執行效果：
這裡寫圖片描述

HTM 程式碼2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        a[href="http://new.baidu.com"][title="百度新聞"]{color: #CC2582;}
        p[class="important warning"] {color:#24CC03;}
    </style>
</head>
<body>
    <p class="important warning">被應用樣式：</p>
    <a href="http://new.baidu.com" title="百度新聞">百度新聞</a>

    <p class="important">無法應用樣式：</p>
    <a href="http://new.baidu.com/gounei" title="百度新聞">國內新聞</a>
    <a href="http://http://image.baidu.com" title="百度圖片-發現多彩世界">百度圖片</a>
    <a href="http://http://www.csdn.net" title="CSDN首頁">CSDN官網</a>
</body>
</html>

執行結果：
這裡寫圖片描述

根據部分屬性值選擇
CSS 程式碼：

<style src="text/css">
    p[class~="important"]{color:#24CC03;}
</style>

HTML 程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        p[class~="important"]{color:#24CC03;}
    </style>
</head>
<body>
    <p class="important warning">第一段落被應用樣式</p>
    <p class="important">第二段落被應用樣式</p>
    <p class="warning">第三段落無法應用樣式：</p>
</body>
</html>

執行結果：
這裡寫圖片描述

部分值屬性選擇器與點號類名記法的區別
CSS 程式碼：

<style src="text/css">
    img[title~="Figure"]{border: 1px solid gray;}
</style>

HTML 程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        img[title~="Figure"]
        {
            border: 10px solid gray;
        }
    </style>
</head>
<body>
    <h2>可以應用樣式：</h2>
    <img title="Figure 1" src="松鼠.png" />
    <img title="Figure 2" src="兔子.png" />
    <hr />
    <h1>無法應用樣式：</h1>
    <img src="松鼠.png" />
    <img src="兔子.png" />
</body>
</html>

執行結果：
這裡寫圖片描述

子串匹配屬性選擇器
* E[attr*=”value”] 選擇器
CSS 程式碼：

<style src="text/css">
    a[href*="http://new.baidu.com"][title="百度新聞"]{color: #136c97;}
</style>

E[attr^=”value”] 選擇器**
CSS 程式碼：

<style src="text/css">
    a[href^="http"]{color:#ff0000;}
</style>

E[attr$=”value”] 選擇器
CSS 程式碼：

<style src="text/css">
    /*匹配屬性值以指定值結尾的每個元素。如下兩個CSS樣式，效果不同*/
    p[class$="test"]{background:#ffff00;}
    [class$="test"]{background:#FF8329;} 

</style>

HTML 程式碼一：

<!DOCTYPE html>
<html>
<head lang="zh-HK">
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        p[class$="test"]
        {
            background:#ffff00;
        }
    </style>
</head>
<body>

    <p class="first_test">第一段落有應用樣式。</p>
    <p class="second">第二段落無法應用樣式。</p>
    <p class="test">第三段落有應用樣式。</p>
    <h2 class="test">標題無法應用樣式。</h2>

</body>
</html>

HTML 程式碼二：

<!DOCTYPE html>
<html>
<head lang="zh-HK">
    <meta charset="utf-8">
    <title>test測試</title>
    <style type="text/css">
        [class$="test"]
        {
            background:#FF8329;
        }
    </style>
</head>
<body>

    <p class="first_test">第一段落有應用樣式。</p>
    <p class="second">第二段落無法應用樣式。</p>
    <p class="test">第三段落有應用樣式。</p>
    <h2 class="test">標題無法應用樣式。</h2>

</body>
</html>

E[attr|=”value”]選擇器
CSS 程式碼：

<style src="text/css">
[lang|=en]{background:yellow;}
[class|=top]{background-color:yellow;}
</style>

HTML 程式碼:

<!DOCTYPE html>
<html>
<head>
    <style>
        [class|=top]
        {
            background:yellow;
        }
    </style>
</head>

<body>
    <h1 class="top-header">Welcome</h1>
    <p class="top-text">Hello world!</p>
    <p class="content">Are you learning CSS?</p>

    <p><b>註釋：</b>對於 IE8 及更早版本的瀏覽器中的 [attribute|=value]，必須宣告 <!DOCTYPE>。</p>
</body>
</html>

結構偽類選擇器：

注意：E 代表任意元素。

偽類選擇器	語法	說明	版本
:root	E:root{property:value;}	選擇匹配E 元素所有文件的根元素	CSS2
:not(s)	E:not(s){property:value;}	選擇匹配所有不匹配簡單選擇器s 的E 元素	CSS3
:empty	E:empty{property:value;}	匹配沒有任何子元素（包括text節點）的元素E	CSS3
:target	E:target{property:value;}	匹配當前連結地址指向的E 元素	CSS3
:first-child	E:first-child{property:value;}	匹配父元素的第一個子元素E	CSS3
:last-child	E:last-child{property:value;}	匹配父元素的最後一個子元素E	CSS2
:n-child(n)	E:n-child(n){property:value;}	匹配父元素的第n 個子元素E	CSS3
:n-last-child(n)	E:n-last-child(n){property:value;}	匹配父元素的倒數第n 個子元素E	CSS3
:only-child	E:only-child{property:value;}	匹配父元素的僅有的一個子元素E	CSS3
:first-of-type	E:first-of-type{property:value;}	匹配同類型中的第一個同級兄弟元素E	CSS3
:last-of-type	E:last-of-type{property:value;}	匹配同類型中的最後一個同級兄弟元素E	CSS3
:only-of-type	E:only-of-type{property:value;}	匹配同類型中的唯一一個同級兄弟元素E	CSS3
:nth-of-type(n)	E:nth-of-type(n){property:value;}	匹配同類型中的第n 個同級兄弟元素E	CSS3
:nth-last-of-type(n)	E:nth-last-of-type(n){property:value;}	匹配同類型中的倒數第n 個同級兄弟元素E	CSS3

其中，E:nth-child(n)中的引數n，可以是一個數字，可以是關鍵字odd或even，可以是公式2n或2n-1等，n的索引起始值為1。

狀態偽類選擇器：

偽類選擇器	語法	說明	版本
:link	E:link{property:value;}	設定未訪問的連結	CSS1
:visited	E:visited{property:value;}	設定已訪問的連結	CSS1
:hover	E:hover{property:value;}	設定游標移動到連結上時	CSS1/CSS2
:active	E:active{property:value;}	設定選定的連結	CSS1/CSS2
:focus	E:focus{property:value;}	設定元素在成為焦點（onfocus事情發生）時的樣式	CSS1/CSS2
:checked	E:checked{property:value;}	匹配表單上處於選中狀態的元素E (radio 和 checkbox)	CSS3
:enabled	E:enabled{property:value;}	匹配表單上處於可以狀態的元素E	CSS3
:disabled	E:disabled{property:value;}	匹配表單上處於禁用狀態的元素E	CSS3

偽元素選擇器：

偽類選擇器	語法	說明	版本
:first-letter/::first-letter	E :first-letter{property:value;}	設定物件內的第一個字元的樣式	CSS1/CSS3
:first-line/::first-line	E :first-line{property:value;}	設定物件內的第一行的樣式	CSS1/CSS3
:before/::before	E :before{property:value;}	設定在物件前發生的內容，與content 屬性一起用	CSS2/CSS3
:after/::after	E :after{property:value;}	設定在物件前發生的內容，與content 屬性一起用	CSS2/CSS3
::selection	E ::selection{property:value;}	設定在物件被選擇時的顏色	CSS3

CSS 選擇器常見型別

E、F、G代表任意元素；attribute【簡寫成attr】代表任意元素的屬性，value代表屬性的屬性值；基本選擇符：基本選擇器符號/其他標記語法名稱說明範例版本 *（星號） * {property

CSS選擇器之最常見的交集選擇器和並集選擇器

由於太常見，上篇文章漏掉了2種最常見的組合選擇器：1.並集選擇器S1,S2[,S3...]2.交集選擇器S1S2[S3...]，注意交集選擇器的各個選擇器的排列順序是要遵循能被解析的原則的（For Example:選擇p和.class1的交集，p.class1可行，但是.cl

CSS選擇器型別

關係選擇器包含選擇符（E F）選擇所有被E元素包含的F元素，中間用空格隔開 <head> <style> ul li{color:red;} </style> </head&

css 選擇器型別分類

今天回憶特殊性的時候，突然被大片的選擇器名稱搞混了。。腦袋不好。還是整理下。首先是簡單的兩種選擇器: 1，id選擇器，就是帶#的，只能在頁面裡被引用一次。 2，類選擇器，就是帶.的，可以多次應用。 3，其次是型別選擇器（也叫簡單選擇器）類似p a h1 div等等元素。 4

css樣式選擇器的型別---lesson2

css樣式選擇器有4類： 1、類選擇器，可以作用任何html元素 2、id選擇器，僅用於一個html元素 3、標籤選擇器，用於相同的html標籤元素 4、複合內容選擇器，基於選擇的內容基本使用範例：

1.css選擇器，字型常見屬性

１.1 選擇器：選擇頁面上的某一個元素。 1.0標籤選擇器： 2.0類選擇器： .類名 3.0id選擇器: #id名 4.0使用類選擇器和id選擇器的注意點：類名和id名的命名規則** １.2 字型樣式相關的屬性： Font:Font-style font-wei

CSS選擇器-常用搜集

優先級規則 id選擇器前端類選擇器 -c 順序 col 通過結果

通過css選擇器class給元素添加cursor的坑

tex height ssh 等於 light help 通過 first foo 筆者在chrome中遇到了奇特的問題，在通過class給元素添加cursor的自定義圖片時。出現了"Invald property value"提示，crosshair、help等屬性值可以

CSS 選擇器

ade popu type tle baseline 有著 tar name fcm 1、ID選擇器2、CLASS選器3、屬性選擇器能夠為擁有指定屬性的 HTML 元素設置樣式，而不僅限於 class 和 id 屬性。凝視：僅僅有在規定了 !DOCTYPE 時。IE7

CSS選擇器的權重與優先規

屬性元素選擇器 1=1 style div 我們表達等級 nav 我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。 4個等級的定義如下：第一等：代表內聯樣式，如: s

css選擇器

tro hover best 屬性選擇器後代選擇器 clas 類名 ext 屬性選擇器有哪些？？1.id選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選

CSS選擇器手冊

active http enable class pty body -o con :hover CSS選擇器手冊選擇器選擇器名稱例子例子描述CSS E.class 類選擇器 E.intro 選擇 class="intro" 的所有E元素。

css選擇器的優先級

css選擇器入門

block 狀態標簽高級 auto src ext logs 選擇（1）id選擇器（只舉一例）（2）類選擇器（只舉一例）（3）標簽選擇器（高級：屬性選擇器）　　 1）普通標簽選擇器：（只舉一例）　　 2）高級標簽選擇器：屬性選擇器（只舉一例

KHL 001 11-計算機-本職-前臺 CSS選擇器

計算機 images gin visit 偽類 :active code png css3 CSS3 選擇器分類動態偽類選擇器錨點偽類的設置順序必須遵守一個”LoVe/HAte”原則，也就是說正確的設置順序為： a:link、a:visited、a:

關於css選擇器的一些事第一章基本選擇器！

images 後代選擇器 select 頁面選擇器 http style 多人 com 關於選擇器，好多人小夥伴只用了最基本的幾個選擇器，感覺這玩意沒有啥學的，講道理，確實也沒啥學的。但是，選擇器種類掌握的越多，編寫代碼起來就會越輕松，為啥呢。舉個例子吧！先上一串代碼和效

CSS選擇器的簡單整理

css p s 一起 .class 插入必須 gin 瀏覽器 true 標簽選擇器直接選擇標簽 p{ //聲明 } 2. 類選擇器給元素設置一個className，通過.className選擇到相同className的元素 classNa

我的web前端學習之路-CSS-選擇器

選擇產生之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽直接指定一個準確元素名，對其產生作用指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！（註意！！）class屬性的值可以用空格隔開表示多個cla

第七篇 css選擇器實現字段解析

resp 文章 elf span ext div ant rec normalize CSS選擇器的作用實際和xpath的一樣，都是為了定位具體的元素舉例我要爬取下面這個頁面的標題 In [20]: title = response.css(".ent

CSS選擇器操作大全

lin enter 屬性子元素支持 ron 僅支持常用所有一，CSS選擇器分類二，選擇器語法 1，基本選擇器語法選擇器類型功能描述 * 通配選擇器選擇文檔中所以HTML元素 E 元素選擇器選擇指定類型的HTML元素 #id

CSS 選擇器常見型別

基本選擇符：

瀏覽器測試： Chrome 60.0.3112.113、IE 11.0、Firefox 55

關係選擇器：

屬性選擇器：

結構偽類選擇器：

狀態偽類選擇器：

偽元素選擇器：

相關推薦