CSS的選擇器有:1、類別選擇器;2、標籤選擇器;3、ID選擇器;4、後位選擇器;5、子選擇器;6、偽類選擇器;7 、通用選擇器;8、群組選擇器;9、鄰近同胞選擇器;10、屬性選擇器;11、偽元素選擇器。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css選擇器介紹:
1、類別選擇器
類別選擇器根據類別名稱來選擇,前面以「.」來標誌。
範例:
.demoDiv{ color:#FF0000; }
2、標籤選擇器
一個完整的HTML頁面是有很多不同的標籤組成,而標籤選擇器,則是決定哪些標籤採用對應的CSS樣式。
在style.css檔案中對p標籤樣式的宣告如下:
p{ font-size:12px; background:#900; color:090; }
3、ID選擇器
ID 選擇器可以為標有特定ID 的HTML 元素指定特定的樣式。根據元素ID來選擇元素,具有唯一性,這意味著同一id在同一文件頁面中只能出現一次。
前面以」#」號來標誌,在樣式裡面可以這樣定義:
#demoDiv{ color:#FF0000; }
4、後代選擇器
後代選擇器也稱為包含選擇器,用來選擇特定元素或元素組的後代,將父元素的選擇放在前面,對子元素的選擇放在後面,中間加一個空格分開。
<style> .father.child{ color:#0000CC; } </style> <p class="father"> 黑色 <label class="child">蓝色 <b>也是蓝色</b> </label> </p>
5、子選擇器
請注意這個選擇器與後代選擇器的區別,子選擇器(child selector)只是指它的直接後代,或者你可以理解為作用於子元素的第一個後代。而後代選擇器則是作用於所有子後代元素。後代選擇器透過空格來進行選擇,而子選擇器是透過“>”進行選擇。
我們看下面的程式碼:
Example Source Code
CSS:
#links a {color:red;} #links > a {color:blue;}
HTML:
<p id="links"> <a href="#">HTML中文网</a>> <span><a href="#">CSS布局实例</a></span> <span><a href="#">CSS教程</a></span> </p>
6、偽類別選擇器
有時候還會需要用文件以外的其他條件來套用元素的樣式,例如滑鼠懸停等。這時候我們就需要用到偽類了。以下是連結應用程式的偽類定義。
a:link{ color:#999999; } a:visited{ color:#FFFF00; } a:hover{ color:#006600; } /* IE不支持,用Firefox浏览可以看到效果 */ input:focus{ background:# E0F1F5; }
7、通用選擇器
通用選擇器用*來表示。例如:
*{ font-size: 12px; }
表示所有的元素的字體大小都是12px;同時通用選擇器也可以和後代選擇器組合。
8、群組選擇器
當幾個元素樣式屬性一樣時,可以共同呼叫一個聲明,元素之間用逗號分隔。如:
p, td, li { line-height:20px; color:#c00; } #main p, #sider span { color:#000; line-height:26px; } .#main p span { color:#f60; } .text1 h1,#sider h3,.art_title h2 { font-weight:100; }
使用群組選擇器,將會大大的簡化CSS程式碼,將具有多個相同屬性的元素,合併群組進行選擇,定義同樣的CSS屬性,這大大的提高了編碼效率,同時也減少了CSS檔案的體積。
9、相鄰同胞選擇器
我們除了上面的子選擇器與後代選擇器,我們可能還想找到兄弟兩個當中的一個,如一個標題h1元素後面緊跟著了兩個段落p元素,我們想定位第一個段落p元素,對它套用樣式。我們就可以使用相鄰同胞選擇器。
10、屬性選擇器
您可以用判斷html標籤的某個屬性是否存在的方法來定義css。
屬性選擇器,是根據元素的屬性來匹配的,其屬性可以是標準屬性也可以是自訂屬性
11、偽元素選擇器
所有偽元素選擇器都必須放在出現該偽元素的選擇器的最後面,也就是說偽元素選擇器不能跟任何衍生選擇器。
推薦學習:css影片教學
#以上是css有哪些選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!