CSS選擇器大全

2024-07-11 08:23:01

字體：大中小

來源：轉載

供稿：網友

對于非元素內聯的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合哪些元素，樣式選擇器有：標簽選擇器，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">bbb</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>aaaaaaa</strong>
<p><strong>bbbbbbb</strong></p>
</body>
我們看到上面的代碼中僅有<strong>標簽的字體沒有任何變化，而<p><strong>中的字體可以使用上面的css樣式
(2)、組合選擇器：同時為多個標簽設定同一個樣式；

<head>
<style type="text/css">

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>
下面我們來創建連超鏈接：

<body>
<a href="HTMLpage1.html">測試</a>
</body>