CSS選擇器詳解（一）經常使用選擇器

時間 2019-11-13

標籤 css 選擇器詳解經常使用欄目 CSS 简体版

原文原文鏈接

類型選擇器

經過類型選擇器能夠選擇某一類型的html標籤，並對其使用樣式。css

語法：html

selector {property1: value; property2:value; ...}

示例：字體

<html>
    <head>
        <style type="text/css">            
            h1 { color:Red; font-size:30px;}            
        </style>
    </head>
    <body>
        <h1>這是一個h1標籤</h1>        
    </body>
</html>

效果圖：url

h1 { color:Red; font-size:30px; }

這行代碼選擇了h1標籤，並將h1元素的顏色改成紅色，字體大小改成20px. 類型選擇器也能夠使用嵌套的形式來選擇類型，這種方式也被稱爲後代選擇器spa

示例：code

<html>
    <head>
        <style type="text/css">            
            h1 { color:Red; font-size:30px;}
            div h1{ color:Blue; font-size:20px;}
        </style>
    </head>
    <body>
        <h1>這是一個h1標籤</h1>
        <div>
            <h1>這是一個包含在div內的h1標籤</h1>            
        </div>
    </body>
</html>

效果圖：htm

div h1{ color:Blue; font-size:20px;}

這行代碼只選擇了全部div元素內部的h1元素，並將顏色改成紅色，字體大小改成16px，div元素外部的全部h1都不會受到影響。blog

類選擇器

經過類選擇器能夠選擇class相同的html標籤，並對其使用樣式。ip

語法：element

.selector { property1: value; property2: value; ...}

示例：

<html>
    <head>
        <style type="text/css">            
            .error-message { color:Red; line-height:2px;}            
        </style>
    </head>
    <body>
        <h3 class="error-message">Error Message:</h1>
        <p class="error-message">description</p>        
    </body>
</html>

效果圖：

.error-message { color:Red; line-height:2px;}

這行代碼選擇了全部類爲error-message的元素，並將其顏色改成紅色，行間距改成2px.

ID選擇器

ID選擇器能夠選擇ID爲某值的特定元素，並對其使用樣式。

語法：

#selector { property1: value; property2:value; ...}

示例：

<html>
    <head>
        <style type="text/css">            
            #title { color:Gray;}            
        </style>
    </head>
    <body>
        <h1 id="title">Title</h1>    
    </body>
</html>

效果圖：

#title { color:Gray;}

這行代碼選擇id爲title的元素，並將其顏色改成Gray.

Tips:

有時頁面會出現不少包含類或ID的元素，而它們之間的差別僅僅是出如今頁面中的位置不一樣，不要給這些元素指定不一樣的類或ID，應將一個類或ID賦給它們的父元素，而後使用後代選擇器定位它們。

僞類

有時咱們須要根據文檔結構以外的其它條件對元素應用樣式，僞類用於向某些選擇器添加特殊效果。

語法：

selector : pseudo-class {property1: value； property2:value;}

示例1：

<html>
    <head>
        <style type="text/css">            
            a:link{color: Red;}        
            a:hover{color: Green;}
            a:visited{color: Blue;}
        </style>
    </head>
    <body>
        <a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a>
    </body>
</html>

效果圖：

未訪問連接時：

鼠標懸停在連接上時：

訪問過連接：

a:link{color: Red;}        
a:hover{color: Green;}
a:visited{color: Blue;}

第一行代碼將未訪問的標籤顏色設置爲紅色，第二行代碼將鼠標懸停在標籤上時標籤的顏色設置爲綠色，第三行代碼將訪問過的標籤設置爲藍色。

示例2：

<html>
    <head>
        <style type="text/css">            
            p:first-child{color: Red;}
        </style>
    </head>
    <body>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <div>
            <p>第一段</p>
            <p>第二段</p>
        </div>
    </body>
</html>

效果圖：

p:first-child{color: Red;}

這行代碼將任意元素的第一個子元素p設置爲紅色。

僞元素

僞元素也是用來向某些選擇器添加特殊效果的，很容易和僞類混淆，簡單地說，僞類是用來匹配頁面上真是存在的元素，如:link用來匹配a元素，而僞元素用來匹配邏輯上存在，但在頁面上並不存在的元素。

語法：

selector :: pseudo-element {property1: value； property2:value;}

示例：

<html>
    <head>
        <style type="text/css">            
            p::first-letter{color: Red;}
            #p-with-logo::before{content:url(star.png);}            
        </style>
    </head>
    <body>
        <p>這個段落首字符爲紅色</p>
        <p id="p-with-logo">這個段落有Logo</p>
    </body>
</html>

效果圖：

p::first-letter{color: Red;}
#p-with-logo::before{content:url(star.png);}

第一行代碼找到p元素的第一個字符，並將其設置爲紅色，第二行代碼找到id爲p-with-logo的p元素，在它前面放一個logo.

參考資料：

《精通CSS:高級Web標準解決方案(第2版)》
W3School

經常使用選擇器介紹到此結束，下一回來介紹通用選擇器和高級選擇器...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

CSS選擇器詳解（一）經常使用選擇器

目錄

類型選擇器

類選擇器

ID選擇器

僞類

僞元素