CSS元素选择器
CSS元素选择器：
1.1 元素选择器
元素选择器是最简单的选择器，其语法格式如下：
E{ ... }/*其中E代表有效的HTML元素*/
E是任意的有效的HTML元素，“*”可匹配HTML文档中的任意元素
<style type="text/css">
*{
border: 1px solid red;
padding: 4px;
}
</style>在上面的CSS样式定义中使用了 * 作为通配符。
1.2 属性选择器
从广义的角度上，元素选择器其实是属性选择器的特例。属性选择器的几种语法格式：
E{ ... }：指定该CSS样式对所有的E元素起作用。
E[attr]{ ... }:指定该CSS样式对具有attr属性的E元素起作用。
E[arrt = value]{ ... }：指定该CSS样式对所有包含arrt属性，且arrt属性为value的E元素其作用。
E[arrt ~= value]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值以空格隔开的系列值，其中某个值为value的E元素起作用。
E[arrt |= value]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值以连字符隔开的系列值，其中第一个值为value的Tag元素起作用。
E[arrt ^= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以value开头的字符串的E元素起作用。
E[arrt $= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以value结尾的字符串的E元素起作用。
E[arrt *= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以包含value的字符串的E元素起作用。
<style type="text/css">
/* 对所有的div元素起作用*/
div{
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
/* 对所有有id属性的div元素起作用*/
div[id]{
background-color: #aaa;
}
/* 属性值包含xx的元素起作用*/
div[id *= xx]{
background-color: #999;
}
/*对所有以xx开头的div元素起作用*/
div[id^= xx]{
color: #fff;
background-color: #555;
}
/* 对id=xx的div元素起作用*/
div[id=xx]{
background-color: #111;
color:#fff;
}
</style>
<body>
<div>没有任何属性的div</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx的div元素</div>
<div id="xxyy">di属性值以xx开头的元素</div>
<div id="xx">id属性值为xx的yuans</div>
</body>效果如下：
1.3 ID选择器
ID选择器制定CSS样式将会对有id属性值的HTML元素起作用，ID选择器的语法格式如下： #idValue { . .. };
定义仅对指定元素起作用的ID选择器的语法格式如下： E#idValue{ ... };
<style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
#xx{
border: 2px dotted black ;
background-color: #888;
}
p#xx{
width: 300px;
height: 30px;
border: 2px dotted black;
background-color: #888;
}
</style>
<div> 没有任何属性的div </div>
<div id="xx">id属性值为xx的元素</div>
<p id="xx">id为xx的p元素</p>效果如下：
1.4 class选择器
class选择器指定CSS样式对具有指定class属性值的元素起作用。class选择器的语法格式如下： [E] .classValue { ... }
此处E可以省略，如果省略E，则对所有class属性值为classValue的元素起作用。
<style type="text/css">
.myclass{
width: 350px;
height:100px;
background-color: #dddddd;
}
div.myclass{
border: 2px dotted black;
color: #888;
}
</style>
<div class="myclass">
class属性值为myclass的div元素
</div>
<p class="myclass"> class属性值为myclass的p元素 </p>结果如下：
1.5 包含选择器
包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下： Selector1 selector2 { .... }
<style type="text/css">
div{
width: 350px;
height: 100px;
background-color: #ddd;
margin: 15px;
}
div .a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888888;
}
</style>
<div>没有任何属性的div</div>
<div> <section> <div class="a"> 处于div内且属性值为a的元素</div></section></div>
<p class="a">没有在div内但是class值为a的p元素 </p>结果如下：
1.6 子选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下：Selector1>Seceltor2 { ... }
提示：包含选择器与自选择其类似，它们的区别是：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是”孙子元素也可以“，但是子选择器不可以，它要求目标选择器必须是外部选择器对应的元素的直接子元素才可以。
<style type="text/css">
div{
width: 350px;
height: 60px;
background-color: #ddd;
margin: 5px;
}
div>.a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888888;
}
</style>
<div>没有任何属性的div</div>
<div> <section> <div class="a"> 处于div内且属性值为a的元素</div></section></div>
<div> <p class="a"> class属性值为a位于div内部的p元素</p></div>结果如下：
1.7 CSS3新增添的兄弟选择器
兄弟选择器和子选择器的道理类似，它的语法结构如下： Selector1 ~ Selector2 { .... } ;
<style type="text/css">
#b ~ .a{
background-color: #008000;
}
</style>
<div>
<div>没有任何属性的div元素</div>
<div class="a"> class="a"的div元素</div>
<!-- 因为位于id="b"的前面 所以不会有css效果-->
<div id="b"> id="b"的div元素</div>
<p class="a"> class="a"的p元素</p>
<div class="a">class="a"的div元素</div> </div>效果如下：
1.8 选择器组合
<style type="text/css">
div ,.a ,#b{
width: 200px;
height: 35px;
border: 2px dotted black;
color: #888;
}
</style>
<div> 没有任何属性的div </div>
<p class="a"> class="a"的p元素</p>
<section id="b"> id="b"的section元素</section>效果如下：
关注我的博客，近期会有更多的内容更新！
参考资料：《疯狂HTML+CSS3+JavaScript 讲义》第二版
上一篇： nginx 配置反向代理
下一篇： 结构体内存对齐