CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit
- 伪类选择器汇总
伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 - 结构性伪类选择器结构性伪类选择器
它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"
1. 根元素选择器 只作用于html等底部标签.很少用 ..:root
2. 子元素选择器 子元素全选还要更细致ul>li:first-child{ } 增加伪类first-child 第一个
ul>li:last-child{ } 增加伪类last-child 最后一个
ul>li:only-child{ } 增加伪类only-child 那些只有一个的,影响这个独生子
div>p: only-of type{ } 增加伪类only-of-type 选择指定类型的那个子元素, 其实功能和 单单的div>p类似
伪类都需要加上前置选择器来限制范围
3. ul>li:nth-child(2) { } ul下的li 的第二个子元素
ul>li:nth-last-child(2) { } …. 倒数第二个
其他:
- UI伪类选择器
:enable
:disable
html文件
css文件
效果
:checked 勾选的生效
html文件
css文件
将被勾选的隐藏起来
:default 默认的生效, 很少用
css文件
:valid 合法时生效
:invalid 不合法时生效
html文件
css文件
填对了数字, 就变成绿色了.
:required 必填部分生效
optional 不是必填的生效
html文件
css文件
a:link 作用于a 标签间的文本
input:focus
切换文本输入光标, 输入框变了颜色
- 其他伪类选择器
:not 反选 重点掌握
不含baidu的超链接为红色
:empty 作用空标签, 有点像word的替换空格的意思
html文件
替换前
css文件
如果想不影响某些为空的部分,可以指定如
p:empty{ } 那css就只影响p下的空标签
替换后
:lang
:target 页面内定位锚点, 一定位立刻生效
name 或者id 都可以的, 锚点是可以设置在任何标签的, 至于超链接<a href=#锚点名称>只不过是一个超链接,这里直接在浏览器输入#锚点名称效果就是跟按了href之后一样的.
测试的时候, 在最末尾加上"# 锚点名称"
效果(实际上定位锚点更多是在一些很长的页面, 一点就定位到. 而且边成红色了.)
最新文章
- Java MD5机密算法的使用
- Linq的分页与组合查询的配合使用
- 1001. 害死人不偿命的(3n+1)猜想 (15)
- 《python核心编程》笔记——杂项
- @EmbeddedId和@idClass的区别
- 编写Delphi控件属性Stored和Default的理解及应用
- 解决 Virtual Box 启动 Cannot load R0 module supLoadModule returned VERR_LDR_MISMATCH_NATIVE Failed to register ourselves as a PCI Bus (VERR_MODULE_NOT_FOUND)
- UVALive 3211 Now or later(2-SAT,二分,Kosaraju)
- easyui源码翻译1.32--EasyLoader(简单加载)
- 使用FastReport的UserDataSet时候,遇到TfrxMemoView内容过多而打印不全的问题
- canvas的学习
- 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: ";invalid form id hint:
- js数组使用JSON.stringify()和toString()的区别,JSON.parse
- 快速搭建CentOS+ASP.NET Core环境支持WebSocket
- Python Tornado初学笔记之表单与模板(一)
- php |= 什么意思
- 【机器学习_11】基础算法:KNN
- Mysql 中的MVCC原理,undo日志的依赖
- oracle 在C# 中调用oracle的数据库时,出现引用库和当前客户端不兼容的问题解决方案
- Python_day5