讲给Android程序员看的前端教程(15)——CSS选择器(5)
自定义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;
..................
}
请看如下示例：
<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/lfdfhldiv>
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;
..................
}
请看如下示例：
<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/lfdfhldiv>
body>
html>
在该实例中通过标签指定式选择器为p标签中class属性等于welcome的标签设置了样式，效果图如下：
后代选择器
后代选择器又称为包含选择器；与标签指定式选择器强调的"既….并且….“不同，后代选择器强调的是"嵌套”，语法格式如下：
selector1 selector2 selector3... {
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
请看如下示例：
<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 everyonep>
section>
div>
<p class="welcome">欢迎访问我的博客p>
<p class="welcome">一起交流开发技术p>
div>
<p id="title">谷哥的小弟p>
<div>http://blog.csdn.net/lfdfhldiv>
body>
html>
在该实例中通过后代选择器为div标签里的所有class属性等于welcome的标签设置了样式，效果图如下：
嗯哼，看到了不：div标签中，不管是子元素，还是孙子元素只要其class属性等于welcome那么都会加上特定的样式。
子选择器
子选择器用于为指定标签的第一代子元素设置样式，语法格式如下：
selector1 > selector2{
property1 : value1;
property2 : value2;
property3 : value3;
property4 : value4;
..................
}
请看如下示例：
<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 everyonep>
section>
div>
<p class="welcome">欢迎访问我的博客p>
<p class="welcome">一起交流开发技术p>
div>
<p id="title">谷哥的小弟p>
<div>http://blog.csdn.net/lfdfhldiv>
body>
html>
在此，通过子选择器为div标签里的class属性等于welcome的直接子标签设置了样式，效果图如下所示：
在此，请注意：后代选择器和子选择器的区别：
子选择器仅作用于标签的直接后代(第一代后代)；而后代选择器作用于标签的所有子孙后代元素
属性选择器
之前讲过ID选择器和类选择器，这两个选择器都是基于标签的id属性或者class属性实现的。现在，我们来继续学习属性选择器，它可以为拥有指定属性(不仅限于 class 和 id 属性)的标签设置样式。
示例1
为带有 title 属性的所有元素设置样式
代码如下：
<html>
<head>
<style type="text/css">
[title] {
color: red;
}
style>
head>
<body>
<h2 title="Hello world">Hello worldh2>
<a title="hi" href="http://www.ifeng.com">欢迎您a>
body>
html>
结果如下:
示例2
为 title=“hi” 的所有元素设置样式
代码如下：
<html>
<head>
<style type="text/css">
[title=hi] {
color: red;
}
style>
head>
<body>
<h2 title="Hello world">Hello worldh2>
<a title="hi" href="http://www.ifeng.com">欢迎您a>
body>
html>
结果如下：
示例3
为title属性的值包含hi的所有标签设置样式；适用于由空格分隔的属性值。
代码如下：
<html>
<head>
<style type="text/css">
[title~=hi] {
color: red;
}
style>
head>
<body>
<h2 title="Hello hi">Hello worldh2>
<h2 title="Hellohi">welcomeh2>
<a title="hi" href="http://www.ifeng.com">欢迎您a>
body>
html>
结果如下：
示例4
为lang 属性的值包含en的所有标签设置样式；适用于由连字符分隔的属性值：
代码如下：
<html>
<head>
<style type="text/css">
[lang|=en] {
color: red;
}
style>
head>
<body>
<p lang="en">Hellop>
<p lang="en-us">Hip>
<p lang="us">欢迎p>
<p lang="zh">welcomep>
body>
html>
结果如下：
示例5
属性选择器在表单中的应用。
语法格式：
标签名[属性=”属性值”]
代码如下：
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
style>
head>
<body>
<form name="input" action="" method="get">
<input type="text" name="username" value="username" size="20">
<input type="text" name="password" value="password" size="20">
<input type="button" value="This is button">
form>
body>
html>
结果如下：
