关注前端开发
关注用户体验

五种你必须彻底了解的CSS选择器

CSS选择器是进行CSS网页布局的基础,这些选择器合理的应用,将有效的提高你的开发效率和编码水平。我们在大前端有过大量的文章进行介绍,下面的这五种CSS选择器,是基础中的基础,大家一起温习一下。

一、*(通配符选择器)
*通配符选择器,经常用于css reset,即样式重置,清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源。*在css的优先级中是最低的。

* {
margin: 0;
padding: 0;
}

也可以用*来匹配某一元素下的所有子元素:

#container * {
border: 1px solid black;
}

二、#X (ID选择器)

#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的 10),作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用 id选择器的地步?

#container {
width: 960px;
margin: auto;
}

三、.X (类选择器)

.+class名,标准的样式选择器,与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器,我想也是日常前端人员用到最多的选择器了。

.error {
color: red;
}

四、X Y (后代选择器)

li a {
text-decoration: none;
}

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

五、X (标签选择器)

a { color: red; }
ul { margin-left: 0; }

标签选择器,优先级仅仅比*高,常用于css reset。

未完待续,请关注大前端下一篇文章,我们向大家介绍别的CSS选择器

赞(0)
未经允许不得转载:大前端 » 五种你必须彻底了解的CSS选择器
分享到: 更多 (0)

评论 12

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #12

    I would like to express my respect for your generosity giving support to folks who have the need for help with this theme. Your special commitment to getting the solution across was extraordinarily informative and has all the time helped some individuals much like me to realize their ambitions. The warm and friendly useful information denotes a lot to me and a whole lot more to my office workers. Best wishes; from everyone of us.

    Lia Mercurio1周前 (05-14)回复
  2. #11

    This would be the right blog for everyone who really wants to learn about this topic. You already know much its almost tricky to argue along (not too I personally would want…HaHa). You certainly put a whole new spin over a topic thats been written about for some time. Wonderful stuff, just wonderful!

    Nonton Anime2周前 (05-11)回复
  3. #10

    The movie attempts to generate sympathy for Ferrell’s character while simultaneously deriving all of its humor from his various bathroom misadventures, a mix that left this viewer cold.

    cat2周前 (05-08)回复
  4. #9

    Hey there! I simply wish to give you a huge thumbs up for the excellent information you have here on this post. I am returning to your blog for more soon.

    Apex Legends Season 12个月前 (03-31)回复
  5. #8

    Excellently written article, doubts all bloggers offered the same content because you, the internet is a greater place. Please keep it up!

    my singing monsters2个月前 (03-28)回复
  6. #7

    There are some intriguing points with time in this article but I do not determine if them all center to heart. You can find some validity but I am going to take hold opinion until I take a look at it further. Great write-up , thanks and now we want a lot more! Added to FeedBurner too

    Marlin Kipper2个月前 (03-11)回复
  7. #6

    必须的。。。。

    nianshi7年前 (2012-10-12)回复
  8. #5

    少了一种哦 .class.class{ }

    kimi7年前 (2012-02-02)回复
  9. #4

    必须学习

    长沙3A8年前 (2011-12-19)回复
  10. #3

    有时候还是不自觉的会用#ID….

    4.129年前 (2010-12-07)回复
  11. #2

    @Jankerli:嗯 高手就是你这般飘过的 O(∩_∩)O~

    浩子9年前 (2010-12-07)回复
  12. #1

    嗯,来巩固下基础,期待下一篇文章···O(∩_∩)O~

    Jankerli9年前 (2010-12-07)回复

themebetter 国内更好的WordPress主题服务商

立即前往