• 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' 为子级选择符名
    注意:①子选择器中所控制的元素只能是‘>’符号前面所指定对象的子元素。
  • 相关阅读:
    String判空效率比较
    myeclipse数据库逆向hibernate教程
    博客使用说明和我的学习心得(技术路线和书单)
    【小记】go如何判断key是否在map中
    MySQL必知必会笔记——MySQL其他操作
    MySQL必知必会笔记——查询的进阶知识
    MySQL必知必会笔记——查询的基础知识
    MySQL必知必会笔记-Mysql基本操作
    Linux学习笔记:Linux命令之权限管理命令
    Linux学习笔记:用户与用户组
  • 原文地址:https://www.cnblogs.com/JennyLin77/p/5284510.html
Copyright © 2020-2023  润新知