总结了下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之选择器的更多相关文章

  1. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  2. CSS3常用选择器（三）

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  3. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  4. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  5. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  6. CSS3 :nth-child() 选择器

    CSS3 :nth-child() 选择器 代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...

  7. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  8. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  9. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

随机推荐

  1. 黄聪：MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' 解决方法（转）

    转自:http://www.cnblogs.com/susuyu/archive/2013/05/28/3104249.html 环境:linux,mysql5.5.21 错误:Host is blo ...

  2. angular2 的依赖注入

    angular2 的依赖注入包含了太多的内容,其中的一个重点就是注入器,而注入器又非常难理解,今天我们不深入介绍注入器的内容,可以参考官方文档,我们今天来说注入器的层级. 也就是组件获取服务的容器会选 ...

  3. 转-Activity中使用orientation属性讲解及需注意的问题

    http://www.software8.co/wzjs/yidongkaifa/6504.html 今天遇到了一个关于orientation的问题查了点资料记录一下,只有点点滴滴的积累,才能让我们更 ...

  4. laravel判断HTTP请求是否ajax

    if(Request->ajax()){ echo "AJAX"; }else{ echo ＇普通请求＇:}

  5. python第一个hello world注意问题！！

    如果你第一次写python代码,想写一个通常的hello world ,那么你需要注意这个hello world的写法,这和python的版本有直接关系!!! Python 3.x: print('h ...

  6. 更换ubuntu apt-get 源

    为了优化ubuntu软件安装/更新速度,我测试了国内几家apt源的速度,发现北京交大的apt源速度相对最快,然后可以通过以下步骤更新ubuntu源 1) 备份默认的apt源 $ cd /etc/apt ...

  7. [datatable]C# DataTable 如何排序

    DataTable dt = new DataTable(); dt.Columns.Add("ProductID", typeof(string)); dt.Columns.Ad ...

  8. Sqlserver中存储过程，触发器，自定义函数（二）

    Sqlserver中存储过程,触发器,自定义函数: 自定义函数:1.函数类型:2.函数的参数和返回值: 1.函数类型:标量值函数,返回的是一个标量值表值函数:内联表值函数:多语句表值函数. 标量值函数 ...

  9. nyoj 93 汉诺塔(三)

    点击打开链接 汉诺塔(三) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...

  10. sqlite支持的数据库类型

    http://www.sqlite.org/datatype3.html 默认只支持:NULL,INTEGER,REAL,TEXT,BLOB