CSS3中的選擇器

時間 2019-12-13

標籤 css3 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS3選擇器是在CSS2.1選擇器的基礎上新增了屬性選擇器、僞類選擇器、過濾選擇器，減小了對HTML類名或ID名的依賴，避免了對HTML結構的干擾，使編寫的過程更加輕鬆。css

根據所獲取頁面中的元素的不一樣，能夠把CSS選擇器分紅五大類：html

基本選擇器
組合選擇器
僞類選擇器
僞元素
屬性選擇器

在這其中僞類選擇器又分紅了六類：瀏覽器

動態僞類選擇器
目標僞類選擇器
語言僞類
UI元素狀態僞類選擇器
結構僞類選擇器
否認僞類選擇器

接下來依次介紹：框架

1、基本選擇器：佈局

　　　　1.標籤選擇器字體

　　　　　　標籤選擇器直接引用HTML標籤名稱，也稱爲類型選擇器，類型選擇器規定了網頁元素在頁面中默認的顯示樣式。所以，標籤選擇器能夠快速、方便的控制頁面標籤的默認顯示效果。url

　　　　【示例】經過標籤選擇器，統必定義網頁中段落文本的樣式爲：段落內文本字體大小爲12px，字體的顏色爲紅色。spa

<style type="text/css">
    p{
        font-size: 12px;
        color: red;
    }
</style>

　　　　　在定製網頁樣式時能夠利用標籤選擇器設計網頁元素默認效果，或者統一經常使用元素的基本樣式。標籤選擇器在CSS中是使用頻率最高的一類選擇器，且容易管理，由於它們都是和網頁元素同名的。設計

（1）、類選擇器：3d

　　　　　　類選擇器可以爲網頁對象定義不一樣的樣式，實現不一樣元素擁有相同的樣式，相同元素的不一樣對象擁有不一樣的樣式。類選擇器以一個點(.)前綴開頭，而後跟隨一個自定義的類名。

　　　　　　應用類樣式可使用class屬性來實現，HTML全部元素都支持該屬性，只要在標籤中定義class屬性，而後把該屬性值設置爲事先定義好的類選擇器的名稱就OK了。

　　　　　　【示例1】利用類選擇器爲頁面中的3個相鄰的段落文本對象定義不一樣的樣式，其中第1和3段文本的字體大小爲12px、字體紅色，第2段文本的字體大小爲18px、字體爲紅色。

　　　　　　第一步：啓動Dreamweaver，新建一個網頁，在<body>標籤中輸入三段文本。

<p>問君能有幾多愁，恰似一江春水向東流</p>
<p>剪不斷，理還亂，是離愁。別是通常滋味在心頭</p>
<p>獨自莫憑欄，無限江山，別是容易見時難。流水落花春也去，天上人間</p>

　　　　　　第二步：在<head>標籤中添加<style type="text/css">標籤，定義一個內部樣式表。

　　　　　　第三步：經過標籤選擇器爲全部段落文本的字體大小定義爲12px，字體顏色爲紅色。

<style type="text/css">
    p{
        font-size: 12px;  /*字體大小爲12像素*/
        color: red;  /*字體顏色爲紅色*/
    }
</style>

　　　　　　第四步：若是僅定義第2段文本的字體大小爲18px，這個時候就能夠用到類選擇器。在這裏先定義一個18px大小的字體類：

.font18px{font-size: 18px;}

　　　　　　第五步：在第二段段落標籤中引用font18px類樣式。

<p>問君能有幾多愁，恰似一江春水向東流</p>
<p class="font18px">剪不斷，理還亂，是離愁。別是通常滋味在心頭</p>
<p>獨自莫憑欄，無限江山，別是容易見時難。流水落花春也去，天上人間</p>

　　　　　　最終在瀏覽器中顯示的樣式爲：

　　　　　　【示例2】如何在對象中應用多個樣式類。class屬性能夠包含多個類，所以能夠設計複合樣式類。

　　　　　　　第一步：複製上面示例的文檔，並在內部樣式表中定義了3個類：font18px、underline、italic

