目录
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栏切换
打开后是这样的
点击其中一个链接，链接会有一些样式
点击另一个链接，另一个链接会有样式且之前的样式取消
点击除链接外的其他元素(包括空白处)，样式取消
<!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同样必须要有
由于它是行内元素，所以默认情况下是给不了宽高的，如果想给的话可以将其转变为行内块元素
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/50717.html