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

    伪类 | 伪元素

    :target        url中的当前锚点, 可以利用这个特效实现类似js事件触发的效果
    :link        未访问链接
    :visited      访问过的链接
    :hover       把鼠标放在链接上的状态(在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的)
    :active       正在活动链接,当你点击一个链接时它变成活动链接,所以这是一个一瞬间的效果(在CSS定义中,a:active 必须被置于 a:hover 之后,才是有效的)


    :first-child    该元素是其父元素的第一个孩子(文本的值,不算是孩子)
    :last-child     该元素是其父元素的最后一个孩子
    :only-child     该元素是其父元素唯一的孩子
    :nth-child(n)    该元素是其父元素的正数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)
    :nth-last-child(n) 该元素是其父元素的倒数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)


    :first-of-type   该元素是其父元素的第一个该元素(如: p:first-child, p元素是其父元素的第一个孩子,其上没有元素了; p:first-of-type, p元素是其父元素的第一个p孩子, 无论其上还有多少孩子(div, h1, span等))
    :last-of-type    该元素是其父元素的最后一个该元素
    :only-of-type 该元素是其父元素唯一的该元素
    :nth-of-type(n)   该元素是其父元素的正数第几个该元素(n可以是: odd,奇数; even,偶数; an+b,n从0自增)
    :nth-last-of-type(n) 该元素是其父元素的倒数第几个孩子(n可以是: odd,奇数; even,偶数; an+b,n从0自增)


    :before       元素之前插入内容
    :after       元素之后插入内容


    :first-letter   改元素内文字的第一个字母
    :first-line    该元素内文字的第一行(文字会自动换行的哦)


    :root        文档的根元素,在HTML中根元素始终是HTML元素
    :not         所有该元素之外的元素
    :empty        没有孩子的元素


    :lang()       向带有指定 lang 属性开始的元素添加样式 (p:lang(it)会对<p lang="it"></p>起作用)


    :enabled       启用的的元素
    :disabled      禁用的的元素
    :valid        值是合法的
    :invalid       值是非法的
    :required      表单元素是必填项, 表单元素可以使用 required 属性来设置必填项
    :optional      表单元素中如果没有特别设置 required 属性即为 optional 属性
    :read-write     即没有 "readonly" 属性的元素
    :read-only      设置了 "readonly" 属性的元素, 表单元素可以设置 "readonly" 属性来定义元素只读, 目前,大多数浏览器, :read-only 选择器适用于 input 和 textarea 元素
    :in-range      标签的值在指定区间值,只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性
    :out-of-range
    :focus        具有焦点的元素
    :checked       选中的输入元素(仅适用于单选按钮或复选框)


    div > p       所有父级是 <div> 元素的 <p> 元素, 所有的儿子
    div + p       <div>元素之后的第一个<p>兄弟元素, 第一个弟弟
    div ~ p        <div>元素之后的所有的<p>兄弟元素, 所有弟弟


    *           所有元素
    p           所有p元素
    .in          class属性
    #in          id属性
    div, p        所有<div>元素和<p>元素
    div p        <div>元素内的所有<p>元素


    [attribute]           所有有attribute属性的元素 (div[class]: 所有有class属性的div元素)
    [attribute=value]       所有其attribute属性的值为value的元素 (div[class=col-md-2]: 所有class="col-md-2"的div元素)
    [attribute|=value]       所有其attribute属性的值是以value开头的字符串的元素 (div[class|=col]: 所有class是以col开头的div元素, class="col-md-2", class="col5")
    [attribute~=value]       所有其attribute属性的值是含有value的字符串的元素
                     (div[class~=col-md-2]: 所有class中含有col-md-2的div元素, 这个class可以有其他的值,比如class="pull-right col-md-2 text-left", class="tt_col-md-2")

    [attribute$=value]       所有其attribute属性的值是以value结尾的字符串的元素   (div[class$=col-md-2]: 所有class是以col-md-2结尾的div元素, 比如class="pull-right col-md-2", class="tt 6-col-md-2")
    [attribute^=value]       所有其attribute属性的值是以value开头的字符串的元素  (div[class^=col]: 所有class是以col开头的div元素, class="col-md-2", class="col5")
    [attribute*=value]       所有其attribute属性的值是含有value的字符串的元素  
                     (div[class*=col-md-2]: 所有class中含有col-md-2的div元素, 这个class可以有其他的值,比如class="pull-right col-md-2 text-left", class="tt_col-md-2")


    ::selection           元素中被用户选中或处于高亮状态的部分

    选择器的优先级

  • 相关阅读:
    Flask + vue 前后端分离的 二手书App
    Kafka 0.10.0.1 consumer get earliest partition offset from Kafka broker cluster
    Kafka topic Schema version mismatch error
    ORM的多表查询详述
    ORM多表操作之创建关联表及添加表记录
    ORM的单表操作
    Django的模板层简介
    Django的视图层简介
    Django中的路由配置简介
    Django简介及Django项目的创建详述
  • 原文地址:https://www.cnblogs.com/hangtt/p/7191853.html
Copyright © 2011-2022 走看看