欢迎来到覃师宁博客!
帝国cms使用手册
元素选择器
*
通配选择器

匹配所有元素。

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*="qinshining"]

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

* 不支持:IE6

a[class|="abc"]

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

color-
color-red
color-green-blue

* 不支持:IE6

a[class~="abc"]

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

* 不支持:IE6

CSS选择器

目录

元素选择器

  1. 通配选择器
  2. 类型选择器
  3. id 选择器
  4. class 选择器

关系选择器

  1. 后代选择器
  2. 子元素选择器
  3. 相邻选择器
  4. 兄弟选择器

伪类选择器

  1. 静态伪类和动态伪类
静态伪类
:link 超链接点击之前
:visited 链接被访问过之后
动态伪类
:hover "悬停":鼠标放到标签上的时候
:active "激活":鼠标点击标签,但是不松手时。
:focus 是某个标签获得焦点时的样式

伪元素选择器

属性选择器

概述

通配选择器

这里是a标签链接含有.jpg显示案例

这里是a标签链接含有https显示案例,这里是这里是简单的a标签案例

这里是a标签链接含有qinshining显示案例

基本语法格式:标签名{ 属性1:属性值1;属性2:属性值2;}

所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。”

网创邦微信公众号