hand: 手型
crosshair: 十字型
move: 十字箭头形
text: 鼠标移动到文本上的样式
wait: 等待效果沙漏形
default: 默认的那种效果指针形
help: 带问号的鼠标样式
e-resize: 向右的箭头
ne-resize: 向右上方的箭头
n-resize: 向上的箭头
nw-resize: 向左上方的箭头
w-resize: 向左的箭关
sw-resize: 向左下的箭头
s-resize: 向下的箭头
se-resize: 向右下方的箭头
auto: 系统自动的效果
元素选择器
类选择器
ID选择器
CSS2属性选择器:
如果您希望把包含标题(title)的所有元素变为红色,可以写作:
*[title] {color:red;} a[href] {color:red;} a[href][title] {color:red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
p[class="important warning"] {color: red;}
[abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
后代选择器:
如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
子元素选择器:
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
相邻兄弟选择器:
如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
伪类
选择器:
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
伪元素
属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |