css常用伪类

最新推荐文章于 2024-10-06 15:03:22 发布
最新推荐文章于 2024-10-06 15:03:22 发布
阅读量1.5k 收藏 13
点赞数 4
分类专栏： css 文章标签： css伪类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42238554/article/details/89634207
版权

伪类使用单冒号比如：
:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
伪元素用双冒号表示：
::first-letter, ::first-line, ::before, ::after

css中符号应用

“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解
(1)“~”（波浪号用法
例如：
p~span
表示选择p标签之后的所有span标签，但是p和span必须是同一个父级
例如：

<div>
<span>我是1sp</span>
<p>我是p</p>
<em>我是em</em>
<span>我是2span</span>
<span>我是3span</span>
<div>我是div<span>我是div中的sp</span></div>
<i>我是i啊</i>
<span>我是4pan</span>
</div>
<style>
p~span{
color: red;
}
</style>

在这里插入图片描述
(2)“，”（逗号）用法

(3)“+”（加号）
表示相邻兄弟选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
例如：
span + p
就是选择span标签后必须紧跟p标签，而且span和p必须有相同的父级
实例：

<div>
<span class="sp1">我是1sp</span>
<p>我是p</p>
<em>我是em</em>
<p>我是p</p>
</div>
<style>
.sp1 + p{
color: red;
}
</style>

在这里插入图片描述
h1 + p {margin-top:50px;}
这个选择器读作：
“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
(4)“>”（大于号）
例如：
div>span表示选择div中第一代span
实例：

<div class="divmain">
<span>我是1sp</span>
<p>我是p</p>
<em>我是em</em>
<span>我是2span</span>
<span>我是3span</span>
<div>我是div<span>我是div中的sp</span></div>
<i>我是i啊</i>
<span>我是4pan</span>
</div>
<style>
.divmain > span{
color: red;
}
</style>

在这里插入图片描述

:before

:before 选择器向选定的元素前插入内容。
使用content 属性来指定要插入的内容。
它的显示内容是其自身的content属性，默认是内联元素。

例如：在P标签中内容之前加入一行文字

<p>我是p元素</p>
<style>
p:before
{
content: "hello world!";
}
</style>

在这里插入图片描述

:after

:after 选择器向选定的元素之后插入内容。
使用content 属性来指定要插入的内容。
例如：在P标签中内容之后加入一行文字

<p>我是p元素</p>
<style>
p:after
{
content: "hello world!";
}
</style>

在这里插入图片描述

before和after

注：伪类元素我们用js取不到它们，也不会触发点击事件,before和after虽然不能设置事件，但还会捕捉用户事件，并把事件”冒泡“到伪元素上，之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。
document不能获取到::after和::before所对应的节点对象，但是可以通过css的接口获取其样式属性，如：

window.getComputedStyle(
document.querySelector(‘li’), ‘:before’
)

:before和::before，:after和::after
相同点：
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
不同点：
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
注：
伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活

用于链接的几个伪类元素

:link

用这个可以设置未被访问的链接的样式

:visited

用这个设置已经被访问的链接的样式

:hover

用于设置将鼠标悬浮在链接上的样式

:active

用于设置鼠标点击链接时到鼠标松开时的样式

实例：

a:link{
  color:red;
}
a:visited{
  color: green;
}
a:hover{
  color: pink;
}
a:active{
  color: blue;
}

在这里插入图片描述

:focus

用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）
例如：

<input type="text" class="myinput">
<style>
.myinput{
  width: 150px;
  height: 30px;
  border: 1px solid #ddd;
  font-size: 18px;
  line-height: 30px;
  color: #666;
  outline: none;
}
.myinput:focus
{
  color: red;
  border: 2px solid red;
}
</style>

在这里插入图片描述

:first-letter

例如：
p:first-letter
选择每个

元素的第一个字母

:first-line

实例：
p:first-line
选择每个

元素的第一行

2.常用列表元素的几个伪类

:first-child

选择父元素的第一个子元素。
例如，查找ul中第一个li元素：

<ul class="myul">
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>
<style>
.myul li:first-child
{
  color: red;
}
</style>

在这里插入图片描述

:last-child

选中列表中的最后一个元素
:last-child选择器用来匹配父元素中最后一个子元素。提示: p:last-child等同于p:nth-last-child(1)。
例如，查找ul中最后一个元素：

