建站
咨詢
售后
建站咨詢
新聞中心
css選擇器類型
h1, h2, p {}? ?//? 選擇所有的h1,h2,p? ? ??
成都網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設公司、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。核心團隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都效果圖設計等眾多領域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱揚！
1、后代選擇器? (包含選擇器)：?以空格隔開包含關系的元素
2、子選擇器??以隔開父子級元素
3、兄弟選擇器 ~ +
1、.tab p[title]:{ color: red} 選擇所有帶有title屬性的p標簽
2、.tab p[title = 'name']: { color: red} 選擇所有title=name屬性的標簽
3、.tab p[title ^= 'na'] :{}? 選擇開頭title屬性帶有na開頭的標簽
4、.tab p[title$= 'po'] :{}? 選擇title屬性結尾是po的標簽
5、.tab p[title *= 'name'] 只要含有name值就行的標簽
6、.tab p[title ~= 'name flower'] 包含name的屬性的標簽
7、.tab p[title |= 'name'] 以name開頭的屬性的標簽
偽類不僅可以作用在a鏈接上，還可以作用在其他元素上
:link? 未訪問過的鏈接
:visited 訪問過的鏈接
:active 鼠標點擊的一瞬間
:hover? 鼠標懸浮在鏈接上
:focus 具有焦點的輸入元素 innput(將輸入的外邊框去掉 :focus{ outline: none})
:target 錨點目標選擇器
:root? 文檔的根選擇器
:empty? 空選擇器，沒有任何子集的元素
:first-child? div下所有孩子中的第一個
:last-child div下所有孩子中的最后一個
:first-of-type div下類型為p的第一個元素
:last-of-type? div下類型為p的最后一個元素
:nth-child(2)??選擇每個p元素是其父級的第二個子元素， 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。
:nth-last-child(n) 選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
:nth-last-of-type( n )選擇器匹配同類型中的倒數(shù)第n個同級兄弟元素。
:after? 文本偽類選擇器，在每個p元素之后插入內(nèi)容
:before? 文本偽類選擇器，在每個p元素之前插入內(nèi)容
:first-letter? 文本偽類選擇器，選擇每一個p元素的第一個字母
:first-line? 文本偽類選擇器，選擇每一個p元素的第一行
錨點目標的偽類選擇器
首尾元素的偽類選擇器
:first-child? div下所有的第一個p元素 div p:first-chid
:last-child? div下所有的最后一個p元素? div:last-child
:first-of-type 特定 類型 (p元素)的第一個元素? div p:first-of-type
:last-of-type? 特定 類型 (p元素)的第一個元素
唯一選擇器
:only-child ? ?只有一個孩子的div
:only-of-type ?div下只有一種孩子類型的選擇器
表單上的偽類選擇器
文本的偽類選擇器
文本偽類表單
知識點補充：
!important : 強制權重優(yōu)先級
瀏覽器默認font-size: 14px
可繼承元素：color、font-size、font-family
通配符的權重：0
繼承的權重：? NULL? ? ? ?0NULL
總結排序：!important 行內(nèi)樣式ID選擇器 類選擇器 標簽 、偽類 通配符* 繼承 瀏覽器默認屬性
詳細說明css的常用選擇器類型有哪些
css常用的四種選擇器類型有：
標簽選擇器：針對一類標簽
ID選擇器：針對某一個特定的標簽使用
類選擇器：針對你想要的所有標簽使用
后代選擇器：用空格隔開
1、標簽選擇器：選擇器的名字代表html頁面上的標簽
標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經(jīng)常描述“共性”，無法描述某一個元素的“個性”。
舉例：
style type="text/css"
p{
font-size:14px;
}
/style
body
pcss/p
/body
再比如說，想讓“學完了安卓，繼續(xù)學前端喲”這句話中的“前端”兩個變?yōu)榧t色字體，那么可以用span標簽把“前端”這兩個字圍起來，然后給span標簽加一個標簽選擇器。
代碼如下：
!DOCTYPE html
html
head
meta charset="UTF-8"
titleDocument/title
style type="text/css"
span{
color: red;
}
/style
/head
body
p學完了安卓，繼續(xù)學span前端/span喲/p
/body
/html
【總結】需要注意的是：
（1）所有的標簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。
（2）無論這個標簽藏的多深，一定能夠被選擇上。
（3）選擇的所有，而不是一個。
2、ID選擇器：規(guī)定用#來定義（名字自定義）
針對某一個特定的標簽來使用，只能使用一次。css中的ID選擇器以”#”來定義。
舉例：
head
titleDocument/title
style type="text/css"
#mytitle
{
border:3px dashed green;
}
/style
/head
然后在別處使用id來引用它：
body
h2 id="mytitle"你好/h2
/body
id選擇器的選擇符是“#”。
任何的HTML標簽都可以有id屬性。表示這個標簽的名字。這個標簽的名字，可以任取，但是：
（1）只能有字母、數(shù)字、下劃線。
（2）必須以字母開頭。
（3）不能和標簽同名。比如id不能叫做body、img、a。
（4）大小寫嚴格區(qū)分，也就是說aa,和AA是兩個不同的ID
另外，特別強調(diào)的是：HTML頁面，不能出現(xiàn)相同的id，哪怕他們不是一個類型。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！
一個標簽可以被多個css選擇器選擇：
比如，可以同時讓標簽選擇器和id選擇器作用于同一個標簽。（用到了層疊）如下：
請點擊輸入圖片描述
然后通過網(wǎng)頁的審查元素看一下效果：
請點擊輸入圖片描述
現(xiàn)在，假設選擇器沖突了，比如id選擇器說這個文字是紅色的，標簽選擇器說這個文字是綠色的。那么聽誰的？
實際上，css有著非常嚴格的計算公式，能夠處理沖突.
一個標簽可以被多個css選擇器選擇，共同作用，這就是“層疊式”的第一層含義
3、類選擇器：規(guī)定用圓點.來定義
類選擇器.?針對想要的所有標簽使用。優(yōu)點：靈活。
css中用.來表示類。舉例如下：
style type="text/css"
.oneclass/*定義類選擇器*/{
width:800px;
}
/style
/head
然后在別處使用class來引用它：
body
h2 class="oneclass"你好/h2
/body
和id非常相似，任何的標簽都可以攜帶id屬性和class屬性。但是id屬性只能被某一特定標簽引用一次
class屬性的特點：
特性1：類選擇器可以被多種標簽使用。
特性2：同一個標簽可以使用多個類選擇器。用空格隔開。舉例如下
h3 class="classone ?classtwo"我是一個h3啊/h3
而不能寫成：
h3 class="teshu" class="zhongyao"我是一個h3啊/h3
類選擇器使用的舉例：
類選擇器的使用，能夠決定一個人的css水平。
應該注意：
（1）不要去試圖用一個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，共同完成這個標簽的樣式。
（2）每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用。
如：
style type="text/css"
.lv{
color: green;
}
.da{
font-size: 30px;
}
.underline{
text-decoration: underline;
}
/style
然后讓每個標簽去選取自己想要用的類選擇器：
p class="lv da"段落1/p
p class="lv xian"段落2/p
p class="da xian"段落3/p
問題：到底用id還是用class？
答案：盡可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以css層面盡量不用id，要不然js就很別扭。另一層面，會認為一個有id的元素，有動態(tài)效果。
舉例如下：
請點擊輸入圖片描述
上圖所示，css和js都在用同一個id，會出現(xiàn)不好溝通的情況。
記住這句話：類上樣式，id上行為。意思是說，class屬性交給css使用，id屬性交給js使用。
上面這三種選擇器的區(qū)別：
標簽選擇器針對的是頁面上的一類標簽。
ID選擇器是只針對特定的標簽(一個)，ID是此標簽在此頁面上的唯一標識。
類選擇器可以被多種標簽使用。
4、后代選擇器: 定義的時候用空格隔開
對于E F這種格式，表示所有屬于E元素后代的F元素，有這個樣式?？崭窬捅硎竞蟠?/p>
后代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什么，進行樣式改變，就要想到后代選擇器。
后代選擇器，描述的是祖先結構。
看定義可能有點難理解，我們來看例子吧。
舉例1：
style type="text/css"
.div1 p{
color:red;
}
/style
空格就表示后代。.div1 p 表示.div1的后代所有的p。
這里強調(diào)一下：這兩個標簽不一定是連續(xù)緊挨著的，只要保持一個后代的關聯(lián)即可。也就是說，選擇的是后代，不一定是兒子。
舉例：
style type="text/css"
h3 b i{
color:red ;
}
/style
上方代碼的意思是說：定義了h3標簽中的b標簽中的i標簽的樣式。
同理：h3和b和i標簽不一定是連續(xù)緊挨著的，只要保持一個后代的關聯(lián)即可。
效果：
請點擊輸入圖片描述
或者還有下面這種寫法：
請點擊輸入圖片描述
上面的這種寫法，h3標簽和i標簽并不是緊挨著的，但他們保持著一種后代關系。
還有下面這種寫法：（含類選擇器、id選擇器都是可以的）
請點擊輸入圖片描述
在開頭說了：后代選擇器，描述的是一種祖先結構。舉個例子來說明這句話：
!DOCTYPE html
html
head
meta charset="UTF-8"
titleDocument/title
style type="text/css"
? ?div div p{
? ? ? ?color: red;
? ?}
? ?.div2{...}
? ?.div3{...}
? ?.div4{...}
/style
/head
body
div
? ?div
? ? ? ?div
? ? ? ? ? ?div
? ? ? ? ? ? ? ?p我是什么顏色？/p
? ? ? ? ? ?/div
? ? ? ?/div
? ?/div
/div
/body
/html
上面css中的div div p，也能使文字的顏色變紅。通過瀏覽器的審查元素，我們可以看到 p元素的祖先列表：
請點擊輸入圖片描述
請簡要說明css樣式表中三種選擇器(三種樣式)的特點
CSS選擇器的類型分為3類:標記選擇器、類別選擇器和ID選擇器。（可能名稱有不同的說法，但意思都是一樣的）
標記選擇器是利用HTML的標記直接定義標記內(nèi)容的樣式，如：h1{
color:red;
font-size:25pt;}
類別選擇器是通常說的class選擇器，定義的時候要在名稱前加.如：.one{
color:red;
font-size:25pt;}
ID選擇器定義的時候要在前面加#，如：#box
{
color:red;
font-size:25pt;}
利用DW寫CSS的時候，高級就是上面說的ID選擇器，ID選擇器的名字可以任意命名，可以自己定義，可是標簽就只能是HTML語言里制定的那些標記，不能自己定義。
css有哪些種類的選擇器
css選擇器有，標簽名選擇器，類選擇器，ID選擇器，后代選擇器，群組選擇器。
新建文件創(chuàng)建標記選擇器。
效果。
創(chuàng)建類別選擇器。
創(chuàng)建ID選擇器。
效果。
附上源碼。
當前文章：css樣式表的選擇器類型,簡述css選擇器的類型并舉例說明
本文來源：http://www.dlmjj.cn/article/phppds.html
