CSS選取器大全

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

對於非元素內聯的樣式需要定義樣式選取器，通俗的說就是這個樣式適合哪些元素，樣式選取器有：標籤選取器，class選取器，id選取器，關聯選取器，組合選取器，偽選取器

1.標籤選取器

對於指定標籤採用統一的標籤；

<head>
<style type="text/css">
input{border-color:Yellow;color:Red}
</style>
</head>
2.class選取器

以定義一個命名的樣式，然後在用它的時候設定元素的class屬性為樣式，還可以同時設定多個class，名稱之間加空格。

<head>
<style type="text/css">
.warning{background:Yellow}
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>

其中.waringhe .highlight是給元素定義了名稱，這個名稱不作用於任何元素，除非引用它。

對該樣式進行引用；

<body>
<table><tr><td class="highlight">aaa</td>
<td class="warning">keleyi.com</td>
<td class="warning highlight">ccc</td>
</tr>
</table>
</body>

標籤+class選取器：
class選取器也可以針對不同的標籤，實現同樣的樣式名對於不同標籤有不同的形式，只要在前面加上標籤名稱即可。

<head>　
　 <style type="text/css">　　　　
input.accountno{text-align:right;color:Red}
　　　　label.accountno{font-style:italic;}　　
</style>
</head>

3.id選取器：為指定的id的元素設定樣式。代碼如下：

<head>
<style type="text/css">
#UserName{font-size:xx-large;}
</style>
</head>
在body中對該樣式進行使用：

<body>
<input id="UserName" type="text" value="aaa"/>
</body>
id叫做UserName的元素的樣式是{font-size：xx-large;}

4、更多選取器
（1）、關聯選取器（必須是相互關聯之下的樣式才可以有變化）

　　代碼如下：

<head>
<style type="text/css">
p strong{background-color:Yellow;}
</style>
</head>
上面代碼的意思就是p標籤和strong標籤相關的內容使用的樣式（也就是表示p標籤中的strong標籤內的內容使用的樣式）

<body>
<strong>柯樂義</strong>
<p><strong>www.keleyi.com</strong></p>
</body>
我們看到上面的代碼中僅有<strong>標籤的字型沒有任何變化，而<p><strong>中的字型可以使用上面的css樣式
(2)、組合選取器：同時為多個標籤設定同一個樣式；

H1,H2,input{background-color:Green;}
</style>
<head>

上面的代碼是將h1,h2,input的樣式都設定成為{background-color:Green},當我們使用這三個標籤的時候有同樣的樣式顯現；

代碼如下：

<body>
<h1>aaaa</h1>
<input type="text" value="text"/>
</body>
(3)、偽選取器：為標籤的不同狀態設定不同的樣式：如：A：visited 超連結點擊過的樣式；A:active超連結被選中的樣式;A:link：超連結已被訪問時的狀態

A:hover:滑鼠移到超連結時的樣式

現在我們來用這些樣式給超連結設定樣式；把這些樣式放在CSS檔案中，因為這些樣式都是基本固定的只要你使用超連結的時候就把這些樣式引入即可；

代碼如下：

A：visited
{
text-decoration:none
}
A:active
{
text-decoration:none
}
A:link
{
text-decoration:none
}
A:hover
{
text-decoration:underline
}

在html頁面中對該樣式進行引用即可；

<head>
<link type="text/css" rel="Stylsheet" href="link.css">
</head>
下面我們來建立連超連結：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More