　　　　　　　第二步：而後在段落文本中分別引用這些類，其中第二段文本標籤引用了3個類，第三段引用了一個類。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{  /*段落默認樣式*/
            font-size: 12px;  /*字體大小爲12像素*/
            color: red;  /*字體顏色爲紅色*/
        }
        .font18px{  /*字體大小類*/
            font-size: 18px;
        }
        .underline{  /*下劃線類*/
            text-decoration: underline;
        }
        .italic{  /*斜體類*/
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="underline">問君能有幾多愁，恰似一江春水向東流</p>
    <p class="font18px underline italic">剪不斷，理還亂，是離愁。別是通常滋味在心頭</p>
    <p class="italic">獨自莫憑欄，無限江山，別是容易見時難。流水落花春也去，天上人間</p>
</body>
</html>

　　　　　　若是把標籤和類捆綁在一塊兒來定義選擇器，則能夠限定類的使用範圍，這樣就能夠指定該類僅適用於特定的標籤範圍內，這種方法也稱爲指定類選擇器。

（2）、ID選擇器：

　　　　　　ID選擇器以井號(#)做爲前綴，而後是一個定義的ID名。應用ID選擇器可使用id屬性來實現，HTML全部元素都支持該屬性，只要標籤中定義id屬性，而後把該屬性值設置爲事先定義好的ID選擇器的名稱便可。

　　　　　　　【示例1】演示如何在文檔中設置ID樣式。

　　　　　　　　第一步：啓動Dreamweaver，新建一個網頁，在<body>標籤內輸入<div>標籤，定義一個盒子:

<div id="box">問君能有幾多愁，恰似一江春水向東流</div>

　　　　　　　　第二步：在<head>標籤內添加<style type="text/css">標籤，定義一個內部樣式表。而後爲該盒子定義固定的寬和高，並設置背景圖像，以及邊框和內邊距大小。

<style type="text/css">
    #box{
        background: url("./images/leaves.png") center bottom;
        height: 200px;
        width: 400px;
        border: solid 2px red;
        padding: 100px;
    }
</style>

　　　　　　　在瀏覽器中的效果：

　　　　　　　　也能夠爲ID選擇器指定標籤範圍。採用這種方法可以提升該樣式的優先級。

　　　　　　　　【示例2】針對上面的示例。能夠在ID選擇器前面增長一個div標籤，這樣div#box選擇器的優先級會大於#box選擇器的優先級。在同等條件下，瀏覽器會優先解析div#box選擇器定義的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div#box{
            background: url("./images/leaves.png") center bottom;
            height: 200px;
            width: 400px;
            border: solid 2px red;
            padding: 100px;
        }
    </style>
</head>
<body>
    <div id="box">問君能有幾多愁，恰似一江春水向東流</div>
</body>
</html>

　　　　　　提示！！！

　　　　　　　　　　通常經過ID選擇器來定義HTML款架結構的佈局效果，由於HTML框架元素的ID值都是惟一的。

（3）、通配選擇器

　　　　　　若是HTML全部元素都須要定義相同的樣式，這個時候就能夠用到通配選擇器，它是固定的，用星號（*）表示。

　　　　　　【示例】針對上面示例中清除邊距樣式

*{
    margin: 0;
    padding: 0;
}

2、組合選擇器

（1）、包含選擇器

　　　　　　包含選擇器經過空格標識符來表示，前面的一個選擇器表示包含框對象的選擇器，然後面的選擇器表示被包含的選擇器。

　　　　　　【示例】如何使用包含選擇器爲不一樣層次下的標籤訂義樣式。

　　　　　　第一步：啓動Dreamweaver，新建一個網頁，在<body>標籤中輸入以下結構。

<div id="wrap">
    <div id="header">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div id="main">
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</div>

　　　　　　第二步：在<head>標籤中添加<style type="text/css">標籤，定義一個內部樣式表。而後定義樣式，但願實現一、定義<div id="header">包含框內的段落文本字體大小爲14px。二、定義<div id="main">包含框內的段落文本字體大小爲12px。

　　　　　　第三步：這個時候就能夠利用包含選擇器來快速定義了：

    <style type="text/css">
        #header p{
            font-size: 14px;
        }
        #main p{
            font-size: 12px;
        }
    </style>

　　　　　　【示例2】針對上面的結構，用戶也可使用子選擇器來定義他們的樣式。

    <style type="text/css">
        #header > p{
            font-size: 14px;
        }
        #main > p{
            font-size: 12px;
        }
    </style>

　　　　　　【示例3】要是頁面的結構比較複雜的話，所包含的元素就不止子元素了，這個時候就只能使用包含選擇器了

<body>
    <div id="wrap">
        <div id="header">
            <h2>
                <p>第一段文本</p>
            </h2>
            <p>第二段文本</p>
        </div>
        <div id="main">
            <div>
                <p>第三段文本</p>
                <p>第四段文本</p>
            </div>
            <p>主題文本</p>
        </div>
    </div>
</body>