CSS3之选择器
2024-10-17 20:33:52
总结了下CSS3新增的一些选择器。
CSS3的选择器有基本选择器、属性选择器、伪类选择器几类。
选择器 | 举例 | 例子描述 |
element1~element2 | p~a | 选择前面有 <p> 元素的每个 <a> 元素。 |
[attrtube^=value] | a[src^="http"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
[attrtube$=value] | a[src$=".pdf"] | 选择其 src 属性值以 ".pdf" 结尾的每个 <a> 元素。 |
[attrtube*=value] | a[src*="abc"] | 选择其 src 属性值包含 "abc" 的每个 <a> 元素。 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
:only-of-type | p:only-of-type | 选择属于其父元素的唯一 <p> 元素的每个 <p> 元素。 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个元素开始计算 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,从最后一个元素开始计算 |
:last-child | p:last-child | 选择其父元素的最后元素的每个 <p> 元素。 |
:root | :root | 选择文档的根元素 |
:empty | p:empty | 选择没有子元素的每个p元素(包括文本节点) |
:target | #news:target | 选择活动的#news元素 |
:not(selector) | :not(p) | 选择非p的每个元素 |
::selection | ::selection | 选择被用户选取的元素部分 |
:enabled | input:enabled | 选择可用的input元素 |
:disabled | input:disabled | 选择禁用的input元素 |
:checked | input:checked | 选择选中的input元素 |
其实对于这些选择器是再熟悉不过了。列举了其中一些选择器的例子:
nth-child(n)
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html>
其中odd 和even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
另外一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2n+1)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
</body>
</html>
注意这里的字母n只能是n,不能使用其他字符,否则会不能匹配。
最新文章
- 详解:基于WEB API实现批量文件由一个服务器同步快速传输到其它多个服务器功能
- xxxxxxxx
- 原创jquery插件treeTable(转)
- Linux系统布置java项目
- delete all untracked files
- CSS 清除浮动的四种方法
- 简单的form表单操作(Servlet)
- 手机端js实现滑块推动
- uva_1422 Processor
- 【BZOJ1050】【枚举+并查集】旅行comf
- unity中的[xxxxxx]特性(Attributes)
- 高级UNIX环境编程2
- PAT乙级1002. 写出这个数 (20)
- ViewPager基础入门
- Linux中main是如何执行的
- 关于RDLC报表打印预览界面显示页码问号的问题
- vue_全局注册过滤器
- js 获取随机数 Math.random()
- MySQL-mysql 8.0.12安装教程
- 冲刺Two之站立会议10
热门文章
- 单源最短路径——dijkstra算法
- Linux 下 MySQL 的彻底卸载和安装配置字符集
- EditPlus去行号/行标
- java: org.luaj.vm2.LuaError:XXX module not found lua脚本初始化出错
- [Python] UTF-8最好不要带BOM
- MySQL作业
- java多线程之AtomicInteger
- 格式化日期的js(正则魅力)
- mysql处理上百万条的数据库如何优化语句来提高处理查询效率
- rails4.2.6配置发送邮件