作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
其他：
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用：选中指定父元素的指定子元素
语法：父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
nth-child可以选择单个元素，也可以实现一个范围，如: 123456上面是一个列表1.选择单个标签元素（指定序列的单个元素）.li:nth-child(1){ color: red}执行上面的CSS，1在界面上面表现为红色2.选择一个范围的标签元素（偶数序列的元素）通过id获取元素再易不过，但通过css获取元素就得自己写函数了。如下参数一个是父亲元素，一个是要获取的css名，返回的是元素的数组集合，所以要这样用:var a=getByClass(oDiv, 'myDemoCss')[0]
1 function getByClass(oParent, sClass)
2 {
3 var aEles=oParent.getElementsByTagName('*')
4 var res=[]
5 var i=0
6
7 for(i=0i<aEles.lengthi++)
8 {
9 if(aEles[i].className==sClass)
10 {
11res.push(aEles[i])
12 }
13 }
14
15 return res
16 }
-==============css的相关操作就可以做成如下的函数了
//增加css
1 function addClass(obj,sClass)
2 {
3 if(!getClass(obj,sClass))
4 {
5 obj.className+=" "+sClass
6 }
7 }
//判断是否存在css 返回boolen
function getClass(obj,sClass)
{
var aClass=obj.className.split(" ")
for(var i=0i<aClass.lengthi++)
{
if(aClass[i]==sClass)
{
return true
}
}
return false
}
//删除css
1 function removeClass(obj,sClass)
2 {
3 var aClass=obj.className.split(" ")
4 for(var i=0i<aClass.lengthi++)
5 {
6 if(aClass[i]==sClass)
7 {
8aClass[i]=""
9 }
10 }
11 obj.className=aClass.join(" ")
12 }
