css選擇器有哪些

1. css有哪些種類的選擇器

CSS選擇器如下：
1. 標簽名選擇器 div { color：Red;} /即頁面中的各個標簽名的css樣式
2.類選擇器 .divClass {color:Red;} /即定義的每個標簽的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} /即頁面中的標簽的id
4.後代選擇器（類選擇器的後代選擇器） .divClass span { color:Red;} /即多個選擇器以逗號的格式分隔 命名找到准確的標簽
5.群組選擇器 div,span,img {color:Red} /即具有相同樣式的標簽分組顯示
選擇器的優先順序
1.最高優先順序是 (直接在標簽中的設置樣式，假設級別為1000)<div style="color:Red;"></div>
2.次優先順序是（ID選擇器 ,假設級別為100） #myDiv{color:Red;}
3.其次優先順序是（類選擇器，假設級別為10） .divClass{color:Red;}
4.最後優先順序是 （標簽選擇器，假設級別是 1） div{color:Red;}
5.那麼後代選擇器的優先順序就可以計算了啊
比如 .divClass span { color:Red;} 優先順序別就是：10+1=11
想詳細的話可以參考W3C文檔。

2. CSS中的選擇器分幾種

1. 標簽名選擇器 div { color：Red;} 即頁面中的各個標簽名的css樣式
2.類選擇器 .divClass {color:Red;} 即定義的每個標簽的專class 中的屬css樣式

3.ID選擇器 #myDiv {color:Red;} 即頁面中的標簽的id

4.後代選擇器（類選擇器的後代選擇器） .divClass span { color:Red;} 即多個選擇器以逗號的格式分隔 命名找到准確的標簽

5.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標簽分組顯示

3. css選擇器有哪些

標簽選擇器
類選擇器
ID選擇器
全局選擇器
組合選擇器
繼承選擇器
偽類選擇器

4. 什麼是css選擇器字元串

css的選擇器是還是比較富的，主要的css選擇器如下：
標簽選擇器（如：body,div,p,ul,li）
.類選擇器（如：class="head",class="head_logo"）
ID選擇器（如：id="name",id="name_txt"）
全局選擇器（如：*號）
.組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開）
.繼承選擇器（如：div p,注意兩選擇器用空格鍵分開）
偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）
字元串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
以上選擇器在日常開發中最常用的就是標簽選擇器、類選擇器和id選擇器，下面是這三種選擇器的基本用法1、標簽名選擇器 一個XHTML文檔中有許多標簽，例如p標簽，h1標簽等。若要使文檔中的所有p標簽都使用同一個CSS樣式，就應使用標簽選擇器。

1
2

