css学习心得-为样式找到应用目标
css学习心得-为样式找到应用目标
bosscheng 发表于3年前
css学习心得-为样式找到应用目标
  • 发表于 3年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

常用选择器

# 类型选择器 

# 后代选择器

伪类

: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标示特定页面。


继承





标签: css
共有 人打赏支持
粉丝 80
博文 210
码字总数 90636
×
bosscheng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: