美文网首页
CSS选择器

CSS选择器

作者: 筱南独舞 | 来源:发表于2016-11-19 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

    相关文章

      网友评论

          本文标题:CSS选择器

          本文链接:https://www.haomeiwen.com/subject/bqaspttx.html