生活随笔
收集整理的這篇文章主要介紹了
css3 定义选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
引言：CSS樣式規則有兩個主要部分。選擇器決定將格式化應用到哪些元素。聲明則定義要應用的格式化。
選擇器可以定義五個不同的標準來選擇要進行格式化的元素。
元素的類型或者名稱。如下所示。 h1{color:red;
} ?
元素所在的上下文。如下所示。 h1 em{color:red;
} ?
元素的類或ID。如下所示。 /*類選擇器*/
.error{color:red;
}
/*ID 選擇器*/
#gaudi{color:red;
} ?
元素的偽類或偽元素。如下所示。 a:link{color:red;
} ?
元素是否有某些屬性和值。如下所示。 a[title]{color:red
} ?
選擇要格式化的元素，最常見的標準可能是元素的名稱。如下所示：
h2{
color:
red;
}
按照類型選擇要格式化的元素
輸入selector,其中selector是目標元素的類型名稱。輸入{。輸入希望應用到選中元素的樣式，用屬性：值得形式表示。輸入}結束樣式規則。元素中標識了class或id，可以在選擇器中使用這個標準，從而支隊已標識的元素進行格式化。推薦使用類選擇器。如下所示：
/*類選擇器*/
.error{
color:
red;
}
/*ID 選擇器*/
#gaudi{
color:
red;
}
? 按類選擇要格式化的元素?
輸入.（點號）。不加空格，直接輸入classname. 輸入{。
輸入希望應用到選中元素的樣式，用屬性：值得形式表示。
輸入}結束樣式規則。
按id選擇要格式化的元素
輸入#（井號）。不加空格，直接輸入id。輸入{。輸入希望應用到選中元素的樣式，用屬性：值得形式表示。輸入}結束樣式規則。根據元素的祖先、父元素或同胞元素來定位需要格式化的元素。
祖先（ancestor）是包含目標（后代，descendant）元素的任何元素，不管它們之間隔了多少代。
按祖先元素選擇要格式化的元素
輸入希望格式化的元素的祖先元素的選擇器。輸入一個空格。如果需要，對后續的每個祖先元素重復以上兩步。輸入希望格式化的元素的選擇器。 .architect p{color:red;
} ?
按父元素選擇要格式化的元素
輸入希望格式化的元素的父元素的選擇器。輸入>（大于號）。如果需要，對后續每代父元素重復以上兩步。輸入希望格式化的元素的選擇器。 .architect>p{color:red;
} ?
?
按相鄰同胞元素選擇要格式化的元素
輸入包含在同一父元素中的、直接出現在目標元素前面的元素選擇器。輸入+（加號）。如果需要，對每個后續的同胞元素重復以上兩步。輸入要格式化的元素的選擇器。 .architect p+p{color:red;
} ?
?
有時需要選擇僅作為某元素第一個或最后一個子元素的元素。需要使用偽類:firsh-child和:last-child。如下：
li:frist-child{
color:
red;
}
li:last-child{
color:
red;
}
選擇某元素的第一個或者最后一個子元素進行格式化
輸入代表我們想應用樣式的第一個或者最后一個子元素。選擇第一個子元素輸入:first-child。最后一個子元素輸入:last-child。?分別使用:first-letter和:first-line偽元素只選擇元素的第一個字母或第一行。如下：
P:first-letter{
color:
red;
font-size:
1.4em;
font-weight:
bold;
}
p:first-line{
color:
red;
}
選擇元素的第一個字母
輸入要對其格式化的元素選擇器。輸入:first-letter。 選擇元素的第一行
輸入要對其第一行進行格式化的元素的選擇器。輸入:first-line。 CSS允許根據鏈接的當前狀態對他們進行格式化。
按狀態選擇要格式化的鏈接元素的步驟
輸入a（a是鏈接元素的名稱）。輸入：（冒號），前后都沒有空格。完成第2步后，執行下列操作影響鏈接狀態。輸入link以設置從未被激活或指向，當前頁沒有被激活或指向的鏈接的外觀。輸入visited以設置訪問者已激活過鏈接的外觀。輸入focus，前提是鏈接是通過鍵盤選擇并已準備好激活的。輸入hover以設置光標指向鏈接時鏈接的外觀。輸入active以設置激活過的鏈接的外觀。 /*未訪問過*/
a:link{color:red;
}
/*訪問過的鏈接*/
a:visited{color:orange;
}
/*鏈接獲取焦點*/
a:focus{color:purple;
}
/*光標停留在連接上*/
a:hover{color:green;
}
/*激活鏈接時*/
a:active{color:blue;
} 一定要按照以下的順序定義規則：link、visited、focus、hover、active（縮寫為LVFHA）。
對給定屬性或屬性值的元素進行格式化。例如：
p[class]{
color:
red;
}
?按屬性選擇要格式化的元素
輸入要考察其屬性的元素的選擇器。輸入[。輸入選擇元素需要考察的屬性的名稱。根據需要輸入屬性的匹配符號和匹配值。輸入。如果想要為元素指定其他屬性或者屬性值。重復2-4步驟。屬性選擇器參考表| 選擇器 | 屬性值 |
| [attribute] | 匹配指定屬性，不論具體指是什么。 |
| [attribute="value"] | 完全匹配指定屬性值。 |
| [attribute~="value"] | 屬性值是以空格分隔的多個單詞，其中有一個完全匹配指定值。 |
| [attribute|="value"] | 屬性值以value-打頭。 |
| [attribute^="value"] | 屬性值以value開頭，value為完成的單詞或單詞的一部分。 |
| [attribute$="value"] | 屬性值以value結尾，value為完整的單詞或單詞的一部分。 |
| [attribute*="value"] | 屬性值為指定值的子字符串。 |
/*選擇rel屬性值等于external的a元素*/
a[rel="external"]{
color:
red;
}
/*配置以空格相隔的多個單詞中的一個*/
article[class~="barcelona"]{
color:
red;
}
/*這個選擇器也能匹配，因為這個選擇器匹配部分字符串*/
article[class*="barcelona"]{
color:
red;
}
/*選擇任何帶有lang屬性且屬性值以es開頭的h2*/
h2[lang|="es"]{
color:
red;
}
/*選擇任何帶有lang屬性且屬性值以es開頭的元素*/
*[lang|="es"]{
color:
red;
}
/*選擇既有href屬性，又有任意是屬性值包含單詞howdy的title屬性的a元素*/
a[href][title~="howdy"]{
color:
red;
}
/*選擇既有href屬性，又有任意屬性值包含how的title屬性的a元素*/
a[href][title*="how"]{
color:
red;
}
/*匹配href屬性值以http://開頭的a元素*/
a[href^="http://"]{
color:
red;
}
/*匹配任何src屬性值完全等于logo.png的img元素*/
img[src="logo.png"]{
border:
1px solid green;
}
/*匹配任何src屬性值以.png結尾的img元素*/
img[src$=".png"]{
border:
1px solid green;
}
對于使用相同樣式規則的多個元素，可以使用元素組設置樣式規則。
將樣式應用于元素組的步驟
輸入第一個元素名稱。輸入，（逗號）。輸入第二個元素名稱。對其他元素重復第二和第三步。 h1,
h2{color:red;
} ?
現實中常常需要組合使用以上技術，才能找到要格式化的元素。如：
/*選擇em元素，包含在p元素中，這樣的p元素是lang屬性值以es開頭的h2元素的直接相鄰同胞元素，且class等于project的任何元素的子元素*/
.project h2[lang|="es"]+p em{
color:
red;
}
?
總結
以上是生活随笔為你收集整理的css3 定义选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
