附录12-伪类选择器

Suyuoa

已于 2023-03-22 16:43:40 修改

阅读量1.6k

点赞数 1

分类专栏： CSS3笔记文章标签：前端 html

于 2022-09-08 16:11:34 首次发布

本文链接：https://blog.csdn.net/potato123232/article/details/126766587

版权

CSS3笔记专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1 链接伪类选择器

1.1 基本使用

1.2 利用foucs与active做tab栏切换

2 状态选择器

2.1 焦点 focus

2.2 选中 checked

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

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

4 反选 not

5 伪元素选择器

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

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

放上去之后它变色了

这个用的就是伪类选择器

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

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

1 链接伪类选择器

1.1 基本使用

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

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

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

打开后是这样的

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

按住不放手是这样的

点完之后是这样的

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

1.2 利用foucs与active做tab栏切换

打开后是这样的

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            width:50px;
            height:50px;
            line-height: 50px;
            text-align: center;
        }
        a:active,a:focus {
            background-color: #05943c;
            color:#fff
        }
    </style>
</head>
<body>
    <a href="javascript:void(0)">1</a>
    <a href="javascript:void(0)">2</a>
    <a href="javascript:void(0)">3</a>
    <a href="javascript:void(0)">4</a>
</body>
</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同样必须要有

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

Suyuoa

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
附录12-伪类选择器

伪类就是内容的状态，比如这个在我鼠标没放上去的时候，它是这样的放上去之后它变色了这个用的就是伪类选择器伪类选择器包含很多，我们这里先讲链接伪类选择器，伪类选择器用冒号表示，冒号后接伪状态伪类选择器都是可以不加前面元素的，一般是当子元素的某些条件用的，我们会在下面的反选中做一个例子。
复制链接

扫一扫