摘要:相鄰兄弟選擇器也一樣。提示當(dāng)時(shí),會(huì)在除第一個(gè)之外的所有生效。在定義中,必須被置于之后,才是有效的。和稱為鏈接偽類,只能應(yīng)用于錨元素和稱為動(dòng)態(tài)偽類,理論上可以用于任何元素。注意,偽元素選擇器選擇出來(lái)的部分不在里,也不能對(duì)其綁定事件。
0. 通用選擇器
* { margin: 0; padding: 0; }1. 元素選擇器
p { line-height: 1.5em; } h2 { color: #696969; }2. id 和 類選擇器
#id .class
3. 關(guān)系選擇器A B:后代選擇器 (所有后代)
A > B:子選擇器(直接后代)
A + B:相鄰兄弟選擇器(AB為兄弟,僅緊鄰 A 的 B 生效)
A ~ B:一般兄弟選擇器(A 之后的所有 B 兄弟生效)
注意:子選擇器:IE 7 中如果父元素和子元素之間有 HTML 注釋,會(huì)出現(xiàn)問(wèn)題。相鄰兄弟選擇器也一樣。
提示:當(dāng) li+li 時(shí),會(huì)在除第一個(gè) li 之外的所有 li 生效。
1、A[attr]:定位具有屬性 attr 的任何元素 A:
input[required] { border:1px solid #f00;} /* 必填屬性"required"的input */
2、A[attr="val"]:完全匹配,定位具有屬性 attr 且屬性值為 val 的任何元素 A:
input[type="password"] {border:1px solid #aaa;}
3、A[attr|="val"]:定位具有屬性 attr 且屬性值為 val,或以 "val-" 開(kāi)頭 的任何元素 A:
p[class|="a"] {color:#333;} /* class="a" 以及 class="a-b") */
4、A[attr~="val"]:該選擇器定位具有屬性 attr 且屬性值為 完整 "val" 的任何元素 A:
div[title~="english"] {color:#f88;} /* title="english" 以及 title="chinese english" */
5、A[attr*="val"]:定位具有屬性 attr 且屬性值任意位置 包含 "val" 字符串 的元素 A,val 可以是一個(gè)完整的單詞,也可以是一個(gè)單詞中的一部分:
a[title*="link"] {text-decoration:underline;} /* title="aaalinkzzz" */
6、A[attr^="val"]:定位具有屬性 attr 且屬性值 以 "val" 開(kāi)頭 的任何元素 A:
div[class^="a"] {color:#666;} /* class="a"、class="abc" 以及 class="abc zzz" */ /* 但 class="zzz abc" 不是 */
7、A[attr$=val]:該選擇器與 A[attr^=val] 正好相反,定位具有屬性 attr 且屬性值 以 "val" 結(jié)尾 的任何元素 A:
div[class$="a"] {color:#f00;} /* class="nba"、class="cba" 以及 class="cn cba" */ /* 但 class="cba cn" 不是 */
注意:IE6 不支持屬性選擇器。
5. 偽類 1、錨偽類a:link {color: red} /* 未訪問(wèn)的鏈接 */ a:visited {color: green} /* 已訪問(wèn)的鏈接 */ a:hover {color: blue} /* 鼠標(biāo)移動(dòng)到鏈接上 */ a:active {color: yellow} /* 選定的鏈接,鼠標(biāo)左擊不放 */
提示
在 CSS 定義中,:hover 必須被置于 :link 和 :visited 之后,才是有效的。
在 CSS 定義中,:active 必須被置于 :hover 之后,才是有效的。
:link 和 :visited 稱為鏈接偽類,只能應(yīng)用于錨元素;:hover、:active 和 :focus 稱為動(dòng)態(tài)偽類,理論上可以用于任何元素。
2、偽類與 CSS 類偽類可以與 CSS 類配合使用:
a.red:visited {color:#FF0000;}3、:focus
:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。
Any element (most commonly s and s) are in "focus" when they are selected and ready to enter text.
input:focus{ background-color:yellow; } textarea:focus { background: pink; }4、:first-child
p:first-child 匹配作為任何元素的第一個(gè)子
元素。
p>li:first-child 匹配所有
元素的第一
元素中的所有
提示: 另一種形式 p:nth-child(3) 匹配作為任何元素的第 3 個(gè)子
元素。
6. 偽元素偽元素可用于定位文檔中包含的文本,為與偽類進(jìn)行區(qū)分,偽元素使用雙冒號(hào) :: 定義,但單冒號(hào) : 也能被識(shí)別。
1、::first-linep::first-line{ color: red; } /* 對(duì) p 元素的第一行文本進(jìn)行格式化 */
注意:::first-line 偽元素只能用于塊級(jí)元素。
可應(yīng)用的屬性:
font properties、color properties、background properties、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear
p::first-letter { font-size:xx-large; } /* 向文本的首字母設(shè)置特殊樣式 */
注意:::first-letter 偽元素只能用于塊級(jí)元素。
可應(yīng)用的屬性:
font properties、color properties、background properties、margin properties、padding properties、border properties、text-decoration、vertical-align (only if "float" is "none")、text-transform、line-height、float、clear
p.article:first-letter {color:#ff0000;}4、::before 與 ::after
常常使用 contnet 屬性生成額外的內(nèi)容并插入在標(biāo)記中:
a[href^=http]::after { content:"link" } /* 在頁(yè)面的a鏈接的后面插入文字link */ h1::before { content:url(hm.gif) } /* 在每個(gè)h1 前插入一幅圖片 */5、::selection
::selection { background:#444; color:#fff; } /* 定義選中的文本顏色與背景色 */擴(kuò)展閱讀 偽類 vs 偽元素
偽類的效果可以通過(guò)添加一個(gè)實(shí)際的類來(lái)達(dá)到,而偽元素的效果則需要通過(guò)添加一個(gè)實(shí)際的元素才能達(dá)到,這也是為什么他們一個(gè)稱為偽類,一個(gè)稱為偽元素的原因。
注意,偽元素選擇器選擇出來(lái)的部分不在 DOM 里,也不能對(duì)其綁定事件。如果你對(duì)偽元素前面的選擇器定義的元素綁定了事件,偽元素同樣會(huì)生效。 永遠(yuǎn)記得偽元素生成的是 表現(xiàn)。
偽類::active、:focus、:hover、:link、:visited、:first-child、:lang、:target
偽元素:::after、::before、::first-letter、::first-line、::selecton
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/111344.html
摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒(méi)有關(guān)系?,F(xiàn)在我們回到討論開(kāi)始的地方,哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候,關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了,也不是我一個(gè)非得重拾的話題,但它卻是我在工作之時(shí),所感興趣的,關(guān)注已久的話題。 有很多人都忘記了,或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...
摘要:最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒(méi)有關(guān)系。現(xiàn)在我們回到討論開(kāi)始的地方,哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候,關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了,也不是我一個(gè)非得重拾的話題,但它卻是我在工作之時(shí),所感興趣的,關(guān)注已久的話題。 有很多人都忘記了,或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...
摘要:不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話,他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成,這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師,應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷很大的CS...
摘要:不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話,他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成,這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師,應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷很大的CS...
閱讀 2440·2021-11-23 09:51
閱讀 1866·2021-10-13 09:40
閱讀 1372·2021-09-30 10:01
閱讀 589·2021-09-26 09:46
閱讀 2232·2021-09-23 11:55
閱讀 1385·2021-09-10 10:51
閱讀 2240·2021-09-09 09:33
閱讀 2227·2019-08-29 17:25