div {color:red;border:1px blue solid;}
p {color:#000;}

2、類選擇器 使用標簽選擇器可以為整個XHTML文檔中的同一個標簽指定相同的CSS樣式。但是在實際運用中，XHTML文檔中的同一個標簽會被反復使用。若要為相同的標簽賦予不同的CSS樣式就應使用類選擇器。

1
2

<div class="test">測試代碼</div>
.test {color:red;border:1px blue solid;}

3、id選擇器，id選擇器是唯一的，只可以獲取獨一無二的一個元素。

1
2

<div id="test">測試代碼</div>
#test {color:red;border:1px blue solid;}

5. css選擇器有哪些

1、類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應用聲明。例如，以下簡單規則的選擇器是H1，因此規則作用於文檔中所有的H1元素。

2、簡單屬性選擇器

CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。從本質上講，可以使用CLASS屬性來分類元素，在樣式表中創建規則來引用CLASS屬性的值，然後瀏覽器自動將這些屬性應用到該組元素。

類選擇器以標志符(句點)開頭，用於指示後面是哪種類型的選擇器。對於類選擇器，之所以選擇句點是因為在很多編程語言中它與術語"類"相關聯。翻譯成英語，標志符表示"帶有類名的元素"。

ID屬性

ID屬性的操作類似於CLASS屬性，但有一點重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用於設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是，ID選擇器的標志符是散列符號(#)。標志符用來提醒瀏覽器接下來出現的是ID值。

STYLE屬性

盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下，使用CSS，設計者將把所有的樣式規則置於一個樣式表中，該樣式表位於文檔頂部的STYLE元素內(或在外部進行鏈接)。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。

3、組合選擇器類型

可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更復雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求:它必須是正確的類型和正確的類以便使樣式規則可以作用於它。

外部信息:偽類和偽元素

在CSS1中，樣式通常是基於在HTML源代碼中出現的標記和屬性。對於很多設計情景而言這種做法完全可行，但是它無法實現設計者希望獲得的一些常見的設計效果。

設計偽類和偽元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中，使用偽類可以根據一些情況改變文檔中鏈接的樣式，如根據鏈接是否被訪問，何時被訪問以及用戶和文檔的交互方式來應用改變。藉助於偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現過的元素。

偽類和偽元素都不存在於HTML;也就是說，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充;也就是說實現更多的效果。

6. css樣式有哪幾種選擇器

CSS選擇器、優先順序與抄匹配原理
1.id 選擇器襲（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.偽類選擇器（a:hover,li:nth-child）
其中ID選擇器的效率是最高，而偽類選擇器的效率則是最低

CSS的權重

1. 通配選擇符的權值 0,0,0,0
2. 標簽的權值為 0,0,0,1
3. 類的權值為 0,0,1,0
4. 屬性選擇的權值為 0,0,1,0
5. 偽類選擇的權值為 0,0,1,0
6. 偽對象選擇的權值為 0,0,0,1
7. ID的權值為 0,1,0,0
8. important的權值為最高 1,0,0,0
使用規則： 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。
從上面我們可以得出兩個關鍵的因素：
1. 權值的大小跟選擇器的類型和數量有關
2. 樣式的優先順序跟樣式的定義順序有關

7. css復合選擇器有哪些

CSS復合選擇器包括子選擇器、相鄰選擇器、包含選擇器、多層選擇器嵌套、屬性選擇器、偽選擇器和偽元素選擇器，以上具體的使用如下，感興趣的朋友可以學習下
1.子選擇器
復制代碼 代碼如下:
<style type="text/css">
#pic>img{ // 使用 > 號，讓選擇器只選擇直接的子類，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="點擊大圖" /></span>
</div>
2.相鄰選擇器
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這個選擇器讀作：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。
3.包含選擇器
復制代碼 代碼如下:
#header p{font-size:14px}
#main p {font-size:12}
定義<div id = "header">包含框里的段落字體大小為14像素
定義<div id = "main">包含框里的段落字體大小為12像素.
4.多層選擇器嵌套
復制代碼 代碼如下:
#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}
5.屬性選擇器
（1）匹配屬性名選擇器
div[class] {font-size:24px;}
使該選擇器能夠匹配div中設置了class屬性的對象定義格式
（2)匹配屬性值選擇器
img[alt="圖像"][title="圖像"] {border：solid 2px red}：
給<img src="images/pic1.jpg" alt="圖像" title=「圖像」>定義樣式
(3)模糊匹配屬性值選擇器
6.偽選擇器和偽元素選擇器
復制代碼 代碼如下:
<style type ="text/css">
a:link{color:#FF0000} /*正常鏈接狀態下樣式*/
a:visited{color:#0000FF} /*被訪問之後的樣式*/
a:hover{color:#00FF00} /*滑鼠經過的樣式*/
a:active{color:#FF00FF} /*超鏈接被激活的樣式*/
</style>

8. 什麼是CSS的選擇器，包括哪幾種類型

在
CSS
中，選擇器是一種模式，用於選擇需要添加樣式的元素。
"CSS"
列指示該屬性是在哪個
CSS
版本中定義的。（CSS1、CSS2
還是
CSS3。）

選擇器
例子
例子描述
CSS
.class
.intro
選擇
class="intro"
的所有元素。
1
#id
#firstname
選擇
id="firstname"
的所有元素。
1
*
*
選擇所有元素。
2
element
p
選擇所有
<p>
元素。
1
element,element
div,p
選擇所有
<div>
元素和所有
<p>
元素。
1
element element
div
p
選擇
<div>
元素內部的所有
<p>
元素。
1
element>element
div>p
選擇父元素為
<div>
元素的所有
<p>
元素。
2
element+element
div+p
選擇緊接在
<div>
元素之後的所有
<p>
元素。
2
[attribute]
[target]
選擇帶有
target
屬性所有元素。
2
[attribute=value]
[target=_blank]
選擇
target="_blank"
的所有元素。
2
[attribute~=value]
[title~=flower]
選擇
title
屬性包含單詞
"flower"
的所有元素。
2
[attribute|=value]
[lang|=en]
選擇
lang
屬性值以
"en"
開頭的所有元素。
2
:link
a:link
選擇所有未被訪問的鏈接。
1
:visited
a:visited
選擇所有已被訪問的鏈接。
1
:active
a:active
選擇活動鏈接。
1
:hover
a:hover
選擇滑鼠指針位於其上的鏈接。
1
:focus
input:focus
選擇獲得焦點的
input
元素。
2
:first-letter
p:first-letter
選擇每個
<p>
元素的首字母。
1
:first-line
p:first-line
選擇每個
<p>
元素的首行。
1
:first-child
p:first-child
選擇屬於父元素的第一個子元素的每個
<p>
元素。
2
:before
p:before
在每個
<p>
元素的內容之前插入內容。
2
:after
p:after
在每個
<p>
元素的內容之後插入內容。
2
:lang(language)
p:lang(it)
選擇帶有以
"it"
開頭的
lang
屬性值的每個
<p>
元素。
2
element1~element2
p~ul
選擇前面有
<p>
元素的每個
<ul>
元素。
3
[attribute^=value]
a[src^="https"]
選擇其
src
屬性值以
"https"
開頭的每個
<a>
元素。
3
[attribute$=value]
a[src$=".pdf"]
選擇其
src
屬性以
".pdf"
結尾的所有
<a>
元素。
3
[attribute*=value]
a[src*="abc"]
選擇其
src
屬性中包含
"abc"
子串的每個
<a>
元素。
3
:first-of-type
p:first-of-type
選擇屬於其父元素的首個
<p>
元素的每個
<p>
元素。
3
:last-of-type
p:last-of-type
選擇屬於其父元素的最後
<p>
元素的每個
<p>
元素。
3
:only-of-type
p:only-of-type
選擇屬於其父元素唯一的
<p>
元素的每個
<p>
元素。
3
:only-child
p:only-child
選擇屬於其父元素的唯一子元素的每個
<p>
元素。
3
:nth-child(n)
p:nth-child(2)
選擇屬於其父元素的第二個子元素的每個
<p>
元素。
3
:nth-last-child(n)
p:nth-last-child(2)
同上，從最後一個子元素開始計數。
3
:nth-of-type(n)
p:nth-of-type(2)
選擇屬於其父元素第二個
<p>
元素的每個
<p>
元素。
3
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是從最後一個子元素開始計數。
3
:last-child
p:last-child
選擇屬於其父元素最後一個子元素每個
<p>
元素。
3
:root
:root
選擇文檔的根元素。
3
:empty
p:empty
選擇沒有子元素的每個
<p>
元素（包括文本節點）。
3
:target
#news:target
選擇當前活動的
#news
元素。
3
:enabled
input:enabled
選擇每個啟用的
<input>
元素。
3
:disabled
input:disabled
選擇每個禁用的
<input>
元素
3
:checked
input:checked
選擇每個被選中的
<input>
元素。
3
:not(selector)
:not(p)
選擇非
<p>
元素的每個元素。
3
::selection
::selection
選擇被用戶選取的元素部分。

9. 經常使用的css選擇器有哪些

css2.1有標簽選擇器、class選擇器、id選擇器
css3就多了，有偽類選擇器、屬性選擇器、偽元素、層級選擇器

10. css的五類選擇器有哪些

何止五類啊？ 常用的就有8類

• 標簽選擇器（如：回body,div,p,ul,li）

• .類選擇器（如：答class="head",class="head_logo"）

• ID選擇器（如：id="name",id="name_txt"）

• 全局選擇器（如：*號）

• .組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開）

• .繼承選擇器（如：div p,注意兩選擇器用空格鍵分開）

• 偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）

• 字元串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)