css偽類虛擬元素域進階選取器的介紹

來源:互聯網
上載者:User

 給連結定義樣式
a:link 表示尚未訪問的連結,滑鼠未划過和點擊
a:visited 表示已經訪問的連結
a:hover 表示滑鼠劃入的連結
a:active 表示啟用的連結,也就是滑鼠點選連結的一瞬間
注意上面這四個連結的偽類在使用的時候要有一定的順序,即上面列舉的順序,否則看不到效果。可以簡單記為LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。

給段落定義樣式
:first-letter 為一行中的第一個字元建立樣式
:first-line 為一段中第一行建立樣式

更多偽類和虛擬元素
:before 可以在指定元素的前面新增內容。比如有一個段落p,你要在前面添加"Hello",可以用偽類表示為p:before {content: "Hello";}
:after 和:before一樣,只不過實在元素的後面新增內容。
但是IE6, IE7不支援content屬性。
:first-child 選取其他元素的第一個子項目,這裡容易引起混淆。比如有下面的一段代碼:

<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</p>

那麼,li:frist-child將會選取所有ul標籤下的第一個li標籤,也就是上面兩個內容為第一行的li標籤,而不是選擇li標籤的第一個子項目
:focus 這個虛擬元素與連結的:hover相似,只不過:hover為連結專用,而這個可以用於其他的元素,表示當元素獲得焦點時應有的樣式
進階選取器
子選取器
">"可用來作為子選取器。當要選取一個元素的子項目時,可以使用這個符號。比如有下面一段代碼:

<p>
<ul>
<li>第一級</li>
<li>
<ul>
<li>第二級</li>
</ul>
</li>
</ul>
</p>

p>ul 只會選擇第一個ul標籤,而不會選擇第二個ul標籤,因為它不是p標籤的子項目,而是li標籤的子項目。如果要達到選擇這兩個ul標籤,可以是p ul。這樣p標籤下面所有的ul標籤都會被選中。這種形式選取的是p標籤下面的所有子孫元素。
同胞選取器
"+"可用來作為同胞選取器。在HTML中,緊挨另一個標籤出現的標籤被稱為鄰近同胞標籤,如:

<body>
<h1>標題</h1>
<p>段落</p>
</body>

p標籤緊鄰h1標籤,因此p標籤為h1的同胞標籤,可以通過h1+p來選擇。
屬性選取器
在屬性選取器中,用[]包含要選擇的屬性,如:
img[title]
那麼,所有帶有title屬性的img標籤都會被選中,而那些沒帶title標籤的img則不會被選中。[]括弧前面可以使任何有效選取器。
屬性選取器中的屬性還可以帶有值。比如許多表單元素的形式都一樣,如<input type = "text" />和<input type = "checkbox" />,那麼input[type = "text"]可以讓你只選中文字框。
其他的一些屬性選取器還有:
^= 讓你匹配屬性"以...開始"的標籤,如:a[href^= "http://"]則匹配所有以http://開頭的連結。
$= 讓你匹配屬性"以...結束"的標籤,如:a[href$=".com"]則匹配所有以".com"結尾的連結。
*= 讓你匹配屬性包含某一值的標籤,如:a[href*= "renren"]則匹配href中包含"renren"的所有連結。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。