css3伪类选择器使用总结

最新推荐文章于 2022-11-02 23:34:40 发布
最新推荐文章于 2022-11-02 23:34:40 发布
阅读量7.5k 收藏 9
点赞数 1
分类专栏： CSS&CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOONCOM/article/details/53888746
版权

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器

备注：为了更好的区分伪类和伪元素，书写上CSS做了区分。例如，伪类 :first-child；伪元素 ::after

大部分伪类选择器如下图所示




:root返回<html>


在下面的示例中：
div > p:only-child{
    color:red;             //不变红
}
div > p:only-of-type{
    color:red;             //变红
}
<div>
   <p>test1</p>
   <span>test2</span>
</div>


ul > li:nth-child(2){
    color:red;           //选择该元素所有子元素的第二个子元素
}
ul > li:nth-last-child(2){
    color:red;           //选择该元素所有子元素的倒数第二个子元素
}
ul > li:nth-of-type(2){
    color:red;           //选择该元素所有该类型子元素的第二个子元素
}
ul > li:nth-last-of-type(2){
    color:red;           //选择该元素所有该类型子元素的倒数第二个子元素
}


:target{
    color:red;           //定位到锚点，选择此元素
}
//锚点的定位：
首先在HTML元素中定义一个ID属性值，例如<p id="test">asd</p>
然后在浏览器地址栏，在URL最后加上#test，便可以定位到该锚点了。
锚点的使用：
可以用来将一篇很长的文章分段，
eg.<a href="#02">跳转到</a>
<p id="02">……</p>
其实锚点只需name就可以可，加id是为了让它兼容性更好


所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

浏览器兼容性：

E:hover                 支持firefox、safari、Opera、ie8、chrome            ------------
E:active                 支持firefox、safari、Opera、chrome                      不支持ie8
E:focus                 支持firefox、safari、Opera、ie8、chrome            -------------
E:enabled             支持firefox、safari、Opera、chrome                    不支持ie8
E:disabled            支持firefox、safari、Opera、chrome                    不支持ie8
E:read-only          支持firefox、Opera                             不支持ie8、safari、chrome
E:read-write         支持firefox、Opera                             不支持ie8、safari、chrome
E:checked           支持firefox、safari、Opera、chrome                    不支持ie8
E::selection           支持firefox、safari、Opera、chrome                  不支持ie8
E:default              只支持firefox                                                          ------------
E:indeterminate    只支持chrome                                                      ------------
E:invalid               支持firefox、safari、Opera、chrome                 不支持ie8
E:valid                  支持firefox、safari、Opera、chrome                  不支持ie8
E:required            支持firefox、safari、Opera、chrome                  不支持ie8
E:optional             支持firefox、safari、Opera、chrome                 不支持ie8
E:in-range            支持firefox、safari、Opera、chrome                 不支持ie8
E:out-of-rang        支持firefox、safari、Opera、chrome                 不支持ie8
下面就其使用做详细的说明;

1、选择器E:hover、E:active和E:focus
  1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
 使用方法：
 <元素>:hover{
 CSS样式
 }
 我们可以在“<元素>”中添加元素的type属性。
 例：
 input[type="text"]:hover{
 CSS样式
 }
 2)、E:active选择器被用来指定元素被激活时使用的样式
 3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

例如：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>选择器E:hover、E:active和E:focus</title>  
  6.     <style>  
  7.         input[type="text"]:hover{  
  8.             background: green;  
  9.         }  
  10.         input[type="text"]:focus{  
  11.             background: #ff6600;  
  12.             color: #fff;  
  13.         }  
  14.         input[type="text"]:active{  
  15.             background: blue;  
  16.         }  
  17.         input[type="password"]:hover{  
  18.             background: red;  
  19.         }  
  20.     </style>  
  21. </head>  
  22. <body>  
  23. <h1>选择器E:hover、E:active和E:focus</h1>  
  24. <form>  
  25.     姓名：<input type="text" placeholder="请输入姓名">  
  26.     <br/>  
  27.     <br/>  
  28.     密码：<input type="password" placeholder="请输入密码">  
  29. </form>  
  30. </body>  
  31. </html>  
2、E:enabled伪类选择器与E:disabled伪类选择器
 1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
 2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

