CSS选择器
-
元素选择器/标签选择器(element选择器)
a.、以文档语言对象类型作为选择器,即使用结构中元素名称作为选择器。例如:body、div、p、img、em、strong、span等等;
b、所有的页面元素都可以作为选择器;
c、 如果想改变某个元素的默认样式时,可以选择元素选择器;统一文档某个元素效果时,可以使用类型选择器。 -
id选择器
a、在标签内部加入id属性,取一个值(注意:不能以数字开头,建议以英文字母开头,可以包含数字、字母、下划线和-);
b、在css中通过#值{}进行使用 标明选中当前页面中id属性值为“值”的元素;
c、id属性值在当前页面中必须唯一;
d、id选择器主要用在网页的外围结构。 -
class选择器
a、在标签内部加上class属性,取一个值(注意:不能以数字开头,建议以英文字母开头,可以包含数字、字母、下划线和-),也可以给class属性多个值,值与值之间用空格隔开就行了;
b、在css中通过.class属性值{}进行使用,表示选中当前页面中所有的class属性为“值”的元素;
c、使用场合:对某些元素进行统一样式的设置就可以设置相同的class。 -
*通配符(全局选择器)
a、通配符表示选中当前页面中所有的元素;
b、主要用于样式的重置。 -
交集选择器
标签选择器与class选择器的交集
标签选择器与属性选择器的交集
标签选择器与伪类选择器的交集
标签选择器与伪元素选择器的交集
书写的注意:选择器与选择器之间一定要紧挨着写,不能为空格或者其他的符号 -
并集选择器(群组选择器)
当有多个选择器应用相同的样式时,可以将选择器用”,”分隔,合并为一组。
语法:选择器1,选择器2,选择器3{ 属性: 属性值; } -
后代选择器(包含选择器)
选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有选择器2
语法:选择器1 选择器2 选择器3 选择器4{ 属性: 属性值; } -
子选择器
选择器1和选择器2用>连接,含义就是选择器1中所有子一级选择器2.
语法:选择器1>选择器2>选择器3{ 属性: 属性值; } -
超链接的四种伪类样式
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
(1)当这4个超链接伪类选择器联合使用时,应注意他们的顺序,正常顺序为:�
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
(2)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色 -
选择器的权重
css中用四位数字表示权重,权重的表达方式如:0,0,0,0
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
后代、子、交集选择器的权重:为组成的选择器的权重之和
继承样式的权重为0000
行内样式的权重为1000