• CSS选择器(一)


    CSS选择器包括标签选择器、ID选择器、类选择器、伪类和伪对象选择器、子选择器、相邻选择器、属性选择器、通用选择器、包含选择器、分组选择器、指定选择器等选择器,分为标签选择器、ID选择器、类选择器、特殊选择器这四类。

     

    以下是我总结的5种常用的CSS选择器。

     

    1、标签选择器
    eg:  p{ color:#333; }
           a{ display:block; }
    优点:能快速为页面中同类型的标签统一样式。
    缺点:不能设计差异化的样式,有时会造成样式的相互干扰。
     
    2、ID选择器
    eg:  #nav{ margin:0px; padding:10px; }
    解释说明: '#' 为ID选择符前缀
                       'nav' 为ID名称
    元素的ID名称是唯一的,只能对应文档中的一个元素。
    适用范围:在页面中唯一、固定、不会重复出现的对象,如导航栏等。
     
    3、类选择器
    eg:  .col{ }
    解释说明: '.' 为类选择符前缀
                       'col' 为类名
    适用范围:类样式可应用于文档中的多个元素。
    特性:①使用类选择器前,需在HTML文档中为要应用类样式的元素定义相应的class属性;
               ②有较好的灵活性,可指定类样式应用的元素对象范围。
    比较:在同等条件下,ID选择器的优先权比类选择器更大。
     
    4、伪类和伪对象选择器
    eg:  a:hover{ font-weight;bold; }
    解释说明: 'a' 为指定标签名
                       ':' 为伪类或伪元素标识符
                       'hover' 为伪类或伪元素名
    适用范围:用以选择特殊状态或特殊区域下的元素。
    6种常用伪类选择器如下表所示:
    伪类
    说明
    :focus
    定义对象在成为输入焦点时的样式
    :link
    定义未访问过的超链接样式
    :visited
    定义访问过的样式
    :hover
    定义鼠标经过的样式
    :active
    定义鼠标按下的样式
    :first-child
    定义对象的第一个子对象的样式
    “:link”、“:visited”、“:hover”、“:active”这4个链接伪类选择器联合使用时,要注意使用顺序,错误的顺序会使超链接样式失效。
    eg:   a{ text-decoration:none; }
            a:link{ color: black; }
            a:visited{ color: red; }
            a:hover{ color: blue; }
            a:active{ color: grey; }
    关于":link"伪类,有些浏览器会把它解析为任何超链接,即它既可以是访问过的,也可以是未访问的。故有时可用a选择器样式来替代a:link选择器样式。
    注意:在IE浏览器中,是用于超链接相关的伪类选择器时应为a元素定义href属性,否则会失效,但在其他浏览器中则可用无需为a元素定义href属性。
     
    5、子选择器
    eg:   div>a{ color:#fff; }
    解释说明: 'div' 为父级选择符名
                       '>' 为子选择符标识符
                       'a' 为子级选择符名
    注意:①子选择器中所控制的元素只能是‘>’符号前面所指定对象的子元素。
  • 相关阅读:
    Java 入门 36 泛型深入 泛型的概述和优势 自定义泛型类 自定义泛型方法 自定义泛型接口 泛型通配符 上下限
    Java 入门34 常见的数据结构
    Java 入门 40 日志框架 项目阶段 (Java 入门 1924天 需要使用在学)
    Java 入门 31 常用API 日期与时间
    Java 入门 32 包装类 正则表达式 Arrays类 Lambda表达式枚举
    Java 入门35 List系列集合, 几黑的并发修改异常问题 LinkedList
    OpenStack yoga安装(Ubuntu)
    OpenStack命令行添加网卡
    Ceph删除pool
    ceph osd 初始化硬盘时提示OSD::mkfs: ObjectStore::mkfs failed with error (5) Input/output error
  • 原文地址:https://www.cnblogs.com/JennyLin77/p/5284510.html
Copyright © 2020-2023  润新知