2、CSS選擇器

時間 2019-12-18

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

原文原文鏈接

1、CSS選擇器css

1. 標籤選擇器：html

　　標籤選擇器，此種選擇器影響範圍大，建議儘可能應用在層級選擇器中。spa

　　舉例：code

*{margin:0;padding:0}
div{color:red}   


<div>....</div>　　　　　　　　　<!-- 對應以上兩條樣式 -->
<div class="box">....</div>　　<!-- 對應以上兩條樣式 -->

　　練習：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>

    <style type="text/css">
        *{                       /* 給全部標籤設置樣式 */
            font-size: 20px;
        }

        div{                    /* 給div標籤設置樣式 */
            color: red;
        }

    </style>

</head>
<body>
    
    <div>這是第一個div</div>
    <div>這是第二個div</div>
    <div>這是第三個div</div>

    <p>這是一個p標籤</p>

</body>
</html>

　　預覽效果：blog

2. id 選擇器：it

　　經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲io

　　選擇器。class

　　舉例：百度

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不容許應用此樣式 -->

　　練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>

    <style type="text/css">
        *{                        /* 給全部標籤設置樣式 */
            font-size: 20px;
        }

        div{                    /* 給div標籤設置樣式 */
            color: red;
        }

        /* 層疊樣式表，下面的樣式覆蓋上面的樣式 */
        #div1{                    /* 使用id選擇器 */
            color: blue;
        }

    </style>

</head>
<body>
    
    <div id="div1">這是第一個div</div>
    <div>這是第二個div</div>
    <div>這是第三個div</div>

    <p>這是一個p標籤</p>

</body>
</html>

　　預覽效果：

’

3. 類選擇器：

　　經過類名來選擇元素，一個類可應用於多個元素，一個元素上也能夠使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
　　舉例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

　　練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>

    <style type="text/css">
        *{                        /* 給全部標籤設置樣式 */
            font-size: 20px;
        }

        div{                    /* 給div標籤設置樣式 */
            color: red;
        }

        /* 層疊樣式表，下面的樣式覆蓋上面的樣式 */
        #div1{                    /* 使用id選擇器 */
            color: blue;
        }

        .green{                    /* 類選擇器 */
            color: green;
        }

        .big{
            font-size: 40px;
        }


    </style>

</head>
<body>
    
    <div id="div1" class="big green">這是第一個div</div>    <!-- id的權重要高於class，id起做用 -->
    <div class="green big">這是第二個div</div>
    <div>這是第三個div</div>

    <p class="green">這是一個p標籤</p>

</body>
</html>

　　預覽效果：

4. 層級選擇器：

　　主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
　　舉例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

　　練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層級選擇器</title>

    <style type="text/css">
        
        .box{
            font-size: 20px;
            line-height: 40px;
        }

        .box span{        /* 層級選擇器，.box下面的span */
            color: red;
            font-weight: bold;
        }

    </style>

</head>
<body>
    
    <div class="box">
        主要應用在選擇父元素下的子元素，或者子元素下面的<span>子元素</span>，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
    </div>

    <div class="box2">
        主要應用在選擇父元素下的子元素，或者子元素下面的<span>子元素</span>，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
    </div>

</body>
</html>

　　預覽效果：

5. 組選擇器：

　　多個選擇器，若是有一樣的樣式設置，能夠使用組選擇器。
　　舉例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

　　練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組選擇器</title>
    <style type="text/css">
        
        /* 法一：分別描述 */
        /* 
        .box01{
            font-size: 20px;
            text-indent: 40px;
            color: red;
        }
        .box02{
            font-size: 20px;
            text-indent: 40px;
            color: pink;
        }
        .box03{
            font-size: 20px;
            text-indent: 40px;
            color: gold;
        }
         */

        /* 法二：將相同的描述抽離出來，合併到一塊兒 */
        .box01,.box02,.box03{        /* 層級選擇器是空格隔開，組選擇器是逗號隔開 */
            font-size: 20px;         /* 組選擇器：將公共的部分合併到一塊兒 */
            text-indent: 40px;
        }

        .box01{
            color: red;
        }
        .box02{
            color: pink;
        }
        .box03{
            color: gold;
        }

    </style>

</head>
<body>

    <div class="box01">這是第一個div</div>
    <div class="box02">這是第二個div</div>
    <div class="box03">這是第三個div</div>

</body>
</html>

　　預覽效果：

6. 僞類及僞元素選擇器：

　　經常使用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們能夠經過樣式在元素中插入內容。
　　舉例：

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

　　練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僞類及僞元素選擇器</title>
    
    <style type="text/css">
        
        .link{
            font-size: 30px;
            text-decoration: none;        /* 去掉下劃線 */
            color: green;
        }

        /* 僞類選擇器： */
        .link:hover{    /* 鼠標放上去以後的懸浮狀態 */
            color: gold;
            font-weight: bold;    /* 加粗 */
        }

        /* 僞元素選擇器： 一般解決bug時使用*/
        .box01,.box02{
            font-size: 20px;
        }

        .box01:before{        /* 前面塞入東西，塞的東西在網頁中鼠標是選不中的 */
            content: "前面的文字";    
            color: red;
        }

        .box02:after{        
            content: "後面的內容";    
            color: red;
        }

    </style>

</head>
<body>
    
    <a href="http://www.baidu.com" class="link">百度一下</a>
    
    <div class="box01">這是第一個div</div>
    <div class="box02">這是第二個div</div>

</body>
</html>

　　預覽效果：

相關標籤/搜索

每日一句

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