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,伪类这部分知识属实琐碎,多加练习,日后必有所成。

  • 相关阅读:
    tar打包如何不打包某一个文件夹(排除某些文件夹)
    第一个SpringBoot应用
    Linux(以RHEL7为例)下添加工作区的方法|| The Way To Add Workspace On Linux
    Linux(以centos7为例)下自动挂载NTFS硬盘
    基于Moodle的IT课程辅助教育平台搭建
    搭建基于python +opencv+Beautifulsoup+Neurolab机器学习平台
    如何利用word2013写图文并茂的博客
    如何安装win10+Red Hat Enterprise Linux双系统?
    课堂练习:ex 4-20
    实验二 函数重载、函数模板、简单类的定义和实现
  • 原文地址:https://www.cnblogs.com/chasesunforever/p/12103879.html
Copyright © 2011-2022 走看看