1、类别选择器
类别选择器根据类名来选择,前面以“.”来标志。
在HTML中,元素可以定义一个class的属性,并且多个元素都可以重复应用这个属性。
2、标签选择器
一个完整的HTML页面是有很多不同的标签组成,如:body,div,p,ul,li,而标签选择器,则是 决定哪些标签采用相应的css样式。
3、ID选择器
ID选择器可以为标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素,具有唯一性,这意味着同一ID在同一文档页面中只能出现一次。例如,你将一个元素的id取值为“name”,那么在同一页面你就不能再将其他元素id取名为“name”了。
前面以“#”号来标志,在样式里面可以这样定义
4、通用选择器
用过“*”号来表示。如下代码表示所有元素的内外边距都为0,所有的字体都为微软雅黑。他可以清除不同浏览器的默认样式。
同时通用选择器还可以和后代选择器组合。如下表示所有p元素后代的所有元素都应用这个样式。
注意:但是如果你在p标签里嵌套了一个p标签,就会出现浏览器不能解析的情况,因此要避免这种情况发生。.
5、后代选择器
后代选择器也称为包含选择汽车,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅只能有两个,对于多层子线后代关系,可以有多个空格加以分开。
如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。
6、子选择器
请注意这个选择器与后代选择器的区别,子选择器只是选择元素的直接后代,即仅仅作用于第一个后代。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
7、伪类选择器
即链接样式。a元素的伪类,存在4中不同的状态:link、visited、active、hover。
8、群组选择器
具有相同样式的标签分组显示,将具有多个相同属性的元素,合并群组进行选择,定义同样的css属性,这大大的提高了编码效率,同时也减少了css文件的体积。
9、相邻同胞选择器
如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式,就可以使用相邻同胞选择器。两个元素之间用“+”进行连接。
问题一:如果是十一个class选择器和一个ID选择器,系统会以哪个优先?
解答:十一个class的选择器和一个ID选择器系统会以ID选择器优先
问题二:对多个选择器使用的优先级是怎么进行计算的?
解答:对于不同类别的选择器,以以下原则进行排序:
1、在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或子元素集成父类的样式
将上面的稍微总结一下就是:
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
同一级别中后写的会覆盖先写的样式。
问题三:子选择器和后代选择器的区别?
解答:这个在前面有讲到,子选择器只是选择元素的直接后代,即仅仅作用于第一个后代,后代选择器则可作用于孙子代、曾孙子代。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。