知识库
当前位置: 首页 > 建站知识 > 技术研究院 >

CSS 选择器演示

点击左侧列表中的选择器,即可在右侧中预览到选择器匹配到的内容。

如果没有任何匹配,说明所使用的浏览器不支持该选择器。♪( ´▽`)

元素选择器
*
通配选择器

匹配所有元素。

li
类型选择器

匹配标签为 li 的元素。

#catalogue
id 选择器

匹配 id 属性值等于 catalogue 的元素。

.list
class 选择器

匹配 class 属性值包含 list 的元素。

关系选择器
#catalogue h3
后代选择器

匹配 #catalogue 元素内所有的 h3 元素。

#catalogue > h3
子元素选择器

匹配 #catalogue 元素子级的 h3 元素。

* 不支持:IE6

h1 + h2
相邻选择器

匹配 h1 元素之后紧跟的 h2 元素。

* 不支持:IE6

h1 ~ h2
兄弟选择

匹配 h1 元素之后所有的 h2 元素。

* 不支持:IE6

伪类选择器
h3:first-child

匹配同辈的所有元素中,第一个元素并且是 h3 的元素。

* 不支持:IE6

h3:last-child

匹配同辈的所有元素中,最后一个元素并且是 h3 的元素。

* 不支持:IE6-8

h3:first-of-type

匹配同辈的 h3 元素中,第一个 h3 元素。

* 不支持:IE6-8

h3:last-of-type

匹配同辈的 h3 元素中,最后一个 h3 元素。

* 不支持:IE6-8

h3:nth-child(2n)

匹配同辈的所有元素中,第 2n 个元素并且是 h3 的元素。

* 不支持:IE6-8

h3:nth-last-child(2n)

匹配同辈的所有元素中,倒数第 2n 个元素并且是 h3 的元素。

* 不支持:IE6-8

h3:nth-of-type(2n)

匹配同辈的 h3 元素中,第 2n 个 h3 元素。

* 不支持:IE6-8

h3:nth-last-of-type(2n)

匹配同辈的 h3 元素中,倒数第 2n 个 h3 元素。

* 不支持:IE6-8

.list dt:only-child

匹配同辈的所有元素中,只有一个元素并且是 dt 的元素。

* 不支持:IE6-8

.list dt:only-of-type

匹配同辈的 dt 元素中,只有一个 dt 元素时的 dt 元素。

* 不支持:IE6-8

.list:lang(zh)

匹配 lang 属性值等于 zh 的 .list 元素

* 不支持:IE6-7

ol:not(.list)

匹配 ol 元素中,不包含 .list 选择器规则的元素。

* 不支持:IE6-8

h3:empty

匹配不包含任何元素及内容的 h3 元素。

* 不支持:IE6-8

div:target

匹配 URL 井号(#)部分指向的 div 元素。

* 不支持:IE6-8

E:link

a 元素的链接地址在未被访问前的样式。

* 不进行演示

E:visited

a 元素的链接地址已被访问过的样式。

* 不进行演示

E:hover

鼠标悬停在 E 元素上时的样式

* IE6以下 只支持 a 元素的 hover 样式

* 不进行演示

E:active

E 元素在被激活(在鼠标点击与释放之间发生的事件)时的样式。

* IE7以下 只支持 a 元素的 active 样式

* 不进行演示

E:focus

E 元素在获得焦点时的样式。

* 不支持:IE6-7

* 不进行演示

E:root

匹配 E 元素在文档的根元素,在 HTML 中,根元素永远是 HTML。

* 不支持:IE6-8

* 不进行演示

E:checked

匹配选中状态的 E 元素。(用于 input type 为 radio 与 checkbox)

* 不支持:IE6-8

* 不进行演示

E:enabled

匹配可以正常使用的 E 元素。

* 不支持:IE6-8

* 不进行演示

E:disabled

匹配被禁止使用的 E 元素。(disabled="disabled")

* 不支持:IE6-8

* 不进行演示

伪元素选择器
.article:first-letter

设置 .talk 元素第一个字符的样式。

例:右侧首字大号字

* IE6 下选择符与花括号之间需有空格或换行

.talk:first-line

设置 .talk 元素第一行的样式。

例:右侧首行有浅灰色背景色

* IE6 下选择符与花括号之间需有空格或换行

.talk:before

设置 .talk 元素前的内容及样式。(与 content 属性一起使用)

例:右侧的<p class="talk">有深灰色背景色

* 不支持:IE6-7

.talk:after

设置 .talk 元素后的内容及样式。(与 content 属性一起使用)

例:右侧的</p>有深灰色背景色

* 不支持:IE6-7

.talk::selection

设置 .talk 元素被选择时的颜色。

例:用鼠标选中右侧 .talk 内的文字试试

* 不支持:IE6-8

属性选择器
a[class]

匹配具有 class 属性值的 a 的元素。

* 不支持:IE6

a[target="_blank"]

匹配 target 属性值等于 _blank 的 a 元素。

* 不支持:IE6

a[href^="https"]

匹配 href 属性值以 https 开头的 a 元素。

* 不支持:IE6

a[href$=".jpg"]

匹配 href 属性值以 .jpg 结尾的 a 元素。

* 不支持:IE6

a[href*="baike"]

匹配 href 属性值包含 baike 的 a 元素。

* 不支持:IE6

a[class|="abc"]

匹配 class 属性值以 abc 开头并跟着连接符“-”分割字符串 的 a 元素。例:

color-
color-red
color-green-blue

* 不支持:IE6

a[class~="abc"]

匹配 class 属性值以空格为分隔符,其中有一个等于 abc 的 a 元素。

* 不支持:IE6

盗墓笔记

目录

七星鲁王

  1. 第一章 血尸
  2. 第二章 五十年后
  3. 第三章 瓜子庙

怒海潜沙

  1. 第一章 蛇眉铜鱼
  2. 第二章 双层墓墙
  3. 第三章 大风暴

云顶天宫

  1. 第一章 五圣雪山
蛇沼鬼城
第一章 三叔的醒来
第二章 往事不堪回首
谜海归巢

阴山古楼

邛笼石影

大结局

 

试读

七星鲁王 第一章 血尸

50年前,长沙镖子岭。

四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲

铲子头上带着刚从地下带出的旧土,离奇的是,这一坏土正不停地向外渗着鲜红的液体,就像刚刚在血液里蘸过一样。

“这下子麻烦大喽。”老烟头把他的旱烟在地上敲了敲,接着道,“下面是个血尸嘎,弄不好我们这点儿当当,都要撂在下面噢。”

“下不下去喃?要得要不得,一句话,莫七里八里的!”独眼的小伙子说,“你说你个老人家腿脚不方便,就莫下去了,我和我弟两个下去,管他什么东西,直接给他来一梭子。”

老烟头不怒反笑,对边上的一个大胡子说:“你屋里二伢子海式撩天的,指不定什么时候就给翻盖子了,你得多教育教育,咱这买卖,不是有只匣子炮就能喔荷西天。”

那大胡子瞪了那年轻人一眼:“你崽子,怎么这么跟老太爷讲话,老太爷淘土的时候你他妈的还在你娘肚子里吃屎咧。”

“我咋说……说错了,老祖宗不说了嘛,那血尸就是个好东西,下面宝贝肯定不少,不下去,走嘎一炉锅汤。”

“你还敢顶嘴!”大胡子举手就打,被老烟头用烟枪挡了回去。

“打不得,你做伢那时候不还是一样,这叫上梁不正下梁歪!”

那独眼的小伙子看他老爸被数落了,低下头偷笑,老烟头咳嗽了一声,又敲了那独眼的少年一记头棍:“你笑个啥?碰到血尸,可大可小,上次你二公就是在洛阳挖到这东西,结果现在还疯疯癫癫的,都不知道着了什么道。等一下我先下去,你跟在我后面,二伢子你带个土耗子殿后,三伢子你就别下去了,四个人都下去,想退都来不及退,你就拉着土耗子的尾巴,我们在里面一吆喝你就把东西拉出来。”