zoukankan      html  css  js  c++  java
  • CSS中的伪类与伪元素选择器

    伪类

    一、链接伪类(又叫锚点伪类)

    (1)

    :link:用于给a标签设置点击前的样式,:visited:用于给a标签设置鼠标点击后的样式,:hover:给a标签设置当鼠标移入时显示的样式,:active:给a标签设置当鼠标摁下时显示的样式

    由于a标签的:link和:visited可以覆盖a标签的所有状态,所以当:link,:visited,:hover,:active同时出现在a标签身上时,为了不让样式失效,:link和:visited只能放在:hover,:active之前。

    :link和:visited这两个伪类只能用于修饰a标签,而:hover和:active除了可用于a标签外,还可用于div等其他标签。

    用法如下图所示,

    注意:测试时,每次点击后应及时清除浏览器缓存

    (2)

    :target:代表一个特殊的元素

                      

    二、表单伪类

    :enabled:用来设置可编辑时的显示样式,:disabled:设置不可用时的显示样式,:checked:设置选中时的显示样式,:focus:设置获得焦点时的显示样式,该伪类还可用于修饰div,用法如下图所示,

                                 

    伪类选择器

    三、结构性伪类选择器

    实际开发中常用的有:

    (1.1)

    :nth-child(index)

    index可以取值具体的数字,不能是0

    index可以取值一个字母n,该字母自动递增,步长为1,可以对n进行加减乘操作,如果n参与了加法运算n就从0开始,如果没有参与加法运算,n就从1开始

    index还可以取值even表示偶数,odd表示奇数。

    知一叶而知全秋

    ul > li:nth-child(3) {
    background: #f00;
    }

    这句代码含义是:给ul标签下的第三个亲儿子li加背景色#f00

    (1.2)

    :nth-of-type(index)

    此处index特点和(1.1)中一致。

     图中命中1-2、0-2、2-2

    (2.1)

    :only-child,如果直接父元素仅仅只有这一个子元素,没有其他元素就命中这个子元素

    图中只命中3

    (2.2)

    :only-of-type,直接父元素中这类元素有一个时,可以有其他元素,就命中这个元素

    图中命中3、5

    (3.1)

    :last-child

    图中命中4

    :nth-last-child

    :first-child

    它们三个用法很类似,一般都是结合> 直接子类选择器来使用

    (3.2)

    :last-of-type

    作用:不同直接父元素中这类元素都有多个,命中这些直接父元素中这类元素的最后一个

    图中命中1-3、0-3、2-3

    :first-of-type

    用法和:last-of-type伪类一样,命中每个直接父元素下的第一个目标标签

    :nth-last-of-type(index)

    用法和:last-of-type伪类一样,只是这里可以通过索引自由指定匹配哪一个,但要倒着数

    (4)

    :not,作用是直接父元素中除它之外的子元素全部命中

    div > a:not(:last-of-type) {
    border-right: 1px solid red;
    }

    (5)

    :empty,命中body标签内所有空标签

    div:empty {
    background: #f00;
    }

    四、伪元素选择器

    (1)

    ::after,在王者荣耀之后插入国服韩信,对应的::before,则是在一个元素之前插入内容

     (2)

    ::first-letter,将样式添加到文本的首字母,::first-line,将样式添加到文本首行

     (3)

    ::selection,设置鼠标选中文本时的样式

     end,伪类这部分知识属实琐碎,多加练习,日后必有所成。

  • 相关阅读:
    简单的模板解析函数
    HTML通过事件传递参数到js 二 event
    HTML通过事件传递参数到js一
    通过this获取当前点击选项相关数据
    LeetCode 20. 有效的括号(Valid Parentheses)
    LeetCode 459. 重复的子字符串(Repeated Substring Pattern)
    LeetCode 14. 最长公共前缀(Longest Common Prefix)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    LeetCode 171. Excel表列序号(Excel Sheet Column Number) 22
    LeetCode 665. 非递减数列(Non-decreasing Array)
  • 原文地址:https://www.cnblogs.com/chasesunforever/p/12103879.html
Copyright © 2011-2022 走看看