选择器分类
1. 元素选择器, 标签选择器
- p {
- color: red;
- }
- h1 {
- color: blue;
- }
2.ID 选择器
- <p id="box">
- 测试
- </p>
- <style>
- #box { border: 1px solid red; }
- </style>
3. 类选择器
- <p class="box active">
- 测试
- </p>
- <style>
- .active { font-size: 20px; }
- </style>
4. 通用选择器
- * {
- box-sizing: border-box;
- }
- .box * {
- font-size: 24px;
- }
5. 属性选择器
[attr] 选择包含 attr 属性的所有元素, 不论 attr 的值什么.
[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素
- <style>
- acronym[title] {
- /* color:blue; */
- border-bottom: 1px dotted #999;
- }
- acronym[title]:hover {
- color:red;
- }
- acronym[title]:focus {
- cursor: help;
- }
- </style>
- <body>
- <p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a Word.</p>
- </body>
6. 不常用
1.[attr~=val] 仅选择 attr 属性的值 (以空格间隔出多个值) 中有包含 val 值的所有元素, 比如位于被空格分隔的多个
类 (class) 中的一个类
2.[attr*=val] 选择 attr 属性的值中包含字符串 val 的元素
3.[attr^=val] 选择 attr 属性的值以 val 开头 (包括 val) 的元素
4.[attr$=val] 选择 attr 属性的值以 val 结尾 (包括 val) 的元素
5.[attr|=val] 选择 attr 属性的值是 val 或以 val - 开头的元素(- 用来处理语言编码).
组合选择器
A,B
A, B 同时选中 A 和 B
- <p class="author">
- 测试
- </p>
- <p class="detail">
- 你好啊, 你好啊
- </p>
- <style>
- .author, .detail { color: red; }
- </style>
- A B
选中 A 的后代 B 元素, 注意 A 和 B 之间有个空格
- <style>
- .detail li {
- border: 1px solid red;
- /* color: red; */
- padding: 20px;
- }
- </style>
- <body>
- <ul class="detail">
- <li>
- <ul>
- <li>aaa</li>
- </ul>
- </li>
- <li>bbb</li>
- </ul>
- </body>
- AB
选中既是 A 又是 B 的元素, 注意 A 和 B 之间没有空格
- <ul>
- <li class="item">111</li>
- <li class="item active">被选中? </li>
- </ul>
- <style>
- .item.active {
- color: red;
- }
- </style>
- A> B
选中 A 的直接子元素 B
- <style>
- .detail>li {
- border: 1px solid red;
- /* color: red; */
- padding: 20px;
- }
- </style>
- <body>
- <ul class="detail">
- <li>
- <ul>
- <li>aaa</li>
- </ul>
- </li>
- <li>bbb</li>
- </ul>
- </body>
- A+B
选中 A 的下一个相邻元素 B
- <style>
- .lbj+li {
- border: 1px solid red;
- }
- </style>
- <ul class="cavs">
- <li class="lbj">勒布朗詹姆斯</li>
- <li > 欧文</li><!-- 选中 -->
- <li > 安东尼</li>
- </ul>
- </body>
- A~B
选中 A 的后面全部相邻元素 B
- <style>
- .lbj~li {
- border: 1px solid red;
- }
- </style>
- <ul class="cavs">
- <li class="lbj">勒布朗詹姆斯</li>
- <li > 欧文</li><!-- 选中 -->
- <li > 安东尼</li><!-- 选中 -->
- </ul>
- </body>
来源: http://www.bubuko.com/infodetail-3655426.html