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 条评论
登录 后参与评论

相关文章

来自专栏苍云横渡学习笔记

【慕课-数据结构-C++语言】树篇

【本文目录】 树的定义 相关术语 用数组表示二叉树 用链表表示二叉树 节点的定义与方法 树的定义与方法 ---- 树的定义 树(tree)是包含n(n>0)个结...

2717
来自专栏苍云横渡学习笔记

【慕课-数据结构-C++语言】树篇

原文地址:https://www.cloudcrossing.xyz/post/31/

3872
来自专栏前端知识分享

第73天:jQuery基本动画总结

var btn = document.getElementById(“bt n”);

291
来自专栏HTML5学堂

CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介...

2613
来自专栏九彩拼盘的叨叨叨

jQuery 写法示例

652
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

3429
来自专栏技术博客

设计模式之九(模版方法模式)

模版方法模式:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中。模版方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。

362
来自专栏进击的君君的前端之路

CSS选择器知识点整理

1345
来自专栏zaking's

CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

26310
来自专栏Python

jQuery基础

一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。...

1956

扫描关注云+社区