選擇器就是指定CSS要作用的標籤,那個標籤的名稱就是選擇器。意為:選擇哪個容器(標籤本身就是封裝數據的容器)。
@CHARSET "UTF-8";
/*css中選擇器有很多種,第一種就是最基本的元素選擇器(又稱類型選擇器)。
*文檔的元素就是最基本的選擇器。
*如果設置 HTML 的樣式,選擇器通常將是某個 HTML 元素,
* 比如 p、h1、em、a,甚至可以是 html 本身:
*/
h2{
color:blue;
}
/*第二種選擇器: 類樣式選擇器 */
/*對所有 "aa"類樣式進行設置
\t .aa{
\t background-color: #00FF00;
\t }
\t */
\t
\t /*僅僅是對p中的"aa"類樣式進行設置*/
\t p.aa{
\t background-color: #00FF00;
\t }
\t .bb{
\t background-color: #004444;
\t }
\t
\t /*第三種選擇器 id選擇器
\t *ID 選擇器允許以一種獨立於文檔元素的方式來指定樣式。
*在某些方面,ID 選擇器類似於類選擇器,不過也有一些重要差別。
\t */
\t
\t /*id選擇器*/
\t #d1{
\t background-color: #0000FF;
\t }
\t
\t
\t /*其他選擇器*/
\t
\t /*1.關聯選擇器*/
\t p span{/*選擇p標籤容器中的span*/
\t font-size:20pt;
\t }
\t
\t /*2.組合選擇器*/
\t p span,.c,#d1{
\t color:red;
\t }
\t
\t /*3.偽元素選擇器*/
\t /*CSS 偽元素用於向某些選擇器設置特殊效果。*/
\t span:HOVER {
\t background-color:#FFFF00;
\t font-size: 20pt;
\t cursor: pointer;
\t\t }
\t\t
\t a{
\t\t text-decoration: none;
\t\t }
\t\t
\t /*L-V-H-A*/
\t a:link{
\t\t color: red;
\t\t font-size: 12pt;
\t\t }
\t\t a:visited{
\t\t color:blue;
\t\t font-size: 16pt;
\t\t }
\t\t a:hover{
\t\t background-color: #00FF00;
\t\t font-size:20pt;
\t\t }
\t\t a:active{
\t\t color:#FFFF00;
\t\t }
\t\t
\t\t input:focus{
\t\t background-color: #00FFFF;
\t\t }
\t\t
\t\t /*星號選擇器,選擇所有*/
\t\t *{
\t\t text-decoration: underline;
\t\t }
\t\t
\t\t /*屬性選擇器,所有具有type屬性的元素*/
\t\t [type]{
\t\t margin: 10px;
\t\t }
\t\t /*具有name屬性且屬性值為'math'*/
\t\t [name="math"]{
\t\t background-color: #0ff;
\t\t }
\t\t
\t\t a[href="http://www.w3school.com.cn/"][title="W3School"] {
\t\t color: red;
\t\t }
\t\t
\t\t /* 關聯選擇器---後代 */
\t\t h1 em{
\t\t color: red;
\t\t }
\t\t
\t\t /*子元素選擇器---兒子*/
\t\t p > em{
\t\t color: blue;
\t\t }
\t\t
\t\t /*相鄰元素選擇器---後續兄弟*/
\t\t li + li {
\t\t font-weight:bold;
\t\t }\t\t
相關文章:
css 類選擇器和id選擇器
CSS選擇器整理
相關視頻:
類選擇器-2016年新課程體系html+css視頻
以上就是CSS選擇器有哪些?CSS選擇器優先級判定的詳細內容,更多請關注其它相關文章!
更多技巧請《轉發 + 關注》哦!