实用全面的css选择器

首先推荐一个非常实用的css参考手册:http://www.css88.com/book/css/

css选择器详细语法:

1、 基本选择器:

选择器 类型 功能描述 例子
* 全部选择器 匹配文档中任何html元素 *
element 元素选择器 匹配指定名称的html元素 div
#id id选择器 匹配指定id的html元素 #password
.class 类选择器 匹配指定类的html元素 .header
a, b 选择多个选择器 匹配指定的a和b元素 .header, #password

2、 层次选择器:

选择器 类型 功能描述 例子
ab 多重选择器 匹配同时符合a和b的元素 div.header
a b 后代选择器 匹配包含在a里面的所有b元素 div p
a>b 子选择器 匹配在a子元素里的所有b元素 div>p
a+b 相邻后兄弟选择器 匹配位于a后的第一个元素且为b的元素 div+p
a~b 后兄弟选择器 匹配位于a后的所有b元素 div~p

3、动态伪类选择器:

选择器 类型 功能描述 例子
E:link 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 a:link
E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 a:visited
E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上 a:active
E:hover 用户行为选择器 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover a:hover
E:focus 用户行为选择器 选择匹配的E元素,而且匹配元素获取焦点 input:focus

4、目标伪类选择器

选择器 类型 功能描述 例子
E:target 活动锚点选择器 选取当前活动的锚点 a:target

5、表单元素状态伪类选择器语法

选择器 类型 功能描述 例子
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素 input:checked
E:enabled 启用状态伪类选择器 匹配启用的表单元素 input:enabled
E:disabled 禁用状态伪类选择器 匹配禁用的表单元素 input:disabled

6、结构伪类选择器使用语法

选择器|功能描述|例子
-|
E:first-child|匹配作为父元素的第一个子元素且元素为E。与E:nth-child(1)等同|p:first-child
E:last-child|匹配作为父元素的最后一个子元素且元素为E。与E:nth-last-child(1)等同|p:last-child
E:root|:root在html文档里就代表html元素|:root或者html:root
E:nth-child(n)|匹配作为父元素的第n个子元素且为元素E。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.|li:nth-child(2)
E:nth-last-child(n)|匹配作为父元素的倒数第n个子元素且为元素E。和E:nth-child(n)顺序相反,其他用法一样|li:nth-last-child(3)
E:nth-of-type(n)|匹配E元素,且其在父元素里恰好排为第n个E元素|p:nth-of-type(2)
E:nth-last-of-type(n)|匹配E元素,且其在父元素里恰好排为倒数第n个E元素|p:nth-last-of-type(2)
E:first-of-type(n)|匹配E元素,且其在父元素里恰好排为第1个E元素|p:first-of-type(2)
E:last-of-type(n)|匹配E元素,且其在父元素里恰好排为倒数第1个E元素|p:last-of-type(2)
E:only-child|匹配E元素,且其父元素只有E这个元素|p:only-child
E:only-of-child|匹配E元素,且其父元素只有一个E类型元素|p:only-of-child
E:empty|匹配没有任何子元素(包括text节点)的元素E|p:empty

7、否定伪类选择器

选择器|功能描述|例子
-|
E:not(s)|匹配不含有s选择符的元素E|li:not(:last-child)

8、属性选择器
选择器|功能描述|例子
|
E[att] |匹选择具有att属性的E元素|img[alt]
E[att="val"] |选择具有att属性且属性值等于val的E元素|input[type="text"]
E[att="val"]|选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)|div[class="a"]
E[att="val"]|选择具有att属性且属性值为以val开头的字符串的E元素|div[class="a"]
E[att$="val"]|选择具有att属性且属性值为以val结尾的字符串的E元素|div[class$="c"]
E[att="val"]|选择具有att属性且属性值为包含val的字符串的E元素|div[class="b"]
E[att|="val"]|选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择|div[class|="a"]

9、伪类选择器

E:first-letter/E::first-letter
E:first-line/E::first-line
E:after/E::after
E::placeholder
E::placeholder

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容

  • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
    云外之境阅读 1,862评论 0 0
  • 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用l...
    Zd_silent阅读 256评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 基本选择器 *{} 通配符选择器,适用任何元素h1 标签选择器,选择h1标签内元素....
    字母31阅读 629评论 0 0
  • 转载自牢记31种CSS选择器用法 1 * 星号选择器用于选取页面中的所有元素,可用于快速清除所有元素的 margi...
    Icestains阅读 1,231评论 0 1