元素选择器
h1 {color:red; font-size:14px;}
id选择器
#sidebar { border: 1px dotted #000; padding: 10px; }
类选择器
.center {text-align: center}
属性选择器
//下面的例子为带有 title 属性的所有元素设置样式: [title] { color:red; }
//下面的例子为 title="W3School" 的所有元素设置样式: [title=W3School] { border:5px solid blue; }
//包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值: [title~=hello] { color:red; }
//带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值: [lang|=en] { color:red; }
选择器的分组
//对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。 h1,h2,h3,h4,h5,h6 { color: green; }
选择器的继承
//子元素从父元素继承属性。 body { font-family: Verdana, sans-serif; }
派生选择器
li strong { font-style: italic; font-weight: normal; }
其他复杂写法
//将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}
//后代选择器
//只对 h1 元素中的 em 元素应用样式 h1 em {color:red;}
//子元素选择器 h1 > strong {color:red;}
//相邻兄弟选择器
h1 + p {margin-top:50px;}
p.important {color:red;}
.important.warning {background:silver;}
注意区别:
td.fancy { color: #f60; background: #666; } //在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
.fancy td { color: #f60; background: #666; } //类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
伪类
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |