您當前位置：首頁 > web前端 > htmlcss > 谷哥的小弟學前端(04)——CSS基礎知識（2）

谷哥的小弟學前端(04)——CSS基礎知識（2）

來源：程序員人生發布時間：2017-02-04 09:09:38 閱讀次數：4663次

深入探討Android異步精華Handler

站在源碼的肩膀上全解Scroller工作機制

Android多分辨率適配框架（1）— 核心基礎
Android多分辨率適配框架（2）— 原理剖析
Android多分辨率適配框架（3）— 使用指南

自定義View系列教程00–顛覆自己和過往，重學自定義View
自定義View系列教程01–經常使用工具介紹
自定義View系列教程02–onMeasure源碼詳實分析
自定義View系列教程03–onLayout源碼詳實分析
自定義View系列教程04–Draw源碼分析及其實踐
自定義View系列教程05–示例分析
自定義View系列教程06–詳解View的Touch事件處理
自定義View系列教程07–詳解ViewGroup分發Touch事件
自定義View系列教程08–滑動沖突的產生及其處理

版權聲明

本文原創作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

之條件到CSS常見的選擇器可以分類為:

基礎選擇器
- 標簽選擇器
- 類選擇器
- id選擇器
- 通配符選擇器
復合選擇器
- 標簽指定式選擇器
- 后代選擇器
- 并集選擇器

關于基礎選擇器在上1篇已介紹完了，現在繼續復合選擇器的學習。

甚么是復合選擇器呢？

它是在標簽和基礎選擇器的共同作用下構成的新的選擇器。

標簽指定式選擇器

先來看標簽指定式選擇器的寫法：

標簽名選擇器名{屬性:值; 屬性:值;……..}

該選擇器表示的是1種”既….并且….”的關系，強調的是1種”同時滿足，缺1不可”的選擇條件。它最多見的用法是標簽名與類選擇器的結合或標簽名與ID選擇器的結合，所以更加具體地來講標簽指定式選擇器有兩種寫法：

第1種：

標簽名.類選擇器名{屬性:值; 屬性:值;……..}
第2種：

標簽名#ID選擇器名{屬性:值; 屬性:值;……..}

嗯哼，明白了這些以后，請看以下兩個示例。

第1個例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>標簽指定式選擇器</title>

         <style type="text/css">

          .testselector{
             color: red;
          }

          p.testselector{
            width: 650px;
            height: 30px;
            background-color: pink;
          }

        </style>

    </head>

    <body>

        <p class="testselector">歡迎訪問我的博客</p>
        <br>
        <div class="testselector">谷哥的小弟</div>
        <br>
        <p>http://blog.csdn.net/lfdfhl</p>

    </body>

</html>

在例子中定義了指定式選擇器p.testselector，它的作用對象是使用了類選擇器testselector的p標簽。

代碼簡析以下：
1. 定義1個類選擇器testselector，請參見代碼第10—12行
2. 定義1個標簽指定式選擇器，請參見代碼第14—18行
3. 所以，該標簽指定式選擇器只會作用于代碼第26行

第2個例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>標簽指定式選擇器</title>

         <style type="text/css">


          #testselector{
             color: red;
          }

          p#testselector{
            width: 650px;
            height: 30px;
            background-color: pink;
          }

        </style>


    </head>

    <body>

        <p id="testselector">歡迎訪問我的博客。</p>
        <br>
        <div id="testselector">谷哥的小弟</div>
        <br>
        <p>http://blog.csdn.net/lfdfhl</p>

    </body>

</html>

在例子中定義了指定式選擇器p#testselector，它的作用對象是使用了ID選擇器testselector的p標簽。

代碼簡析以下：
1. 定義1個ID選擇器testselector，請參見代碼第11—13行
2. 定義1個標簽指定式選擇器，請參見代碼第15—19行
3. 所以，該標簽指定式選擇器只會作用于代碼第28行

后代選擇器

與標簽指定式選擇器強調的”既….并且….”不同，后代選擇器強調的是”嵌套”

