1、什么是CSS选择器
再HTML中如果要设置某个元素的CSS样式,首先是需要找到该元素,执行这一任务的规则的名称我们称为CSS选择器。
2、CSS3选择器的分类。
分为五类:1)基本选择器,2)层次选择器,3)伪类选择器,4)属性选择器。
其中,伪类选择器又分六种:动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态选择器,结构伪类选择器、否定伪类选择器。
基本选择器是CSS中使用最多最频繁的,它是CSS早期的产物,即使到了CSS3它依旧称霸着。
基本选择器的语法:
选择器 | 类型 | 功能描述 |
* | 通配选择器 | 选择文档中所有的HTML元素 |
E | 元素选择器 | 选中指定类型的HTML中所有的元素 |
#id | ID选择器 | 选中HTML文档中指定元素的ID属性为‘ID’的元素 |
.class | 类选择器 | 选中HTML文档中指定元素的class属性为‘class’的元素 |
selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
目前市场上所有的浏览器都对基本选择器的语法支持。
通配选择器(*)用来选择所有的HTML元素如下:
*{margin:0;padding:0;}
这里将HTML元素中所有的元素的Margin和pading都设置为0,这里要注释如果值为0,可以不用带单位如px等,如果不为0,需要带上单位
元素选择器是CSS选择器中最常见,也是最基本的选择器。文档中的元素包括html、body、p、div、span、a、ul、li等等。
div{font-size:12px;}
这里将所有的DIV元素的字体大小设置为12个像素。
ID选择器和类选择器差不多,严格来说一个文档中只能拥有一个ID。如果你写多个ID也不会出错。
Class不同,一个文档中可以拥有多个
用法如下:
#ID{padding:0} .class{padding:5px 3px}
如何class出现在多个元素属性上比如:
<div class="_class"></div>
<span class="_class"></span>
如果我们只想选择span中的_class,代码如下:
span._class{padding:5px}
群组选择器是可以选择多个如:
#id,._class,div,span{padding:10px}
切记中间要使用“,”来隔开,如果不使用“,”来隔开,那么它就成了后代选择器。