CSS3常用选择器

一、基本选择器

  • 子元素选择器

概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 相邻兄弟元素选择器

概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 (Eelement + Sibling) 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 通用兄弟选择器

概念:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素 语法格式:元素 ~ 后面所有兄弟相邻元素 (Eelement ~ Siblings) 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 群组选择器

概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开 语法格式:元素1, 元素2, …, 元素n (Eelement1, Element2, …, Elementn) 兼容性:IE6+、FireFox、Chrome、Safari、Opera

二、属性选择器

  • Element[attribute]

概念:选择所有带有attribute属性元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute=“value”]

概念:选择所有使用attribute="value"的元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute~=“value”]

概念:选择 attribute 属性包含单词 "value" 的元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute*=“value”]

概念:选择attribute 属性包含 "value" 的所有元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute^=“value”]

概念:选择 attribute 属性值以 "value" 开头的所有元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute$=“value”]

概念:选择attribute 属性值以 "value" 结尾的所有元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element[attribute|=“value”]

概念:选择 attribute 属性值为 "value”或以 "value-" 开头的元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

三、伪类选择器

1、动态伪类

  • 锚点伪类

:link, :visited

  • 用户行为伪类

:hover, :active, :focus

  • UI元素状态伪类

:enabled 选择器匹配每个已启用的元素(大多用在表单元素上) :disabled 选择器匹配每个被禁用的元素(大多用在表单元素上) :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框) 兼容性:IE9+、FireFox、Chrome、Safari、Opera

2、CSS3结构类

  • Element:first-child

概念:选择属于其父元素的首个子元素的每个 Element 元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element:last-child

概念:指定属于其父元素的最后一个子元素的 Element 元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • Element:nth-child(N)

概念:匹配属于其父元素的第 N 个子元素,不论子元素是哪个都算入,匹配不到Element则无效 兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

  • Element:nth-child(n)

n是一个简单表达式,取值从“0”开始计算。这里只能是“n”,不能用其他字母代替。

  • Element:nth-child(odd)、Element:nth-child(even)

odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词(第一个的下标是 1)

  • Element:nth-last-child(N)

概念:匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数 兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

  • Element:nth-of-type(N)

概念:匹配属于父元素的特定类型的第 N 个子元素的每个元素 兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

  • Element:nth-last-of-type(N)

概念:匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数 兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

  • Element:first-of-type

概念:匹配属于其父元素的特定类型的首个子元素的每个元素 兼容性:IE9+、FireFox、Chrome、Safari、Opera

  • Element:last-of-type

概念:匹配属于其父元素的特定类型的最后一个子元素的每个元素 兼容性:IE9+、FireFox、Chrome、Safari、Opera

  • Element:only-child

概念:匹配属于其父元素的唯一子元素的每个元素 兼容性:IE9+、FireFox、Chrome、Safari、Opera

  • Element:only-of-type

概念:匹配属于其父元素的特定类型的唯一子元素的每个元素 兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

  • Element:empty

概念:匹配没有子元素(包括文本节点)的每个元素 兼容性:IE9+、FireFox、Chrome、Safari、Opera

  • 否定选择器(:not)

概念:匹配非指定元素/选择器的每个元素 语法格式:父元素:not(子元素/子选择器) (Father:not(Children/selector)) 兼容性:IE9+、FireFox、Chrome、Safari、Opera

3、伪元素

  • Element::first-line

概念:根据 "first-line" 伪元素中的样式对 Element 元素的第一行文本进行格式化 说明:"first-line" 伪元素只能用于块级元素

  • Element::first-letter

概念:用于向文本的首字母设置特殊样式 说明:"first-letter" 伪元素只能用于块级元素

  • Element::before

概念:在元素的内容前面插入新内容 说明:常用"content"配合使用

  • Element::after

概念:在元素的内容后面插入新内容 说明:常用“content”配合使用,多用于清除浮动 清除浮动例子: .header::after{ display: block; content: ""; clear: both; }

  • Element::selection

概念:用于设置在浏览器中选中文本后的背景色与前景色 兼容性:::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端自习课

【JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

今天在开发一个移动端的 H5 页面时,遇到了 iOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:

26510
来自专栏iOS开发干货分享

RxSwift销毁者-dispose源码解析

现在感觉一切很顺利,但是聪明的我们一定要知道这里落下一个重要的前导因素:什么时候调用了 dispose()

11830
来自专栏程序员维他命

老司机 iOS 周报 #78 | 2019.08.05

你也可以为这个项目出一份力,如果发现有价值的信息、文章、工具等可以到 Issues 里提给我们,我们会尽快处理。记得写上推荐的理由哦。有建议和意见也欢迎到 Is...

14730
来自专栏前沿技墅

看了让人极度舒适的Markdown文章

毕小朋,CSDN 博客专家,百度阅读 IT 类畅销书作者,著有《精通 Android Studio》;平时喜欢写作,热爱分享,个人博客访问量迄今已超过 280 ...

27810
来自专栏Flutter笔记

Flutter | 超实用简单菜单弹出框 PopupMenuButton

幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果。

40630
来自专栏Python数据科学

骚年,这简历一看就是包装过了

https://my.oschina.net/hooker/blog/3014656

9320
来自专栏我的前端路

web使用 Weinre 调试移动网站及 PhoneGap 应用

在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些...

9740
来自专栏搜狗测试

iOS文件内存映射——MMAP

最近一段项目上总是出现一些因为文件没有及时保存而产生的问题,因此小编就在网上寻找到了这个文件存储方法mmap,这里为大家进行下简单的介绍。

9920
来自专栏程序员——iOS开发

详解:RxSwift-KVO底层探索(上)

下面我们开始分析,首先感谢苹果开源精神,在Github可以直接下载,我们通过 Swift 源码展开分析

10220
来自专栏智能相对论

Intel们究竟是怎么"倒下"的?

以IBM、Intel和微软为代表的老派IT,虽然在移动的赛道上没了声音,但它们用自己的方式重新吸引了市场火力。

8410

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励