css学习心得-为样式找到应用目标

常用选择器

# 类型选择器 

# 后代选择器

伪类

:link :visited 链接伪类 ，只能用于锚元素

:hover :active :focus 动态伪类，可以应用于任何元素

ps: ie6 忽略掉 :focus伪类。ie7任何元素都支持:hover,但是会忽略掉:active 和 :focus

通用选择器

*

高级选择器

子选择器和相邻同胞选择器

区别所有后代和直系后代（子元素）

#nv>li{

}

兼容性：ie7+ ,但是针对于这样的写法，如果在ie7中，html中存在注释的话，就会出现问题。

在ie6中，可以通过通用选择器模拟子选择器的效果。

做法：

// 先在所有后代应用你希望子元素具有的样式。
#nav li{
    background:url(pig.jpg) no-repeat left top;
    padding-left:20px
}
// 通过通用选择器覆盖子元素的后代上的样式。
#nav li *{
 background-img:none;
 padding-left:0;
}

相邻 元素(同一个父级下某个元素之后的元素)（只是一个元素）

h2 + p{
  
}

PS: 同子元素选择器一样，如果html之间存在注释的话，也会存在问题的。

属性选择器

a[title]{

}
// 根据某个属性是否存在对元素应用样式
a[title]:hover{
   cursor:pointer;
}
// 可以根据属性值应用样式
a[rel="nofollow"]{
  
}

ps: ie6 不支持该写法

// ie6 的样式效果
#header{

}
// 其他样式
[id="header"]{
}

层叠和特殊性

可以通过!important

层叠采用以下重要度次序

1. 标有!important 的用户样式

2. 标有!important的作者样式

3. 作者样式

4. 用户样式

5. 浏览器/用户代理应用的样式

使用类标示页面类型，使用id标示特定页面。

继承