CSS 选择器
选择器
- 选择器：帮助你精准的选中想要的元素
简单选择器
-
ID选择器
-
元素选择器
-
类选择器
-
通配符选择器
-
*:选中所有元素
-
属性选择器
-
根据属性名和属性值选中元素
-
伪类选择器
-
选中某些元素的某种状态 书写顺序：
.link：超链接未访问下的状态.visited超链接访问后的状态.hover：鼠标悬停状态.active：激活状态，鼠标按下状态
-
爱恨法则：love hate
选择器的组合
- 并且
- 后代元素——空格
- 子元素—— >
- 相邻兄弟元素—— +
- 兄弟元素—— ~
选择器的并列
- 多个选择器，用逗号分隔
- 语法糖
CSS3新增选择器
- 新增的CSS3选择器有兼容性问题，ie9+才支持
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
<style>
<!-- 必须是input 但是同时具有value这个元素 -->
input[value] {
color: red;
}
</style>
</head>
<body>
<input type="text" value="请输入用户名">
<input type="text" >
</body>
- 利用属性选择器就可以不用借助于类或者id选择器
- E[att] 选择具有att属性的E元素
- E[att="val"] 选择具有att属性且属性值等于val的E元素
- E[att^="val"] 匹配具有att属性且属性值以val开头的E元素
- E[att$="val"] 匹配具有att属性且属性值以val结尾的E元素
- E[att*="val"] 匹配具有att属性且属性值含有val的E元素
结构伪类选择器
更多的伪类选择器
-
:first-child
-
选择第一个子元素（必须是x元素，必须是第一个子元素）
-
first-of-type，选中子元素中第一个指定类型的元素
-
:last-child
-
同first-child
-
:nth-child()
-
选中指定的第几个子元素
-
even:关键字，等同于2n
-
odd:关键字，等同于2n+1
-
:nth-of-type()
-
选中制定的子元素中的第几个某类型的元素
更多的伪元素选择器
-
first-letter
-
选中元素中的第一个字母
-
first-line
-
选中元素中第一行的文字
-
selection
-
选中被用户框选的文字
伪元素选择器
-
伪元素选择器可以帮助我们利用CSS3创建新标签元素，不需要用到HTML标签，从而简化HTML结构
-
：：before在元素内部的前面插入内容 -
：：after在元素内部的后面插入内容 -
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
- 语法：**element::before{}
- before和after必须有content属性
- 伪元素选择器和标签选择器一样，权重为17. 伪元素选择器
-
伪元素选择器可以帮助我们利用CSS3创建新标签元素，不需要用到HTML标签，从而简化HTML结构
-
：：before在元素内部的前面插入内容 -
：：after在元素内部的后面插入内容 -
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
- 语法：**element::before{}
- before和after必须有content属性
- 伪元素选择器和标签选择器一样，权重为1
本文来自博客园，作者：懒惰ing，转载请注明原文链接：https://www.cnblogs.com/landuo629/p/12430369.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？