- 元素选择器
- *
通配选择器
匹配所有元素。
- 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选择器
目录
元素选择器
- 通配选择器
- 类型选择器
- id 选择器
- class 选择器
关系选择器
- 后代选择器
- 子元素选择器
- 相邻选择器
- 兄弟选择器
伪类选择器
- 静态伪类和动态伪类
- 静态伪类
- :link 超链接点击之前
- :visited 链接被访问过之后
- 动态伪类
- :hover "悬停":鼠标放到标签上的时候
- :active "激活":鼠标点击标签,但是不松手时。
- :focus 是某个标签获得焦点时的样式
伪元素选择器
属性选择器
概述
通配选择器
这里是a标签链接含有.jpg显示案例
这里是a标签链接含有https显示案例,这里是这里是简单的a标签案例
这里是a标签链接含有qinshining显示案例
基本语法格式:标签名{ 属性1:属性值1;属性2:属性值2;}
所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。”