CSS选择器

2016-11-19  本文已影响18人  筱南独舞
  1. 元素选择器/标签选择器(element选择器)
    a.、以文档语言对象类型作为选择器,即使用结构中元素名称作为选择器。例如:body、div、p、img、em、strong、span等等;
    b、所有的页面元素都可以作为选择器;
    c、 如果想改变某个元素的默认样式时,可以选择元素选择器;统一文档某个元素效果时,可以使用类型选择器。

  2. id选择器
    a、在标签内部加入id属性,取一个值(注意:不能以数字开头,建议以英文字母开头,可以包含数字、字母、下划线和-);
    b、在css中通过#值{}进行使用 标明选中当前页面中id属性值为“值”的元素;
    c、id属性值在当前页面中必须唯一;
    d、id选择器主要用在网页的外围结构。

  3. class选择器
    a、在标签内部加上class属性,取一个值(注意:不能以数字开头,建议以英文字母开头,可以包含数字、字母、下划线和-),也可以给class属性多个值,值与值之间用空格隔开就行了;
    b、在css中通过.class属性值{}进行使用,表示选中当前页面中所有的class属性为“值”的元素;
    c、使用场合:对某些元素进行统一样式的设置就可以设置相同的class。

  4. *通配符(全局选择器)
    a、通配符表示选中当前页面中所有的元素;
    b、主要用于样式的重置。

  5. 交集选择器
    标签选择器与class选择器的交集
    标签选择器与属性选择器的交集
    标签选择器与伪类选择器的交集
    标签选择器与伪元素选择器的交集
    书写的注意:选择器与选择器之间一定要紧挨着写,不能为空格或者其他的符号

  6. 并集选择器(群组选择器)
    当有多个选择器应用相同的样式时,可以将选择器用”,”分隔,合并为一组。
    语法:选择器1,选择器2,选择器3{ 属性: 属性值; }

  7. 后代选择器(包含选择器)
    选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有选择器2
    语法:选择器1 选择器2 选择器3 选择器4{ 属性: 属性值; }

  8. 子选择器
    选择器1和选择器2用>连接,含义就是选择器1中所有子一级选择器2.
    语法:选择器1>选择器2>选择器3{ 属性: 属性值; }

  9. 超链接的四种伪类样式
    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;} 表示超链接的三种状态都相同,只有鼠标划过变颜色

  10. 选择器的权重
    css中用四位数字表示权重,权重的表达方式如:0,0,0,0
    标签选择器的权重为0001
    class选择器的权重为0010
    id选择器的权重为0100
    属性选择器的权重为0010
    伪类选择器的权重为0010
    伪元素选择器的权重为0010
    后代、子、交集选择器的权重:为组成的选择器的权重之和
    继承样式的权重为0000
    行内样式的权重为1000

上一篇下一篇

猜你喜欢

热点阅读