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{}

  • 相关阅读:
    Quartz.Net 作业调度后台管理系统,基于Extjs
    [备份]EntityFramework
    WebMisSharp升级说明,最新版本1.6.0
    AllPay(欧付宝)支付接口集成
    Paypal Rest Api自定义物流地址(跳过填写物流地址)
    根据IP获取国家
    ViewBag 找不到编译动态表达式所需的一种或多种类型,是否缺少引用?
    Extjs4 DateTimeField,日期时间控件完美版
    IOS Swift 训练
    .Net集成PayPal的Demo
  • 原文地址:https://www.cnblogs.com/zengsf/p/9769800.html
Copyright © 2011-2022 走看看