CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便的获取元素,本文讲解了CSS3的选择器有哪些,希望整理好的CSS3选择器对大家有帮助!谢谢!

6.CSS 3的同级元素通用选择器

选择器

含义

示例

E ~ F

匹配任何在E元素之后的同级F元素

p ~ ul { background:#ff0; }

7.CSS 3 属性选择器

选择器

含义

示例

E[att^=”val”]

属性att的值以”val”开头的元素

div[id^="nav"] { background:#ff0; }

E[att$=”val”]

属性att的值以”val”结尾的元素

E[att*=”val”]

属性att的值包含”val”字符串的元素

8. CSS 3中与用户界面有关的伪类

选择器

含义

示例

E:enabled

匹配表单中激活的元素

input[type="text"]:disabled { background:#ddd;}

E:disabled

匹配表单中禁用的元素

E:checked

匹配表单中被选中的radio(单选框)或checkbox(复选框)元素

E::selection

匹配用户当前选中的元素

9. CSS 3中的结构性伪类

选择器

含义

示例

E:root

匹配文档的根元素,对于HTML文档,就是HTML元素

p:nth-child(3) { color:#f00; }p:nth-child(odd) { color:#f00; }p:nth-child(even) { color:#f00; }p:nth-child(3n+0) { color:#f00; }p:nth-child(3n) { color:#f00; }tr:nth-child(2n+11) { background:#ff0; }tr:nth-last-child(2) { background:#ff0; }p:last-child { background:#ff0; }p:only-child { background:#ff0; }p:empty { background:#ff0; }

E:nth-child(n)

匹配其父元素的第n个子元素,第一个编号为1

E:nth-last-child(n)

匹配其父元素的倒数第n个子元素,第一个编号为1

E:nth-of-type(n)

与:nth-child()作用类似,但是仅匹配使用同种标签的元素

E:nth-last-of-type(n)

与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素

E:last-child

匹配父元素的最后一个子元素,等同于:nth-last-child(1)

E:first-of-type

匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)

E:last-of-type

匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

E:only-child

匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

E:only-of-type

匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

E:empty

匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

10.CSS 3的反选伪类

选择器

含义

示例

E:not(s)

匹配不符合当前选择器的任何元素

:not(p) { border:1px solid #ccc; }

11. CSS 3中的 :target 伪类

选择器

含义

E:target

匹配文档中特定”id”点击后的效果

相关阅读:

CSS 1.0~3.0选择器(中)

CSS 1.0~3.0选择器(上)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cs

顺序表

764
来自专栏听雨堂

简单分页的性能优化

采用网上常见的分页方式,在sqlserver事件分析器中观察,发现 ? 几个主要的sql查询中,耗费最大的是查询所有的记录数。 将其从分页程序中剔除,前后的效果...

1779
来自专栏lestat's blog

一些常用正则表达式

最近用phpspider抓取网页,除了用xpath匹配标签外,偶尔也会用到正则表达式, 这里简单记录一下常用的正则如下: $str=preg_replace("...

2664
来自专栏三丰SanFeng

算法学堂 - 二分查找及其变形

C语言中可以用bsearch()实现二分查找。同qsort()一样,bsearch()也包含在glibc库中,且同样要自定义比较函数。其原型如下: void *...

1936
来自专栏小樱的经验随笔

C/C++中对链表操作的理解&&实例分析

链表概述    链表是一种常见的重要的数据结构。它是动态地进行存储分配的一种结构。它可以根据需要开辟内存单元。链表有一个“头指针”变量,以head表示,它存放...

3064
来自专栏Java后端生活

MySQL(六)DQL之常见函数

2436
来自专栏从流域到海域

Python list(列表)

Python一共有6种序列的内置类型,list和tuple是其中最常见的。6种序列的都可以进行的操作包括索引、切片,加(实际上是连接),乘(实际上是复制)...

1906
来自专栏开发 & 算法杂谈

序列中查找第二小元素

序列中查找第二小元素有很多方法,本文介绍的是采用分治的思想,自底向上,序列中两两构成一对,比较选出最小值,然后构成上一层序列,然后依次网上构造,最后,根节点就是...

663
来自专栏Laoqi's Linux运维专列

元祖+列表

4636
来自专栏salesforce零基础学习

salesforce 零基础学习(六十六)VF页面应善于使用变量和函数(二)常用函数的使用

上一篇介绍VF中常用的变量,此篇主要内容为VF页面可以直接使用的函数,主要包括Date相关函数,Text相关函数,Information相关函数以及logic相...

21010

扫码关注云+社区