css选择器
（一）元素选择器
如果设置html的样式，选择器通常是某个html元素,如:p,h1,a,甚至是html本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
为xml文档中元素设置样式：
XML 文档：
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
CSS 文档：
note
{
font-family:Verdana, Arial;
margin-left:30px;
}
to
{
font-size:28px;
display: block;
}
from
{
font-size:28px;
display: block;
}
heading
{
color: red;
font-size:60px;
display: block;
}
body
{
color: blue;
font-size:35px;
display: block;
}
（二）选择器分组
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通配符选择器
* {color:red;}
相当于把文档中所有元素的颜色属性指定为red
（三）类选择器
多类选择器 例子：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
包含important的类加粗,包含warning的类斜体,同时包含important和warning的类背景银色
（四）id选择器
id选择器和类选择器的区别：
与类选择器不同，id选择器在一个html文档中只能使用一次
与类选择器不同，id选择器不能结合使用，因为id属性不允许以空格分隔的词列表
id能包含更多的语义
（五）属性选择器
简单的属性选择：
*[title] {color:red;}
把包含标题（title）的所有元素变为红色
a[href] {color:red;}
只对有 href 属性的锚（a 元素）应用样式
a[href][title] {color:red;}
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
img[alt] {border: 5px solid red;}
对所有带有 alt 属性的图像应用样式
根据具体的属性值选择
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
属性与属性值必须完全匹配
p[class="important warning"] {color: red;}
必须为
<p class="important warning">This paragraph is a very important warning.</p> 才行
根据部分值选择
p[class~="important"] {color: red;}
字串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
特定属性选择器
*[lang|="en"] {color: red;}
选择 lang 属性等于 en 或以 en- 开头的所有元素
（六）后代选择器
根据上下文选择元素
h1 em {color:red;}
会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本则不会被这个规则选中
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
（七）子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
（八）相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
h1 + p {margin-top:50px;}
增加紧接在 h1 元素后出现的段落的上边距
（九）伪类
1.超链接
a:link {color: #FF0000}
a:visited {color: #00FF00}
2.focus
input:focus
{
background-color:yellow;
}
3. :first-child
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
匹配第一个子元素
必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
4.lang
q:lang(no)
{
quotes: "~" "~"
}
<q lang="no">段落中的引用</q>
(十）伪元素
:first-line 向文本的首行设置特殊样式
:first-letter 为文本的首字母设置样式
:before 在元素的内容前面插入新内容
h1:before
{
content:url(logo.gif);
}
:after 在元素内容之后插入新内容
h1:after
{
content:url(logo.gif);
}
上一篇： 便捷学习网站