程序员人生网站导航

谷哥的小弟学前端(04)——CSS基础知识（2）

栏目：htmlcss时间：2017-02-04 09:09:38

深入探讨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>

请看代码第14—19行，在此定义1个并集选择器.testcss,div,p,span。也就是说把所有的div，p，span，还有属性选择器testcss放到了集合中，并且为集合中的内容设置了统1的CSS样式。

至此，关于CSS选择器的介绍就已结束了。固然，这里并没有包括到所有的选择器而是选择了主要的基础知识进行学习。

------分隔线----------------------------

上一篇 Java集合框架——List接口的使用

下一篇 mysql数据入门管理

------分隔线----------------------------