zoukankan      html  css  js  c++  java
  • CSS选择器

    作用:根据指定的选择器模式匹配文档中的元素,并为其设置样式。
    选择模式:选择符,指匹配元素的依据

    1.标签选择器/元素选择器

      根据标签名,匹配文档中所有的该元素,为其设置样式
      语法:标签名{属性:值;}

    2.类选择器

      1.根据元素的class属性值进行匹配
        语法:以英文.开头,后面跟上class属性值
          .c1{属性:值;}
          <p class="c1"></p>
        注意:
          1.写选择器时,不要随便出现任何符号
          2.类名自定义,禁止以数字开头,可以出现 - 数字 字母,尽量见名知意

      2.类选择器的结合使用:
        1. 标签名.类名{}----》 p.c1{}
          表示在指定标签中匹配class属性值对应的元素
          注意:标签名一定要写在前面
        2. .类名1.类名2{}
        3.标签中使用两个类选择器或者多个的样式,之间使用空格隔开。
          <p class="类名1 类名2">

    3.ID选择器

      作用:HTML中所有的元素都有一个id属性,主要用来表示该元素在文档中的标志,具有唯一性。

      语法:#id属性值{}
      使用:
        通常页面中具有唯一性的元素,都可以使用id进行标识,并使用id选择器添加样式
        页面中具有唯一性的元素:外围结构标签,搜索框

      注意:
        1.id属性具有唯一性,不能重复使用相同id,在使用JS获取页面元素时,ID是元素唯一的标识,如果出现重复,后面的元素都获取不到。
        2.id选择器与class选择器的区别:
          id具有唯一性,id选择器定义的样式不能被复用:
          class可以重复使用,类选择器定义的样式可以复用
        3.具有唯一性的元素都可以使用ID选择器设置样式
          外部的结构标签使用id标识,内部的标签使用class标识

    4.群组选择器

      作用:为多个选择器设置共同的样式

      语法:选择器1,选择器2,选择器3{样式}

    5.后代选择器

      作用:依托元素的层级关系匹配后代元素,后代元素包含直接子元素和间接子元素

      语法:选择器1 选择器2{}
        在选择器1对应的元素中匹配后代元素,后代元素需满足选择器2
    6.子代选择器

      作用:依托元素的层级关系,匹配直接子元素

      语法:选择器1>选择器2 {}
        在选择器1对应的元素中匹配直接子元素,满足选择器2的要求
    7.伪类选择器

      1.超链接伪类选择器
        主要针对超链接的不同状态设置样式
        :link 超链接访问前的状态
        :visited 超链接访问后的状态
      2.动态伪类选择器
        :hover 表示鼠标悬停时的状态
        :active 表示鼠标点按是的状态
        :focus 表示获取焦点时的状态,常见于输入框,接受用户输入时,就表示获取到焦点。

     使用:
      1.伪类选择器必须与其他选择器结合使用,伪类选择器是给元素不同的状态设置样式
      2.设置超链接四种状态下的样式
        a:link{}
        a:visited{}
        a:hover{}
        a:active{}
        书法顺序:LoVe/HAte 爱恨原则
      3.表单元素获取焦点(针对输入框)
        input:focus{}

  • 相关阅读:
    【NOIP2007】守望者的逃离
    20200321(ABC)题解 by 马鸿儒 孙晨曦
    20200320(ABC)题解 by 王一帆
    20200319(ABC)题解 by 王一帆 梁延杰 丁智辰
    20200314(ABC)题解 by 董国梁 蒋丽君 章思航
    20200309(ABC)题解 by 梁延杰
    20200307(DEF)题解 by 孙晨曦
    20200306(ABC)题解 by 孙晨曦
    20200305(DEF)题解 by 孙晨曦
    20200303(ABC)题解 by 王锐,董国梁
  • 原文地址:https://www.cnblogs.com/zengsf/p/9769800.html
Copyright © 2011-2022 走看看