css选择器类型伪类选择器(详)
css选择器有八种:
1、标签选择器(如:body,div,p,ul,li)。
2、.类选择器(如:class="head",class="head_logo") 。
3、ID选择器(如:id="name",id="name_txt")。
4、全局选择器(如:*号)。
5、.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)。
6、.继承选择器(如:div p,注意两选择器用空格键分开)。
7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)。
8、字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 。
其中较为常用的有五种:标签选择器,类选择器,id选择器,属性选择器,伪类选择器
css中提供了很多伪类,一下时伪类&伪类作用:
:active | a:active | 匹配被点击的链接 |
:checked | input:checked | 匹配处于选中状态的 <input> 元素 |
:disabled | input:disabled | 匹配每个被禁用的 <input> 元素 |
:empty | p:empty | 匹配任何没有子元素的 <p> 元素 |
:enabled | input:enabled | 匹配每个已启用的 <input> 元素 |
:first-child | p:first-child | 匹配父元素中的第一个子元素 <p>,<p> 必须是父元素中的第一个子元素 |
:first-of-type | p:first-of-type | 匹配父元素中的第一个 <p> 元素 |
:focus | input:focus | 匹配获得焦点的 <input> 元素 |
:hover | a:hover | 匹配鼠标悬停其上的元素 |
:in-range | input:in-range | 匹配具有指定取值范围的 <input> 元素 |
:invalid | input:invalid | 匹配所有具有无效值的 <input> 元素 |
:lang(language) | p:lang(it) | 匹配每个 lang 属性值以 "it" 开头的 <p> 元素 |
:last-child | p:last-child | 匹配父元素中的最后一个子元素 <p>, <p> 必须是父元素中的最后一个子元素 |
:last-of-type | p:last-of-type | 匹配父元素中的最后一个 <p> 元素 |
:link | a:link | 匹配所有未被访问的链接 |
:not(selector) | :not(p) | 匹配每个非 <p> 元素的元素 |
:nth-child(n) | p:nth-child(2) | 匹配父元素中的第二个子元素 <p> |
:nth-last-child(n) | p:nth-last-child(2) | 匹配父元素的倒数第二个子元素 <p> |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 匹配父元素的倒数第二个子元素 <p> |
:nth-of-type(n) | p:nth-of-type(2) | 匹配父元素的第二个子元素 <p> |
:only-of-type | p:only-of-type | 匹配父元素中唯一的 <p> 元素 |
:only-child | p:only-child | 匹配父元素中唯一的子元素 <p> |
:optional | input:optional | 匹配不带 "required" 属性的 <input> 元素 |
:out-of-range | input:out-of-range | 匹配值在指定范围之外的 <input> 元素 |
:read-only | input:read-only | 匹配指定了 "readonly" 属性的 <input> 元素 |
:read-write | input:read-write | 匹配不带 "readonly" 属性的 <input> 元素 |
:required | input:required | 匹配指定了 "required" 属性的 <input> 元素 |
:root | root | 匹配元素的根元素,在 HTML 中,根元素永远是 HTML |
:target | #news:target | 匹配当前活动的 #news 元素(单击包含该锚名称的 URL) |
:valid | input:valid | 匹配所有具有有效值的 <input> 元素 |
:visited | a:visited | 匹配所有已经访问过的链接 |
其中较为常用的伪类有:
first-child;
last-child;
nth-child;
css选择器类型伪类选择器(详)相关推荐
- css中什么是伪类选择器?伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
- 【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器 伪类选择器根据 ...
- CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位 定位能解决的解决问题: 定位的使用 静态定位 相对定位 绝对定位 绝对定位特点 子绝父相 子绝父相vs子绝父绝 子绝父相案例 子绝父相水平居中案例 子绝父相水平垂直都居中案例 导 ...
- css中什么是伪类选择器?伪类选择器的简介
一.伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
- CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
- CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器 后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变 关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
- CSS :before :after 伪类选择器
CSS :before :after 伪类选择器 所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
- 复合选择器-链接伪类选择器(HTML、CSS)
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
- CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器 建立在基础选择器上,对基本选择器进行组合形成的 可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器 一.后代选择器 又称为包含选择器,可以选 ...
最新文章
- Sqlserver中查询存储过程是否包含某些文本
- Programming Computer Vision with Python (学习笔记十二) 1
- bzoj2286 [Sdoi2011]消耗战 单调栈+lca
- 对于Python中回调函数的理解
- git 设置和取消代理
- 渗透测试技术----服务扫描(一)--Banner、服务版本扫描、操作系统识别
- 残暴啊,HR 智库联盟,难道真是打工人的噩梦?
- 点击复选框添加或删除value值到input输入框中
- 大创会议议程2021-10-17
- 设计模式入门--发布订阅模式
- 选择unity还是unreal4
- Cocos2d之Box2d基础知识
- [抖音电商] 抖音电商新学员必看基础课,抖音新手必看运营教程(价值3980)
- Laravel 邮件发送
- 完蛋!面试官问我 InnoDB 的物理存储结构!
- 从内积、外积和叉乘到多维空间的理解
- HashMap 之元素删除
- webrtc代码走读:发送端NACK和FEC的packet压到队列走读
- 网易云课堂Python数据分析实战前两章(跟小蚊子老师学数据分析)
- PyQt5 QDockWidget