讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
在之前的几篇博客中分别介绍了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的直接子标签设置了样式，效果图如下所示：
请注意：后代选择器和子选择器的区别：
子选择器仅作用于标签的直接后代(第一代后代)；而后代选择器作用于标签的所有子孙后代元素
属性选择器
之前讲过ID选择器和类选择器，这两个选择器都是基于标签的id属性或者class属性实现的。现在，我们来继续学习属性选择器，它可以为拥有指定属性(不仅限于 class 和 id 属性)的标签设置样式。
示例1
为带有 title 属性的所有元素设置样式
代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a title="hi" href="http://www.ifeng.com">欢迎您</a>
</body>
</html>
结果如下:
示例2
为 title=“hi” 的所有元素设置样式
代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title=hi] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a title="hi" href="http://www.ifeng.com">欢迎您</a>
</body>
</html>
结果如下：
示例3
为title属性的值包含hi的所有标签设置样式；适用于由空格分隔的属性值。
代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title~=hi] {
color: red;
}
</style>
</head>
<body>
<h2 title="Hello hi">Hello world</h2>
<h2 title="Hellohi">welcome</h2>
<a title="hi" href="http://www.ifeng.com">欢迎您</a>
</body>
</html>
结果如下：
示例4
为lang 属性的值包含en的所有标签设置样式；适用于由连字符分隔的属性值：
代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[lang|=en] {
color: red;
}
</style>
</head>
<body>
<p lang="en">Hello</p>
<p lang="en-us">Hi</p>
<p lang="us">欢迎</p>
<p lang="zh">welcome</p>
</body>
</html>
结果如下：
示例5
属性选择器在表单中的应用。
语法格式：
标签名[属性=”属性值”]
代码如下：
<!DOCTYPE html>
<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>
结果如下：