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

最新推荐文章于 2025-08-16 17:02:07 发布

转载最新推荐文章于 2025-08-16 17:02:07 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/bosscheng/blog/399127

文章标签：

#python

本文详细介绍了CSS中的各种选择器，包括类型选择器、后代选择器、伪类、通用选择器、高级选择器等，并探讨了它们的兼容性和使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

常用选择器

# 类型选择器

# 后代选择器

伪类

: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

层叠采用以下重要度次序

标有!important 的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式

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

继承

转载于:https://my.oschina.net/bosscheng/blog/399127