例如：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>E:enabled伪类选择器与E:disabled伪类选择器</title>  
  6.     <style>  
  7.         input[type="text"]:enabled{  
  8.             background: green;  
  9.             color: #ffffff;  
  10.         }  
  11.         input[type="text"]:disabled{  
  12.             background: #727272;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>  
  18. <form>  
  19.     姓名：<input type="text" placeholder="请输入姓名" disabled>  
  20.     <br/>  
  21.     <br/>  
  22.     学校：<input type="text" placeholder="请输入学校">  
  23. </form>  
  24. </body>  
  25. </html>  
3、E:read-only伪类选择器与E:read-write伪类选择器
 1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
 2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>read-only伪类选择器与E:read-write伪类选择器</title>  
  6.     <style>  
  7.         input[type="text"]:read-only{  
  8.             background: #000;  
  9.             color: green;  
  10.         }  
  11.         input[type="text"]:read-write{  
  12.             color: #ff6600;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <h1>read-only伪类选择器与E:read-write伪类选择器</h1>  
  18. <form>  
  19.     姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>  
  20.     <br/>  
  21.     <br/>  
  22.     学校：<input type="text" placeholder="请输入学校">  
  23. </form>  
  24. </body>  
  25. </html>  
4、伪类选择器E:checked、E:default和indeterminate
 1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
 2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
 3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>checked伪类选择器</title>  
  6.     <style>  
  7.         input[type="checkbox"]:checked{  
  8.             outline: 2px solid green;  
  9.         }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13. <h1>checked伪类选择器</h1>  
  14. <form>  
  15.     房屋状态：  
  16.     <input type="checkbox">水  
  17.     <input type="checkbox">电  
  18.     <input type="checkbox">天然气  
  19.     <input type="checkbox">宽带  
  20. </form>  
  21. </body>  
  22. </html>  
默认的选择项

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>default伪类选择器</title>  
  6.     <style>  
  7.         input[type="checkbox"]:default{  
  8.             outline: 2px solid green;  
  9.         }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13. <h1>default伪类选择器</h1>  
  14. <form>  
  15.     房屋状态：  
  16.     <input type="checkbox" checked>水  
  17.     <input type="checkbox">电  
  18.     <input type="checkbox">天然气  
  19.     <input type="checkbox">宽带  
  20. </form>  
  21. </body>  
  22. </html>  
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>indeterminate伪类选择器</title>  
  6.     <style>  
  7.         input[type="radio"]:indeterminate{  
  8.             outline: 2px solid green;  
  9.         }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13. <h1>indeterminate伪类选择器</h1>  
  14. <form>  
  15.     性别：  
  16.     <input type="radio">男  
  17.     <input type="radio">女  
  18. </form>  
  19. </body>  
  20. </html>  
5、伪类选择器E::selection
 1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。

例如

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>伪类选择器E::selection</title>  
  6.     <style>  
  7.         ::selection{  
  8.             background: green;  
  9.             color: #ffffff;  
  10.         }  
  11.         input[type="text"]::selection{  
  12.             background: #ff6600;  
  13.             color: #ffffff;  
  14.         }  
  15.     </style>  
  16. </head>  
  17. <body>  
  18. <h1>伪类选择器E::selection</h1>  
  19. <p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>  
  20. <input type="text" placeholder="文本">  
  21. </body>  
  22. </html>  

6、E:invalid伪类选择器与E:valid伪类选择器
 1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
 2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

例如

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>E:invalid伪类选择器与E:valid伪类选择器</title>  
  6.     <style>  
  7.         input[type="email"]:invalid{  
  8.             color: red;  
  9.         }  
  10.         input[type="email"]:valid{  
  11.             color: green;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16. <h1>E:invalid伪类选择器与E:valid伪类选择器</h1>  
  17. <form>  
  18.     <input type="email" placeholder="请输入邮箱">  
  19. </form>  
  20. </body>  
  21. </html>  

7、E:required伪类选择器与E:optional伪类选择器
 1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
 2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>E:required伪类选择器与E:optional伪类选择器</title>  
  6.     <style>  
  7.     input[type="text"]:required{  
  8.         background: red;  
  9.         color: #ffffff;  
  10.     }  
  11.         input[type="text"]:optional{  
  12.             background: green;  
  13.             color: #ffffff;  
  14.         }  
  15.     </style>  
  16. </head>  
  17. <body>  
  18. <h1>E:required伪类选择器与E:optional伪类选择器</h1>  
  19. <form>  
  20.     姓名：<input type="text" placeholder="请输入姓名" required>  
  21.     <br/>  
  22.     <br/>  
  23.     学校：<input type="text" placeholder="请输入学校">  
  24. </form>  
  25. </body>  
  26. </html>  

8、E:in-range伪类选择器与E:out-of-range伪类选择器
 1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
 2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

例如

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>  
  6.     <style>  
  7.         input[type="number"]:in-range{  
  8.             color: #ffffff;  
  9.             background: green;  
  10.   
  11.         }  
  12.         input[type="number"]:out-of-range{  
  13.             background: red;  
  14.             color: #ffffff;  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19. <h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>  
  20. <input type="number" min="0" max="100" value="0">  
  21. </body>  
  22. </html>  
霜月枫桥
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
css3之UI元素状态伪类选择器
winson的专栏
09-21 6394
所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！ 浏览器兼容性： E:hover                支持firefox、safari、Opera、ie8、chrome     E:active                 支持firefox、safari、Opera、chrome                      不支持ie8
纯css3 select,CSS3 纯CSS跨浏览器SELECT选择框自定义设计
weixin_34082139的博客
08-03 336
CSS语言：CSSSCSS确定.select {position: relative;height: 47.5px;background: white;box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);}.select:after {content: '';position: absolute;top: 0;width: 0;height: 0;right: 10px...
图解CSS选择器状态伪类
syzdev的博客
03-30 1038
1 本文简介 在CSS伪类中，主要分为操作状态伪类、选择器状态伪类和表单状态伪类几种，本文要介绍的选择器状态伪类在规范中大概有十几种，本文仅介绍常见的类型，即与type有关的选择器状态伪类和与child有关的选择器状态伪类两种。 2 选择器状态伪类 2.1 type相关 element:first-of-type：选择父元素下的第一个类型为element的元素。如下面例子中span:first-of-type会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的第一个s
Css伪类选择器之状态伪类、目标伪类篇
路虽远，行则必至！
04-27 1343
伪类选择器 四、状态伪类       状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，因此吸引了广大用户的关注。UI是User Interface（用户界面）的缩写，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。 CSS3新定义了3种常用的UI状态伪类选择器。简单说明如下： :enabl...
项目实训 - Scene-UI - 编写select
qq_45785407的博客
05-23 908
选择器 HTML原生的select组件虽然功能尚可，但是缺乏扩展与美化的方法，因此需要自己使用其他基本组件组合一个Select组件出来，本篇记录自己完成select组件的全过程，分为单选与多选两个模块： 单选 定义select的props如下： import { isString, isBooleanArray } from "../../core/utils/typeAssert" export const selectProps = { modelValue:{//选择器绑定的值
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
CSS中的选择器种类总结及效率比较
09-24
主要介绍了CSS中的选择器种类总结及效率比较,包括伪类选择器和伪元素选择器等,需要的朋友可以参考下
HTML5&CSS3网页制作：伪元素选择器.pptx
06-01
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
HTML5&CSS3网页制作：链接伪类.pptx
05-31
CSS3选择器--链接伪类 链接伪类 01 链接伪类 定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 a:link a:visited a:hover a:active 链接伪类 ...
纯CSS3表单SELECT下拉列表
07-09
纯CSS3表单SELECT下拉列表效果，可以在苹果，安卓使用，比安卓默认下拉列表好看多了
html5+css3 select
03-04
html5+css3设计的select绚丽样式！
CSS3 中关于 select 下拉列表的样式
Larry的博客
03-24 5818
http://www.oschina.net/code/snippet_12_46548 代码片段(2)[全屏查看所有代码] 1. [图片] Styling_SELECT.jpg     2. [代码]test.html      ? 1 2 3 4 5 6 7 8 9
记一个safari兼容性问题
木豪末的博客
10-20 768
1.问题代码 :not(.el-dialog__body .el-form-item--small.el-form-item){ margin-bottom:22px max-width: 360px; } 2.问题描述 这段我本来只是想修改除了.el-dialog__body下的所有.el-form-item--small.el-form-item的样式，这段代码在谷歌浏览器上是没有问题的，结果到了safari浏览器上它直接修改了所有div的样式 3.总结 :not伪类在safar
Safari浏览器不支持……
穆雄雄的博客
01-07 1928
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂前言现在是2022年1月7日16:19:38,前几天用publiccms改了个网站，因为客户那边各种机型都有（各PC端的分辨率也都不一样）...
css伪类选择器
qq_51099065的博客
08-25 330
伪类选择器
css3 select 美化
u013018357的博客
02-04 8607
主要针对右边的箭头进行优化，因为不同的浏览器默认的右边的箭头不一样，但是ie9不支持 appearance:none;，所以ie9以及以下版本就用js写一下，不优化，使用默认的样式 html页面代码：<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>c
CSS常用伪类选择器详解
qq_43293207的博客
03-24 8599
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS伪类选择器详细讲解
热门推荐
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
css伪类实现奇数不同样式
最新发布
09-01
在CSS中，我们可以使用伪类来实现对奇数元素应用不同的样式...总结起来，通过使用CSS的伪类选择器 ":nth-child(odd)" 来选择奇数位置的元素，并为这些元素定义不同的样式属性，就可以实现奇数元素具有不同样式的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值