<ul class="myul">
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>
<style>
.myul li:last-child
{
  color: red;
}
</style>

:lang

使你有能力为不同的语言定义特殊的规则
实例，在Python单词前后加一个^符号：

 <p>在最新一期榜单上，<q lang="haha">Python</q>的份额高达26.42％</p>
 <style>
q:lang(haha)
{
  quotes: "^" "^";
}
</style>

在这里插入图片描述

:nth-child()选择器

定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
例如,选择ul中的第二个li元素：

<ul class="myul">
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>
<style>
.myul li:nth-child(2)
{
color: red;
}
</style>

odd表示奇数，even表示偶数
根据奇数和偶数来指定不同的颜色，例如，让ul中，奇数行的li颜色显示为红色，偶数行的li显示为绿色。

<style>
.myul li:nth-child(odd)
{
color: red;
}
.myul li:nth-child(even)
{
color: green;
}
</style>

在这里插入图片描述
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

p:nth-child(3n+0)
{
    background:#ff0000;
}

例如：
p:nth-child(2n)，表示2,4,6,8…
p:nth-child(3n)，表示3,6,9,12…

:nth-last-child(n)

实例：
p:nth-last-child(2)
选择所有p元素倒数的第二个子元素

:not()元素的使用

表示不包含某个选择器，例如：设置不包含类名为.myli的li元素样式。

  <li>我是列表1</li>
  <li class="myli">我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
  <style>
li:not(.myli)
{
  color: red;
}
</style>

设置不包含.myli的li元素。
在这里插入图片描述

:checked

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
实例：

input:checked {
    height: 50px;
    width: 50px;
}

:disabled

:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。
例如，为被禁用的按钮添加一个背景色：

<input type="input" value="没有被禁用">
<input type="input" disabled value="被禁用了">
<style>
input:disabled
{
  background-color: #eee;
}
</style>

在这里插入图片描述
还可以设置类型为text的input被禁用。

input[type="text"]:disabled
{
background:#dddddd;
}

:enabled

:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。
例如：

<input type="text" disabled>
<input type="text">
    <style>
input:enabled
{
  background-color: red;
}
</style>

:read-only

选择只读属性的元素属性

:read-write

选择没有只读属性的元素属性

:required

选择有"required"属性指定的元素属性

:root

选择文档的根元素

target

选择当前活动#news元素(点击URL包含锚的名字)

:empty

:empty选择器选择每个没有任何子级的元素（包括文本节点）。
实例：

 <ul style="width:200px;">
      <li>我是一行</li>
      <li></li>
      <li>我是三行</li>
      <li></li>
      <li></li>
    </ul>
    <style>
li:empty
{
  background-color: pink;
}
</style>

在这里插入图片描述

:first-of-type

选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
实例：

<div class="divmain">
  <em>我是em</em>
  <p>我是第一个p</p>
  <p>我是第二个p</p>
  <span>我是span</span>
  <p>我是第三个p</p>
  <ul><li>我是li</li></ul>
</div>

<style>
/*先找p标签，然后找p标签的父标签下面的第一个p标签*/
p:first-of-type
{
  color: red;
}
</style>

在这里插入图片描述

:last-of-type

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
原理同上。

:nth-last-of-type(n)

p:nth-last-of-type(2)
选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n)

p:nth-of-type(2)
选择所有p元素第二个为p的子元素

:only-of-type

p:only-of-type
选择所有仅有一个子元素为p的元素

:only-child

p:only-child
选择所有仅有一个子元素的p元素

:in-range

:in-range 选择器用于标签的值在指定区间值时显示的样式。
注意： :in-range 选择器只作用于能指定区间值的元素，例如== input 元素中的 min 和 max 属性==。
例如,当文本框输入的数值在5到10之间时会用特殊样式显示：

请输入数值：
<input type="number" min="5" max="10" value="0">
<style>
input
{
  font-size: 20px;
  outline: none;
  height: 30px;
  line-height: 30px;
  width: 220px;
  border: 1px solid #ddd;
}
input:in-range
{
  color: green;
  border: 2px solid green;
}
</style>

在这里插入图片描述

:out-of-range

例如：
input:out-of-range选择指定范围以外的值的元素属性

