CSS选择器
1.常用选择器
常用的选择器有类型选择器和后代选择器。
1.1类型选择器
类型选择器用来选择特定类型的元素。可以根据三种类型来选择。
1）ID选择器，根据元素ID来选择元素。
前面以”#”号来标志，在样式里面可以这样定义：
#demoDiv{
    color:#FF0000;
}
这里代表id为demoDiv的元素的设置它的字体颜为红。
我们在页面上定义一个元素把它的ID定义为demoDiv，如：
<div id="demoDiv">
这个区域字体颜为红
</div>
用浏览器浏览，我们可以看到因为区域内的颜变成了红
再定义一个区域
<div>
这个区域没有定义颜
</div>
用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜还是默认的颜黑。
2）类选择器 根据类名来选择
前面以”.”来标志，如：
.demoDiv{
        color:#FF0000;
    }
    在HTML中，元素可以定义一个class的属性。
    如：
<div class="demo">
这个区域字体颜为红
</div>
同时，我们可以再定义一个元素：
<p class="demo">
这个段落字体颜为红
</p>
最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包        括了页面中的div元素和p元素。
上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。
我们可以改成这样来定义。
<div class="demo">
<div>
这个区域字体颜为红
</div>
同时，我们可以再定义一个元素：
<p>
这个段落字体颜为红
</p>
</div>
这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。
3）标签选择器 根据标签选择
用标签选择指根据标签名来应用样式，定义时，直接用标签名。如：
div{
        color:#FF0000;
    }
    我们再定义一个元素。
<div>
这个区域字体颜为红
</div>
<div>
这个区域字体颜也为红
</div>
用浏览器浏览，我们发现两个DIV元素都被应用了样式，这里不用定义id，也无需要定义class属性。
示例参见：根据标签来选择元素.html
这种选择方式非常的有用，比如你觉得锚链接的下划线不太美观，想把所有的锚链接的样式都设成无下划线形式，颜为鲜艳的蓝。可以这样定义。
a{
    text-decoration:none;
    color:#00CCCC;
}
1.2 后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。
如：
<style>
.father .child{
    color:#0000CC;
}
</style>
<p class="father">
黑
    <label class="child">蓝
        <b>也是蓝</b>
    </label>
</p>
这里我们定义了所有class属性为father的元素下面的class属性为child的颜为蓝。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。
1.3. 伪类
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
    color:#999999;
}
a:visited{
    color:#FFFF00;
}
a:hover{
    color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
    background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
1.4. 通用选择器
通用选择器用*来表示。例如：
*{
    font-size: 12px;
}
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
例如：
p *{
  ……
}
表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子：
<p>
所有的文本都被定义成红
<b>所有这个段落里面的子标签都会被定义成蓝</b>
<p>所有这个段落里面的子标签都会被定义成蓝</p>
<b>所有这个段落里面的子标签都会被定义成蓝</b>
<em>所有这个段落里面的子标签都会被定义成蓝</em>
</p>
这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。
1.5. 组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
    line-height:20px;
    color:#c00;
}
#main p, #sider span {
    color:#000;
    line-height:26px;
}
.www_52css_com,#main p span {
    color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
    font-weight:100;
}
  使用组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
2. 子选择器与相邻同胞选择器
子选择器的格式为：
father > child{
cssclass属性    …….
}
子选择器与后代选择器非常相像，不同的地方是子选择器只应用于父元素的直接后代，对于直接后代的后代则不应用这个样式。IE不支持子选择器，Firefox才支持这种选择。
例如对于一个导航菜单：
<ul id="nav">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。