讲给Android程序员看的前端教程(15)——CSS选择器(5)

来源：互联网发布：javashop最新源码下载编辑：程序博客网时间：2024/05/20 06:23

自定义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–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

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

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

在之前的几篇博客中分别介绍了CSS中常用的选择器：标签选择器，类选择器，ID选择器，通配符选择器。在本篇博客中，我们将学习这些选择器的复合使用。

并集选择器

并集选择器由各个选择器通过逗号连接而成的，它为不同的标签设置相同的CSS样式；语法格式如下：

selector1,selector2,selector3... {   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>并集选择器</title>    <style type="text/css">    .welcome,#title,div {        font-size: 23px;        color: red;    }    </style></head><body>    <p class="welcome">欢迎访问我的博客</p>    <p id="title">谷哥的小弟</p>    <div>http://blog.csdn.net/lfdfhl</div></body></html>

在该示例中通过并集选择器统一为div标签，class属性为welcome的标签，id属性为title的标签设置了样式。效果图如下所示：

这里写图片描述

标签指定式选择器

标签指定式选择器用于为指定的标签设置CSS样式；它所表示的是一种”既….并且….”的关系，强调的是一种”同时满足，缺一不可”的选择条件。它最常见的用法是标签名与类选择器的结合或者标签名与ID选择器的结合，所以更加具体地来说标签指定式选择器有两种写法：

第一种：

标签名.类选择器名{   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

第二种：

标签名#ID选择器名{   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签指定式选择器</title>    <style type="text/css">    p.welcome{        font-size: 23px;        color: red;    }    </style></head><body>    <p class="welcome">欢迎访问我的博客</p>    <p id="title">谷哥的小弟</p>    <div>http://blog.csdn.net/lfdfhl</div></body></html>

在该实例中通过标签指定式选择器为p标签中class属性等于welcome的标签设置了样式，效果图如下：

这里写图片描述

后代选择器

后代选择器又称为包含选择器；与标签指定式选择器强调的”既….并且….”不同，后代选择器强调的是”嵌套”，语法格式如下：

selector1 selector2 selector3... {   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>后代选择器</title>    <style type="text/css">    div .welcome {        font-size: 23px;        color: red;    }    </style></head><body>    <div>        <div>            <section>                 <p class="welcome">hello everyone</p>            </section>         </div>        <p class="welcome">欢迎访问我的博客</p>        <p class="welcome">一起交流开发技术</p>    </div>    <p id="title">谷哥的小弟</p>    <div>http://blog.csdn.net/lfdfhl</div></body></html>

在该实例中通过后代选择器为div标签里的所有class属性等于welcome的标签设置了样式，效果图如下：

这里写图片描述

嗯哼，看到了不：div标签中，不管是子元素，还是孙子元素只要其class属性等于welcome那么都会加上特定的样式。

子选择器

子选择器用于为指定标签的第一代子元素设置样式，语法格式如下：

selector1 > selector2{   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>子选择器</title>    <style type="text/css">    div>.welcome {        font-size: 23px;        color: red;    }    </style></head><body>    <div>        <div>            <section>                 <p class="welcome">hello everyone</p>            </section>         </div>        <p class="welcome">欢迎访问我的博客</p>        <p class="welcome">一起交流开发技术</p>    </div>    <p id="title">谷哥的小弟</p>    <div>http://blog.csdn.net/lfdfhl</div></body></html>

在此，通过子选择器为div标签里的class属性等于welcome的直接子标签设置了样式，效果图如下所示：

这里写图片描述

在此，请注意：后代选择器和子选择器的区别：

子选择器仅作用于标签的直接后代(第一代后代)；而后代选择器作用于标签的所有子孙后代元素

阅读全文

3 0