css选择器总结
1、元素选择器
如：*{},body{},p{} ; xml中note{},to{},from{}
2、class与id选择器
如：.class{},#id{}
3、伪类选择器
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动的链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个 元素的第一个字母 |
| :first-line | p:first-line | 选择每个 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 |
| :before | p:before | Insert content before every element |
| :after | p:after | 在每个 元素之前插入内容 |
| :lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
4、属性选择器
| 名称 | 示例 | 示例说明 |
|---|---|---|
| 属性选择器 | [title]{} | 选择带有title属性的元素 |
| 属性和值选择器 | [title=w3c]{} | 选择title属性为w3c的元素 |
| 属性和值的选择器 - 多值 | [title~=hello]{},[lang|=en]{} | 选择title里有hello的元素，选择lang里有en的元素 |
5、组合选择符
| 选择器 | 用法 | 描述 |
|---|---|---|
| 后代选择器 | 空格" " | 所有后代元素 |
| 子代选择器 | 大于号">" | 儿子辈后代元素 |
| 相邻兄弟选择器 | 加号"+" | 向下相邻的第一个元素，必须有相同的父元素 |
| 普通兄弟选择器 | 破折号"~" | 向下相邻的所有元素 |
（1）后代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div p{background-color:yellow;}
</style>
</head>
<body>
<p>后代选择器</p>
<p>后代选择器</p>
<div>
<nav>
<p>后代选择器</p>
<p>后代选择器</p>
</nav>
<p>后代选择器</p>
<p>后代选择器</p>
</div>
<p>后代选择器</p>
<p>后代选择器</p>
</body>
</html>
（2）子代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style type="text/css">
div>p{background-color:yellow;}
</style>
</head>
<body>
<p>子代选择器</p>
<p>子代选择器</p>
<div>
<nav>
<p>子代选择器</p>
<p>子代选择器</p>
</nav>
<p>子代选择器</p>
<p>子代选择器</p>
</div>
<p>子代选择器</p>
<p>子代选择器</p>
</body>
</html>
（3）相邻兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
div+p{background-color:yellow;}
</style>
</head>
<body>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<div>
<nav>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</nav>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
</html>
(4)普通兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>普通兄弟选择器</title>
<style type="text/css">
div~p{background-color:yellow;}
</style>
</head>
<body>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
<div>
<nav>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</nav>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</div>
<p>普通兄弟选择器</p>
<p>普通兄弟选择器</p>
</body>
</html>
6、选择器分组
如：h1,h2,h3{}
总结
伪类选择 与 属性选择 的示例代码
伪类与伪元素的区别