css3新增选择器使用--小技巧
发布日期:2021-06-30 11:49:00
浏览次数:2
分类:技术文章
本文共 2385 字,大约阅读时间需要 7 分钟。
css2中的属性选择器: element[attr]{ } 指定了属性名,但没有指定属性值得element元素 element[attr=value]{ } 指定了属性名,并且指定了属性值为value的element元素 element[attr~=value]{ } 指定了属性名,并且属性值可以为词列表中的包含指定属性值value的element元素css3中的属性选择器: element[attr^=value]{ } 指定了属性名,并且属性值以value开头的element元素 element[attr$=value]{ } 指定了属性名,并且属性值以value结尾的element元素 element[attr*=value]{ } 指定了属性名,并且属性值中包含value的element元素
title id="ti3"
box1 id="box"box2 class="box"box3 class="box3"box4 id="box4"box5 box box5box6 bo box box6box7 bo box7 boxbox8 bo box8 bx
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
a:active | 选择活动的链接。 | |
input:checked | 选择每个被选中的 <input> 元素。 | |
input:disabled | 选择每个被禁用的 <input> 元素。 | |
p:empty | 选择没有子元素的每个 <p> 元素。 | |
input:enabled | 选择每个已启用的 <input> 元素。 | |
p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 | |
p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 | |
input:focus | 选择获得焦点的 <input> 元素。 | |
a:hover | 选择鼠标悬停其上的链接。 | |
input:in-range | 选择具有指定范围内的值的 <input> 元素。 | |
input:invalid | 选择所有具有无效值的 <input> 元素。 | |
p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 | |
p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 | |
p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 | |
a:link | 选择所有未被访问的链接。 | |
:not(p) | 选择每个非 <p> 元素的元素。 | |
p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 | |
p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。 | |
p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数 | |
p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 | |
p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 | |
p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 | |
input:optional | 选择不带 "required" 属性的 <input> 元素。 | |
input:out-of-range | 选择值在指定范围之外的 <input> 元素。 | |
input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 | |
input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 | |
input:required | 选择指定了 "required" 属性的 <input> 元素。 | |
root | 选择元素的根元素。 | |
#news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 | |
input:valid | 选择所有具有有效值的 <input> 元素。 | |
a:visited | 选择所有已访问的链接。 |
CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
p::after | 在每个 <p> 元素之后插入内容。 | |
p::before | 在每个 <p> 元素之前插入内容。 | |
p::first-letter | 选择每个 <p> 元素的首字母。 | |
p::first-line | 选择每个 <p> 元素的首行。 | |
p::selection | 选择用户选择的元素部分。 |
CSS 属性选择器
选择器 | 例子 | 例子描述 |
---|---|---|
[target] | 选择带有 target 属性的所有元素。 | |
[target=_blank] | 选择带有 target="_blank" 属性的所有元素。 | |
[title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 | |
[lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 | |
a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 | |
a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 | |
a[href*="w3school"] | 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。 |
第1种
第2种
第3种
第4种
第5种
第6种
第7种
转载地址:https://jackiehao.blog.csdn.net/article/details/104554716 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月13日 17时37分14秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Oracle数据库命令
2019-04-30
plsql
2019-04-30
有限状态机FSM
2019-04-30
Win10 Docker
2019-04-30
Python绘制动画并保存为gif/mp4 (matplotlib)
2019-04-30
PRM概率路线图
2019-04-30
ROS(六)——订阅者Subscriber的编程实现(C++ & Python)
2019-04-30
ROS(七)——话题消息的定义与使用
2019-04-30
yolov3入门实战
2019-04-30
B树 & B+树
2019-04-30
Node-Red(一)——简介与安装
2019-04-30
representation learning 表示学习/表征学习
2019-04-30
Haar特征
2019-04-30
Python 之 histogram直方图
2019-04-30
Python 之 Scatter散点图
2019-04-30
Python实现决策树 Desision Tree & 可视化
2019-04-30
决策树 Decision tree
2019-04-30
nominal和ordinal & 数据处理中四种基本数据类型
2019-04-30
Python 实现 Cross-validation
2019-04-30