后代選擇器的寫法介紹：

第1種：

標簽名標簽名標簽名….{屬性:值; 屬性:值;…}

請注意每一個標簽名之間有空格，并且這些標簽存在嵌套關系。
第2種：

選擇器標簽名{屬性:值; 屬性:值;…}

請注意二者之間有空格，并且存在嵌套關系。

“嵌套”該怎樣理解呢？我們先來看1個后代選擇器最簡單的用法。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>后代選擇器</title>

         <style type="text/css">

          div p{
            width: 650px;
            height: 30px;
            background-color: pink;
          }

        </style>

    </head>

    <body>

        <div>
            <p>歡迎訪問我的博客</p>
        </div>

        <br>
        <div>谷哥的小弟</div>
        <br>
        <p>http://blog.csdn.net/lfdfhl</p>

    </body>

</html>

在該示例中利用后代選擇器只作用于div標簽下的p標簽。其實，這就是我們剛才提到的”嵌套關系”。

代碼簡析以下：
1. 定義1個后代選擇器div p，請參見代碼第10—14行
2. div標簽下嵌套了標簽，請參見代碼第22—24行
3. 該后代選擇器只作用于代碼第23

嗯哼，繼續看1個例子。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>后代選擇器</title>

         <style type="text/css">

          .testselector{
             color: red;
          }

          .testselector p{
            width: 300px;
            height: 30px;
            font-size: 23px;
            background-color: pink;
          }

        </style>

    </head>

    <body>

        <div class="testselector">
            <p>歡迎訪問我的博客</p>
        </div>

        <br>
        <div>谷哥的小弟</div>
        <br>
        <p>http://blog.csdn.net/lfdfhl</p>

    </body>

</html>

在該示例中利用后代選擇器只作用于類選擇器testselector下的p標簽。看到了吧：這也體現了剛才提到的”嵌套關系”。

代碼簡析以下：
1. 定義1個后代選擇器.testselector p，請參見代碼第14—19行
2. div使用了類選擇器testselector并嵌套了p標簽，請參見代碼第27—29行
3. 該后代選擇器.testselector p只作用于代碼第28

為了，進1步的理解后代選擇器的”嵌套”，我們再來看1個例子。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>后代選擇器</title>

         <style type="text/css">

          #testselector{
             color: red;
             width: 500px;
          }

          p#testselector span{
            height: 30px;
            font-size: 50px;
            background-color: yellow;
          }

        </style>

    </head>

    <body>

        <p id="testselector">
            <span>
                歡迎訪問我的博客!
            </span>
        </p>

        <p>
            <span>
                谷哥的小弟 http://blog.csdn.net/lfdfhl
            </span>
        </p>

    </body>

</html>

在該示例中利用后代選擇器只作用于使用了ID選擇器testselector的標簽之下的span標簽。

代碼簡析以下：
1. 定義1個后代選擇器p#testselector span，請參見代碼第15—19行
2. p使用了ID選擇器testselector并嵌套了span標簽，請參見代碼第27—31行
3. 該后代選擇器p#testselector span只作用于代碼第29

并集選擇器

相對標簽指定式選擇器和后代選擇器而言并集選擇器就要簡單很多了。并集選擇器是由各個選擇器或標簽通過逗號連接而成的，它主要作用是為不同的標簽設置相同的CSS樣式。

并集選擇器的寫法介紹：

選擇器(標簽),選擇器(標簽),選擇器(標簽){屬性:值;屬性:值;…..}

請看以下示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>并集選擇器</title>

         <style type="text/css">

         .testcss{
             color: red;
         }

         .testcss,div,p,span{
            height: 100px;
            font-size: 50px;
            width: 500px;
            background-color: yellow;
          }


        </style>

    </head>

    <body>

        <p class="testcss">hello</p>
        <div>歡迎訪問我的博客</div>
        <p>谷哥的小弟</p>
        <span>http://blog.csdn.net/lfdfhl</span>

    </body>

</html>