• 附录12-伪类选择器

    目录

    1  链接伪类选择器

    1.1  基本使用

    1.2  利用foucs与active做tab栏切换

    2  状态选择器

    2.1 焦点 focus

    2.2  选中 checked

    3  指定第几个子元素选择器 nth-child()与nth-of-type()

    3.1  nth-child(常数)

    3.2  nth-child(公式)

    3.2.1  隔行变色

    3.2.2  前n个

    3.2.3  从第n个开始

    3.3  nth-child(关键字)

    3.4  nth-child()与nth-of-type()的区别

    4  反选 not

    5  伪元素选择器

    伪类就是内容的状态，比如这个

    在我鼠标没放上去的时候，它是这样的

    放上去之后它变色了

    这个用的就是伪类选择器

    伪类选择器包含很多，我们这里先讲链接伪类选择器，伪类选择器用冒号表示，冒号后接伪状态

    伪类选择器都是可以不加前面元素的，一般是当子元素的某些条件用的，我们会在下面的反选中做一个例子

    1  链接伪类选择器

    1.1  基本使用

    链接中我们常使用这四个伪状态

     我们用一下这四个，我们让链接未访问为红色，访问过为紫色，鼠标停在上面为蓝色，按完了不放手为绿色

    • 一定要按照link,visited,hover,activate的顺序来写，不然有的css会不生效

    打开后是这样的

    我把鼠标移动到这是这样的

    按住不放手是这样的

    点完之后是这样的

    链接是有默认样式的，通过body是不能改变链接的样式

    1.2  利用foucs与active做tab栏切换

    打开后是这样的

    点击其中一个链接，链接会有一些样式

    点击另一个链接，另一个链接会有样式且之前的样式取消

    点击除链接外的其他元素(包括空白处)，样式取消

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         a {
    10.             display: inline-block;
    11.             width:50px;
    12.             height:50px;
    13.             line-height: 50px;
    14.             text-align: center;
    15.         }
    16.         a:active,a:focus {
    17.             background-color: #05943c;
    18.             color:#fff
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <a href="javascript:void(0)">1a>
    24.     <a href="javascript:void(0)">2a>
    25.     <a href="javascript:void(0)">3a>
    26.     <a href="javascript:void(0)">4a>
    27. body>
    28. html>

    只能是a标签，如果使用div的话，只有按住状态才算active，把鼠标松开后样式就没了

    2  状态选择器

    2.1 焦点 focus

    用于改变元组获取焦点时的状态，我们用一下

    打开之后是这样的

    现在我们点一下文本框

    当文本框获取到焦点时，它就会变成我们想要的样式

    2.2  选中 checked

    没点之前是这样的

    点了之后是这样的

    再点一下会回到原来的状态

    3  指定第几个子元素选择器 nth-child()与nth-of-type()

    E是我们要设置的元素标签

    其中first-child,last-child,first-of-type,last-of-type使用率极低，一般我们都使用nth-child(n)与nth-of-type(n)代替

    nth-child(n)于nth-of-type(n)都是从1开始数的，不是从0开始数的

    前三个与后三个仅是编号方式不同，我们放到后面说

    3.1  nth-child(常数)

    我们现在想要first_ul中的第3个li变为红色

    3.2  nth-child(公式)

    3.2.1  隔行变色

    我们做一个隔行变色的例子，有8个li，我让它2,4,6,8改变样式

    • 只能是n，不能是别的字母

    3.2.2  前n个

    我们现在筛选出前三个

    3.2.3  从第n个开始

    现在我们让他从第四个开始

    3.3  nth-child(关键字)

    关键字我们一般用even(偶数)与odd(奇数)

    现在我们使用odd，把奇数行背景色变为红色

    3.4  nth-child()与nth-of-type()的区别

    nth-child会把父元素中的所有子元素都给一个序号，nth-of-type只给指定的元素类型一个序号

    我们现在有这样一个html

    如果使用nth-child，那么你无论前面的E变成什么，它的编号都是这样的

    如果使用nth-of-type，且我前面的E是p，那么它的编号就是这样的

    我们现在试一下，首先我们使用nth-child()

    发现没有任何变化，这是因为nth-child()的编号是2，但是编号2是一个div元素，前面给的是p，所以样式不会生效

    现在我们试一下nth-of-type()

    发现这样是可以的，因为nth-of-type只会给指定的元素编号

    4  反选 not

    我们使用:not进行反选，比如我们现在section中有div，span和article三个元素，我现在想对section除div的子元素设置背景颜色，那么我们可以使用not

    :not的括号中可以接任何选择器，比如我现在不想让section的第二个子元素设置背景颜色，那么我们可以这样写

    5  伪元素选择器

    伪元素并支持所有元素，比如input在某些情况下就不支持伪元素

    伪元素选择器可以在css中创建行内元素，从而简化HTML结构

    常用的伪元素选择器有两个，一个是::before，另一个是::after

    • ::before 在元素内部的前面插入内容
    • ::after 在元素内部的后面插入内容

    我们看别人的代码使用伪元素选择器，他们写的是单冒号，单冒号是照顾低版本浏览器的，我们使用单冒号与双冒号都可以

    我们现在有一个盒子

    然后我们加入before

    • content这个属性是必须要有的，如果不想加入内容我们可以写成 content=''

    下面我们再写after

    • content同样必须要有

    由于它是行内元素，所以默认情况下是给不了宽高的，如果想给的话可以将其转变为行内块元素

  • 相关阅读:
    派生属性-架构案例2020（三十七）
    setViaGenMode
    【数据结构与算法】之深入解析“乘法表中第K小的数”的求解思路与算法示例
    多线程 - 定时器
    PaddleNLP学习日记(一）CBLUE医疗文本分类
    [BJDCTF2020]EasySearch
    通过Hbuilder X创建uni-app项目并引入UView
    奇技淫巧第7期
    在微信小程序里引入Vant Weapp组件库详细步骤
    windows查看端口占用和结束端口进程
  • 原文地址：https://blog.csdn.net/potato123232/article/details/126766587