CSS3之选择器
总结了下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,不能使用其他字符，否则会不能匹配。
CSS3之选择器的更多相关文章
- CSS系列：CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS3常用选择器（三）
在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...
- CSS3 ::selection选择器
一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- CSS3 :nth-child() 选择器
CSS3 :nth-child() 选择器 代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...
- css3属性选择器总结
前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...
- CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...
- 笔记：css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
随机推荐
- MySql语句大全：创建、授权、查询、修改等
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 一.用户创建.权限.删除 1.连接MySQL操作 连接:mysql -h 主机地址 -u 用户 ...
- SpringMVC控制器设值原理分析(ModelAndView的值通过HttpServletRequest直接取到的原因)
@RequestMapping("/userlist.do") public String getUserList(Model model){ HttpServletRequest ...
- Hadoop系统架构
一.Hadoop系统架构图 Hadoop1.0与hadoop2.0架构对比图 YARN架构: ResourceManager –处理客户端请求 –启动/监控ApplicationMaster –监控N ...
- POJ 3311 Hie with the Pie(Floyd+状态压缩DP)
题是看了这位的博客之后理解的,只不过我是又加了点简单的注释. 链接:http://blog.csdn.net/chinaczy/article/details/5890768 我还加了一些注释代码,对 ...
- Ubuntu 12.04.2搭建nfs服务器
1.安装nfs 服务器(192.168.0.1) apt-get install nfs-kernel-server 2.修改nfs配置文件: vim /etc/exports 在exports文件中 ...
- Yii2.0 数据库查询方法
User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User:: ...
- Java多线程之新类库中的构件DelayQueue
DelayQueue 是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走.这种队列是有序的,即队头对象的延迟到期时间最长.注意:不 ...
- oracle跟踪事件（dump）总结
一.Oracle跟踪文件 Oracle跟踪文件分为三种类型,一种是后台报警日志文件,记录数据库在启动.关闭和运行期间后台进程的活动情况,如表空间创建.回滚段创建.某些alter命令.日志切换.错误消息 ...
- Delphi中自画TStatusBar面板中的文字颜色背景以及图片
转自 http://www.delphitop.com/html/kongjian/351.html 首先定义:procedure TStatusForm.FormCreate(Sender: TOb ...
- EXt form属性
配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包 ...