做程序员，UI的设计大概是所有人的硬伤。对于样式的设计，做到能读懂和修改就可以了。
毕竟专门做这个的有UI设计师和美工，但是平时不阅读样式表，这块也会生疏。
现在开始复习css的选择器。
一，CSS 元素选择器
元素选择器是最基本的选择器。
例：h1 {color:blue;}
注意，可以对html本身设置样式，例，html {color:red;}
还有一点，就是元素选择器可以设置xml的样式。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="xml.css"?>
<service>
<sys>George</sys>
<body>buddy here</body>
</service>
xml.css:
service
{
background-color: #afdfe4;
color: red;
font-size:60px;
display: block;
}
sys
{
color: blue;
font-size:18px;
display: block;
}
body
{
color: yellow;
font-size:18px;
display: block;
}
如果多个html标签设置的css有相同的部分，这样就会有多余的css代码，就会冗余，
样式表也很繁杂。把公共的css提取出来，放到一起，就是选择器分组。
例：h2, div {color:blue;}
二，类选择器。
这个最常见，就是定义一个样式，任何想用该样式的元素，只要指定就可以了。
<style type="text/css">
.sty1 {color:red;}
</style>
<p class="sty1">haha</p>
2-1，如果想限制该样式只能对某元素起作用，可以在前面加上该元素的声明（中间不能有空格）。
<style type="text/css">
p.sty1 {color:red;}
</style>
<p class="sty1">起作用</p>
<div class="sty1">不起作用</div>
这样设定就防止了该样式表被误用。
2-2，可以对统一元素指定多个类选择器。（用空格隔开）
例：
<style type="text/css">
.sty1 {color:red;}
.sty2 {font-size:60px;}
</style>
<p class="sty1">111111</p>
<p class="sty2">22222</p>
<p class="sty1 sty2">333</p>
结果第3个p同时具有sty1和sty2。
三，CSS之ID选择器。
ID 选择器前面有一个 # 号。对指定id的元素起作用，所以只能使用一次（id一般唯一）。
例：
<style type="text/css">
#id1 {color:red;}
</style>
<p id="id1">起作用</p>
<p>不起作用</p>
四，属性选择器。
指定有该属性（还可以指定条件是什么）的元素具有该样式。
属性选择器可以同时指定多个属性条件。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href="http://www.baidu.com"][title="baidu"]
{
font-size:60px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" title="baidu">百度，起作用</a>
<a href="http://www.sina.com.cn">新浪，不起作用</a>
</body>
</html>
需要特别说明的是，属性选择器是需要指定HTML 或 XHTML 规范。
即页面最上部的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果没有指定，属性选择器可能不起作用。
同时这个HTML 或 XHTML 规范在同一版本的浏览器的效果才是固定的。
也就是说，即使你指定了DOCTYPE，实际效果可能也会因为浏览器的版本不同，
最终和你调试的效果不一样（这就是为什么那么多人讨厌IE的原因之一）。
总是属性选择器不能百分百信任。
关于属性的条件有下面几个;
Element[attr] 选择具有 attr 属性的所有元素
Element[attr="aaa"] 选择 attr 属性值等于“aaa”的所有元素
Element[attr^="def"] 选择 attr 属性值以 "def" 开头的所有元素
Element[attr$="def"] 选择 attr 属性值以 "def" 结尾的所有元素
Element[attr*="def"] 选择 attr 属性值中包含子串 "def" 的所有元素
Element[attr~="aaa"] 选择 attr 属性值包含“aaa”的所有元素。
（注意，这个attr属性的值可以是多个，但必须使用空格隔开的那种格式）。
例：<p class="sty1 sty2">333</p>。
和Element[attr*="def"]不一样，Element[attr*="def"]表示所有属性值中，每个值只要包含子串def，
就有效。而Element[attr~="aaa"]是指所有属性值中，值必须等于“aaa”才有效。
例：
p[class~="sty1"]{color: red;}
<p class="sty1">有效</p>
<p class="sty1aa">无效</p>
<p class="sty1 sty2">有效</p>
<p class="sty1bbb sty2">无效</p>
p[class*="sty1"]{color: red;}
<p class="sty1">有效</p>
<p class="sty1aa">有效</p>
<p class="sty1 sty2">有效</p>
<p class="sty1bbb sty2">有效</p>
可见Element[attr*="def"]的范围更广。
还有一个Element[attr|="def"] 选择 attr 属性值中以 "def"开头的所有元素
例：
img[src|="sh"] {border: 1px solid gray;}
效果是所有src以sh开头的图像具有该样式。
五，包含选择器。
包含是指在前面的元素内只要出现后面的元素就应该样式（用空格隔开）。
例：
div p{color: red;}
<p>不起作用</p>
<div>不起作用</div>
<div><p>起作用</p></div>
<div>
<div><table><tr><td><p>嵌套很深，也起作用</p></td></tr></table></div>
</div>
六，子元素选择器。
子元素是指父元素下面紧邻的元素。
和包含选择器不同之处就在于里面的元素是不是紧邻的第一个元素。
注意，该样式选择器也需要声明HTML规范，就是最上部的
<!DOCTYPE HTML>
或者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
否则，效果就不好说了，和浏览器有关。
例：
<style type="text/css">
div>p{color: red;}
</style>
<p>不起作用</p>
<div>不起作用</div>
<div><p>起作用</p></div>
<div>
<div><table><tr><td><p>不是相邻嵌套，就不起作用</p></td></tr></table></div>
</div>
七， 相邻兄弟选择器
紧接在另一个元素后的元素，而且二者有相同的父元素，对相邻的兄弟元素（加号后者）起作用。
例：
<style type="text/css">
div+p{color: red;}
</style>
<p>不起作用</p>
<div>不起作用</div>
<p>起作用</p>
<div><p>不起作用</p></div>
3654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
