分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

CSS选择器五大基本选择符

  • 时间:2018-09-03 22:51 作者:中天科技教育 来源:中天科技教育 阅读:467
  • 扫一扫,手机访问
摘要:1. *(通配符)*通配符选择器,经常使用于css reset(样式重置),清除标签的默认样式,但现在一般不提倡直接用*了,主要是*会匹配所有标签,相当耗资源。*在css的优先级中是最低的。* {margin: 0; padding: 0;} 也可以使用*来匹配某一元素下的所有子元素:#contai

1. *(通配符)

CSS选择器五大基本选择符

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

* {margin: 0; padding: 0;} 也可以使用*来匹配某一元素下的所有子元素:

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

2. #X(ID)

CSS选择器五大基本选择符

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

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

3. .X(类)

CSS选择器五大基本选择符

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

.error {color: red;}

4. X Y(后代)

CSS选择器五大基本选择符

li a {text-decoration: none;}

目前非常常使用的css选择器,使用于选取X元素下子元素Y,这里有个要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜用的,比方上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。

用此子孙选择器的时候要考虑能否希望某样式对所有子孙元素都起作使用。

这种子孙选择器还有个作使用,就是创立相似命名空间的作使用。比方上述代码样式的作使用域显著为li。

5. X(标签)

CSS选择器五大基本选择符

?a { color: red; }

ul { margin-left: 0; }

标签选择器,优先级仅仅比*高,常使用于css reset(样式重置)。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部