您當(dāng)前位置：首頁 > web前端 > htmlcss > 谷哥的小弟學(xué)前端(04)——CSS基礎(chǔ)知識(shí)（2）

谷哥的小弟學(xué)前端(04)——CSS基礎(chǔ)知識(shí)（2）

來源：程序員人生發(fā)布時(shí)間：2017-02-04 09:09:38 閱讀次數(shù)：4651次

深入探討Android異步精華Handler

站在源碼的肩膀上全解Scroller工作機(jī)制

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

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

版權(quán)聲明

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

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

基礎(chǔ)選擇器
- 標(biāo)簽選擇器
- 類選擇器
- id選擇器
- 通配符選擇器
復(fù)合選擇器
- 標(biāo)簽指定式選擇器
- 后代選擇器
- 并集選擇器

關(guān)于基礎(chǔ)選擇器在上1篇已介紹完了，現(xiàn)在繼續(xù)復(fù)合選擇器的學(xué)習(xí)。

甚么是復(fù)合選擇器呢？

它是在標(biāo)簽和基礎(chǔ)選擇器的共同作用下構(gòu)成的新的選擇器。

標(biāo)簽指定式選擇器

先來看標(biāo)簽指定式選擇器的寫法：

標(biāo)簽名選擇器名{屬性:值; 屬性:值;……..}

該選擇器表示的是1種”既….并且….”的關(guān)系，強(qiáng)調(diào)的是1種”同時(shí)滿足，缺1不可”的選擇條件。它最多見的用法是標(biāo)簽名與類選擇器的結(jié)合或標(biāo)簽名與ID選擇器的結(jié)合，所以更加具體地來講標(biāo)簽指定式選擇器有兩種寫法：

第1種：

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

標(biāo)簽名#ID選擇器名{屬性:值; 屬性:值;……..}

嗯哼，明白了這些以后，請(qǐng)看以下兩個(gè)示例。

第1個(gè)例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>標(biāo)簽指定式選擇器</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，它的作用對(duì)象是使用了類選擇器testselector的p標(biāo)簽。

代碼簡析以下：
1. 定義1個(gè)類選擇器testselector，請(qǐng)參見代碼第10—12行
2. 定義1個(gè)標(biāo)簽指定式選擇器，請(qǐng)參見代碼第14—18行
3. 所以，該標(biāo)簽指定式選擇器只會(huì)作用于代碼第26行

第2個(gè)例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf⑻">
        <title>標(biāo)簽指定式選擇器</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，它的作用對(duì)象是使用了ID選擇器testselector的p標(biāo)簽。

代碼簡析以下：
1. 定義1個(gè)ID選擇器testselector，請(qǐng)參見代碼第11—13行
2. 定義1個(gè)標(biāo)簽指定式選擇器，請(qǐng)參見代碼第15—19行
3. 所以，該標(biāo)簽指定式選擇器只會(huì)作用于代碼第28行

后代選擇器

與標(biāo)簽指定式選擇器強(qiáng)調(diào)的”既….并且….”不同，后代選擇器強(qiáng)調(diào)的是”嵌套”

后代選擇器的寫法介紹：

第1種：

標(biāo)簽名標(biāo)簽名標(biāo)簽名….{屬性:值; 屬性:值;…}

請(qǐng)注意每一個(gè)標(biāo)簽名之間有空格，并且這些標(biāo)簽存在嵌套關(guān)系。
第2種：

選擇器標(biāo)簽名{屬性:值; 屬性:值;…}

請(qǐng)注意二者之間有空格，并且存在嵌套關(guān)系。

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

<!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標(biāo)簽下的p標(biāo)簽。其實(shí)，這就是我們剛才提到的”嵌套關(guān)系”。

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

嗯哼，繼續(xù)看1個(gè)例子。

<!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標(biāo)簽。看到了吧：這也體現(xiàn)了剛才提到的”嵌套關(guān)系”。

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

為了，進(jìn)1步的理解后代選擇器的”嵌套”，我們?cè)賮砜?個(gè)例子。

<!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的標(biāo)簽之下的span標(biāo)簽。

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

并集選擇器

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

并集選擇器的寫法介紹：

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

請(qǐng)看以下示例：

<!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>