CSS选择器类型

来源:互联网 发布:less.js怎么用 编辑:程序博客网 时间:2024/05/21 08:06

CSS选择器的由选择器与声明组成。声明包括属于与值两部分:selector{property:value}

选择器的类型划分:

标签选择器:实质为html代码中的标签;

类选择器:语法为;.类选择器名称{CSS样式代码};

ID选择器:语法为;#id{CSS样式代码};

子选择器:语法为;selector>html标签{CSS样式代码};即大于符号(>),用于选择指定标签的第一代子元素;

包含选择器:语法为;selector html标签{CSS样式代码};即加入空格,用于选择指定标签下的后辈元素;

通用选择器:语法为;*{CSS样式代码};即使用一个(*)号指定,它的作用是匹配html中所有的标签;

伪类选择符:允许给html不存在的标签(标签的某种状态)设置样式,例如给html中标签元素设置鼠标滑过的状态;

分组选择器:为html中多个标签元素设置同一个样式,使用分组选择符(,)分隔selector;

CSS样式的继承:即一种规则,允许样式不仅应用于选定的html标签元素,同时应用于其后代。


div标签用于网页排版,span标签没有语义,是为了设置单独的样式用的。

注:

CSS样式的权重情况

标签的权值为1,
类选择符的权值为10,
ID选择符的权值最高为100,
继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低

eg:实例来自慕女郎

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

0 0
原创粉丝点击