这 30 类 CSS 选择器,你必须记在脑袋里!(一)

大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这 篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。

1. *

* {
   margin 0 ;
   padding 0 ;
}
在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和 `padding`。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。
#container * {
   border 1px  solid  black ;
}
它会选中`#container`下的所有元素。当然,我还是不建议你去使用它,如果可能的话。
DEMO
    兼容性:IE6+;Firefox;Chrome;Safari;Opera
2. #X
#container {
    width 960px ;
    margin auto ;
}

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用,然后使用的时候大家还是得相当小心的。
需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?

`id`选择器是很严格的并且你没办法去复用它。如果可能的话,首先试试用标签名字,HTML5中的新元素,

或者是伪类。

DEMO
    兼容性:IE6+;Firefox;Chrome;Safari;Opera
3. .X
.error {
   color red ;
}
这是个`class`选择器。它跟`id`选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就
可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。
 具体详见:http://www.oschina.net/news/57107/30-css-selector-you-should-remeber,这里不多赘述.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值