CSS选择器高级应用之子类、伪类、通用选择器等
1、CSS选择器之子类用法： 这里来实现用子类选择器设置不同文字的样式的实例来说明问题，具体的代码如下：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
.div{color:red;}
.div1{font-weight:bold;}
.div2{font-style:italic;}
</style>
</head>
<body>
<div class="div">控制戴改字体样式</div>
<div class="div div1">控制字体样式</div>
<div class="div div2">控制字体样式</div>
</body>
</html>
可以看到一个标签中使用两个类的CSS规则样式，用到空格隔开两个CSS的样式。
2、CSS选择器沟扯之子类用法： 这里用伪类的具体应用来说明一个问题，具体的是实现input标签的样式，具体如下代码所囊荡耻示：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
input:focus{
background:yellow;
border:1px solid green;
}
</style>
</head>
<body>
<input type="text"/>
</body>
</html>
如下图可以看到具体的执行效果，伪类还有其他的应用，具体的可以自己总结。
3、CSS选择器之子类用法：通用选择器就是所有的样式都使用CSS样式，具体的代码如下：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
*{margin:0px;
border:0px;}
</style>
</head>
<body>
HTML
<h3>CSS</h3>
</body>
</html>
可以看到，无论是P标签还是H3标签，前面的空格都没有了。
4、CSS选择器之子类用法：子类选择器使用的是>这个符号来表示的，具体的代码如下：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
ul#main >li{background-color:red;}
</style>
</head>
<body>
<ul id="main">
<li>HTML</li>
<ul >
<li>CSS</li>
<li>CSS</li>
</ul>
<li>HTML</li>
</ul>
</body>
</html>
如下图，可以可能此实例的执行的效果。
5、CSS选择器之子类用法：相邻同胞选择器使用的是+来实现的，具体的代码如下：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
h1+p{color:red;}
</style>
</head>
<body>
<h1>这里是h1</h1>
靠近h1的p
其他的p
</body>
</html>
和h1相邻的p的样式就用相邻同胞选择器，不用CSS类就能给p设置CSS规则，具体的代码如上，执行结果如下图。
6、CSS选择器之子类用法：属性选择器是通过hmtl标签的属性来区分和调用CSS规则的一种实现方法，具体的代码如下图所示：
<html>
<head>
<title>CSS高级应用</title>
<style type="text/css">
strong[title]{color:red;}
</style>
</head>
<body>
<strong title="bt">这里是有标题的HTML</strong><br/>
<strong>这里是没有标题的HTML</strong>
</body>
</html>
如下图可以看到具体的效果，通过标题来区分不同的HTML代码，来设置相关的CSS规则
