剖析4大常用的css选择器,领略css的巨大灵活性【三行网站建设】

剖析4大常用的css选择器,领略css的巨大灵活性

剖析4大常用的css选择器,领略css的巨大灵活性：

4大常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。
广州网站建设公司三行网络今天为您剖析4大常用的css选择器

* {
    margin: 0;
    padding: 0;
   }
星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

#container * {
border: 1px solid black;
}
上面的代码中会应用于id为container元素的所有子元素中。

除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

#container {
      width: 960px;
      margin: auto;
   }
井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

.error {
color: red;
}

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

li a {
text-decoration: none;
}

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

本文由广州网站建设公司-三行网络原创，转载请保留版权（广州网站建设www.3gonet.com ）三行网络——专注于企业网站建设、响应式营销型网站定制，欢迎来电咨询！热线：020-85628720、15915767698

标签：剖析4大常用的css选择器,领略css的巨大灵活性

上一篇：网站界面设计、内容定位策略下一篇：网络营销高招：如何占领客户的心智

剖析4大常用的css选择器,领略css的巨大灵活性

新闻资讯编辑：【三行网络 - 广州网站建设公司www.3gonet.com】 发布时间2011.7.27.浏览数：3230

标签： 剖析4大常用的css选择器,领略css的巨大灵活性

新闻资讯编辑：【三行网络 - 广州网站建设公司www.3gonet.com】发布时间2011.7.27.浏览数：3230

标签：剖析4大常用的css选择器,领略css的巨大灵活性