:invalid

:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。
如下例子：一个文本输入框最小值为3，最大值为5，当超出范围时用特殊样式：

<input type="number" min="3" max="5" class="myinput">
<style>
.myinput
{
  font-size: 20px;
  outline: none;
  height: 30px;
  line-height: 30px;
  width: 220px;
  border: 1px solid #ddd;
}
.myinput:invalid
{
  color: red;
  border: 2px solid red;
}
</style>

在这里插入图片描述

:valid

选择所有有效值的属性

CSS 伪类
weixin_43535265的博客
03-10 623
伪类用于定义元素的特殊状态。 例如，它可以用于： 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 等等 伪类的语法： selector:pseudo-class { property: value; } 1. 锚伪类 链接能够以不同的方式显示： /* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:ho
Emmet语法与CSS结构伪类详细介绍
最新发布
10-09
同时介绍了各种常用的结构伪类选择符，比如:nth-child, :nth-last-child, :nth-of-type等的应用场景，并对它们的不同之处做出对比解说。 适合作为基础知识点的学习材料用于Web前端新手，或是希望掌握Emmet快捷编码...
css中常用的伪类
dongciqiu0026的博客
03-27 199
　　div:first-child 表示第一个div，代码如下 　　 <html> <head> <title></title> </head> <style> *{ margin:0; padding:0; ...
CSS伪类
2401_82561004的博客
10-06 986
伪类是 W3C制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。伪类的名称不区分大小写，但需要以冒号开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：其中 selector 为选择器名称，pseudo-class 为伪类的名称。元素。
CSS常用伪类
潇潇暮雨、的博客
08-27 244
:link 选择所有未访问的链接 :visited 选择所有访问过的链接 :active 选择正在活动的链接（或理解为鼠标点击瞬间效果） :hover 鼠标放到链接后的状态 :focus 选择元素输入后具有焦点 :before 在元素之前插入内容 :after 在元素之后插入内容 伪类可以看成选中元素为基准点，此元素的一些状态或者属性 ...
css伪类
toStudy_的博客
09-14 338
伪类的一些用法
CSS3实现伪类hover离开时平滑过渡效果示例
12-13
`:hover`是CSS3中一个非常常用的伪类，它用于在用户将鼠标悬停在某个元素上时应用特定的样式。例如，下面的代码会在鼠标悬停在div元素上时，将其缩放为原始尺寸的两倍，并且在1秒内平滑过渡： ```css div:hover { ...
css3 伪元素和伪类选择器详解
01-19
常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`  提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a...
四种css 伪类选择器
09-25
CSS伪类选择器是CSS中一种特殊的选择器，它们用来定义元素的特殊状态，如元素被访问过的状态、鼠标悬停的状态、内容的特定部分等等。它们允许开发者在没有额外的类或ID的情况下，为元素的某个状态定义样式，从而增强...
CSS 常用伪类
OriginalMIxss的博客
07-19 313
概念 伪类可以通过声明在CSS中与HTML页面的标签或者CSS类进行结合，定义元素的特殊状态。 1 实现访问相关功能 :link 表示未访问时的样式 a:link { color: #FF0000; } :visited表示已被访问后的样式 /* 已访问的链接 */ a:visited { color: #00FF00; } :hover表示鼠标悬停时候的样式 /* 鼠标悬停链接 */ a:hover { color: #FF00FF; } /* x悬停后展示的链接 */ div:hov
CSS—常见伪类
m0_37616866的博客
08-10 452
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*先找到.parent下面的第二个子元素,在判断它是不是p*/ .parent p:nth-child(2){ color: red; } /*先找到.parent下面从后往前数的第二个子元素,在判断它是不是p*/
java伪类_CSS 伪类
weixin_29002935的博客
02-28 206
CSS 伪类(Pseudo-classes)CSS伪类是用来添加一些选择器的特殊效果。语法伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}anchor伪类在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示实例a:link{colo...
css超链接伪类知识点
05-11
CSS超链接伪类主要用于改变超链接在不同状态下的样式，常用的伪类有以下几个： 1. :link：表示普通的、未访问的链接状态。 2. :visited：表示已访问的链接状态。 3. :hover：表示鼠标悬停在链接上时的状态。 4. :...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值