CSS选择器列表
| h1 | 类型选择器 | 选择元素的一个类型 |
| .className | 类选择器 | 以class属性的值来选择元素,可以在一个页面中出现多个 |
| #idName | ID选择器 | 以id属性的值来选择元素,在页面中是唯一的,只能出现一次 |
| article h2 | 后代选择器 | 选择指定祖先元素内的后代元素 |
| article > h2 | 子元素选择器 | 选择指定父元素内的直接子元素 |
| h2 ~ p | 相邻兄弟选择器 | 选择第一个元素后的兄弟元素,两者拥有相同的父元素 |
| h2 + p | 子元素选择器 | 选择第一个元素后紧跟的元素,两者拥有相同的父元素 |
| a[target] | 目标属性选择器 | 选择一个存在某属性的元素 |
| a[href="http://google.com/"] | 属性均等选择器 | 选择一个属性值匹配特定值的元素 |
| a[href*="login"] | 属性包含选择器 | 选择一个属性值包含特定值的元素 |
| a[href^="https://"] | 属性开头选择器 | 选择一个属性值以特定值开头的元素 |
| a[href$=".pdf"] | 属性结尾选择器 | 选择一个属性值以特定值结尾的元素 |
| a[rel~="tag"] | 属性间隔选择器 | 选择一个属性值被空白分割成多个单词,且其中一个单词匹配给定值的元素 |
| a[lang|="en"] | 属性连接符选择器 | 选择一个属性值被连接符分割成多个单词,且其中一个单词匹配给定值的元素 |
| a:link | 链接(link)伪类 | 选择一个用户没有访问过的链接 |
| a:visited | 链接(link)伪类 | 选择一个用户访问过的链接 |
| a:hover | 行为性伪类 | 选择一个用户将鼠标指针悬浮在上方的元素 |
| a:active | 行为性伪类 | 选择一个用户使用中的元素 |
| a:focus | 行为性伪类 | 选择一个拥有用户焦点的元素 |
| input:enabled | 状态性伪类 | 选择一个处于可编辑状态(默认)下的元素 |
| input:disabled | 状态性伪类 | 选择一个通过设置disabled属性而处于不可编辑状态下的元素 |
| input:checked | 状态性伪类 | 选择一个被选中的单选或者复选按钮 |
| input:indeterminate | 状态性伪类 | 选择一个处于不确定状态下的单选或者复选按钮(可能被选中或者不被选中) |
| li:first-child | 结构性伪类 | 选择父元素下的第一个子元素 |
| li:last-child | 结构性伪类 | 选择父元素下的最后一个子元素 |
| div:only-child | 结构性伪类 | 如果某个元素是它父元素中惟一的子元素,那么将会被匹配 |
| p:first-of-type | 结构性伪类 | 选择父元素中同类型的第1个子元素 |
| p:last-of-type | 结构性伪类 | 选择父元素中同类型的最后一个子元素 |
| img:only-of-type | 结构性伪类 | 若元素为父元素中同类型的唯一元素,则会被匹配 |
| li:nth-child(2n+3) | 结构性伪类 | 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,来计算所有元素 |
| li:nth-last-child(3n+2) | 结构性伪类 | 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,来计算所有元素 |
| p:nth-of-type(3n) | 结构性伪类 | 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,只计算文档树中给定类型的元素 |
| p:nth-last-of-type(2n+1) | 结构性伪类 | 当父元素中子元素的序列匹配所给数字时会被选中,会以文档树开头作为起点,只计算文档树中给定类型的元素 |
| section:target | 目标伪类 | 选择URI片段标示符的值指向的元素 |
| div:empty | 空伪类 | 选择没有任何子元素或者文本的元素 |
| div:not(.awesome) | 否定伪类 | 选择不匹配某个状态标示符的元素 |
| .alpha:first-letter | 文本伪元素 | 选择元素内文本的第一个字母 |
| .bravo:first-line | 文本伪元素 | 选择元素内文本的第一行 |
| div:before | 生成的内容 | 在被选择元素前创建伪元素 |
| a:after | 生成的内容 | 在被选择元素末尾创建伪元素 |
| ::selection | 片段伪元素 | 选择通过用户操作所选定或者高亮的部分 |
CSS选择器列表的更多相关文章
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS 选择器(转)
原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- 精通 CSS 选择器
CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...
- HTML 学习笔记 CSS(选择器3)
CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...
- HTML 学习笔记 CSS(选择器)
CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...
随机推荐
- Java语言实现简单FTP软件------>FTP软件远程窗口的实现(六)
1.首先看一下远程窗口的布局效果 2.看一下本地窗口实现的代码框架 3.远程窗口主要实现代码FtpPanel.java package com.oyp.ftp.panel.ftp; import ja ...
- 初探react
知道这个框架有一段时间了,可是项目中没有用到,也懒得整理,最近两天比较清闲,又想起了它.好了,废话不多说了,都是干货. react是个什么框架? 为什么用react? react 的原理 react有 ...
- 阿里云CENTOS服务器挂载数据盘
阿里云Linux云服务器数据盘默认是未做分区和格式化的,使用前需要先挂载数据盘.步骤如下: 1.查看数据盘 在没有分区之前,使用 1 df -h 2.命令,是无法查看到数据盘的,可以使用 1 ...
- CSS3+HTML5学习笔记(1)
box内阴影: -moz-box-shadow:inset 30px #; -webkit-box-shadow:inset 30px #; box-shadow:inset 30px #; 多重文字 ...
- 更换centos源
我的虚拟机中在安装GoAccess的时候,说找不到GeoIP...尴尬. 这里暂时不说GeoIP的事情,我想更新一下我的yum源,因为我系统(Centos 6.5)使用的是默认的源.速度比较慢,这里先 ...
- codevs 1031 质数环
题目描述 Description 一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上 ...
- 重构遗留程序的一次案例学习(java程序)
遗留代码经常是腐臭的,每个优秀的开发者都想把它重构.而进行重构的一个理想的先决条件是,它应该包含一组单元测试用例,以避免产生回归缺陷.但是为遗留代码编写单元测试可不是件容易的事,因为它经常是一团糟.要 ...
- [转]Android读写文件
一. 从resource中的raw文件夹中获取文件并读取数据(资源文件只能读不能写) String res = ""; try{ InputStream in = ge ...
- CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
- MCS51浮点计算程序
MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEEE转换,在上位机直接显示. ;这是本人使用的MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEE ...