常用的css选择符,CSS选择器五大基本选择符

原标题：CSS选择器五大基本选择符

1. *(通配符)

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

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

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

2. #X(ID)

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

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

3. .X(类)

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

.error {color: red;}

4. X Y(后代)

li a {text-decoration: none;}

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

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

这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

5. X(标签)

a { color: red; }

ul { margin-left: 0; }

标签选择器，优先级仅仅比*高，常用于css reset(样式重置)。返回搜狐，查看更多

责任编辑：

常用的css选择符,CSS选择器五大基本选择符相关推荐

好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
CSS选择符（选择器）
CSS选择符(选择器): 表示要定义样式的对象 1.元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...
一般没有系统的学习过,只是在网上看一些片断教程的人.见到最多的可能也就是: 元素选择符(例如:body .a .li ) ID选择符(例如:#head.#body.#foot) 类选择符(例如:.re ...
[css] css中最常用的字体有哪些？你是怎么选择字体的？
[css] css中最常用的字体有哪些?你是怎么选择字体的? 总结: win:微软雅黑为Win平台上最值得选择的中文字体,但非浏览器默认,需要设置:西文字体的选择以Arial.Tahoma等无衬线字体 ...
基础选择器之通配符选择器（CSS、HTML）
基础选择器之通配符选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta c ...
基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
css语言基础--css的选择符语法
1 基本的选择符包括通用选择符.类选择符.属性选择符.ID选择符.伪类选择符等. 2 3 4 1简单选择符(类型选择符和通用选择符被统称为简单选择符) 5 1.1类型选择符 6 类型就是指HTML语言 ...

常用的css选择符,CSS选择器五大基本选择符

常用的css选择符,CSS选择器五大基本选择符相关推荐

最新文章

热门文章