饥人谷Wiki

<markdown>
 
[\<\< 返回CSS教程](:document/css)
 
# CSS 选择器
 
CSS 选择器用于定位我们想要给予样式的 HTML 元素。
 
 
## 简单选择器 Simple Selectors
### 元素选择器 Element Selectors
```css
p {
  color: red;
}
 
div {
  color: blue;
}
```
 
### ID 选择器 ID Selectors
```html
<p id="notification">通知：明天放假</p>
```
```css
#notification {
  font-size: 24px;
}
```
 
### 类选择器 Class Selectors
一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类
```html
<ul>
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗脸</li>
</ul>
```
 
```css
.first {
  font-weight: bold;
}
 
.done {
  text-decoration: line-through;
}
```
 
### 通用选择器 Universal Selector
```css
* {
  box-sizing: border-box;
}
 
.flex-container * {
  flex-basis: 100%;
}
```
 
## 属性选择器 Attribute Selectors
### [attr]
`[attr]` 选择包含 `attr` 属性的所有元素，不论 `attr` 的值为何。
```css
[disabled] {
  cursor: not-allowed;
}
```
 
### [attr=val]
`[attr=val]` 仅选择 `attr` 属性被赋值为 `val` 的所有元素。
```css
[data-color="gray"] {
  color: #ccc;
}
```
 
### [attr~=val]
`[attr~=val]` 仅选择 `attr` 属性的值（以空格间隔出多个值）中有包含 `val` 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
 
### [attr*=val]
`[attr*=val]` 选择 `attr` 属性的值中包含字符串 `val` 的元素。
```css
[title*="fuck"] {
  display: none;
}
```
 
### [attr^=val]
`[attr^=val]` 选择 `attr` 属性的值以 `val` 开头（包括`val`）的元素。
```css
[href^="http://"] {
  background-color: #f0ad4e;
}
```
 
### [attr$=val]
`[attr$=val]` 选择 `attr` 属性的值以 `val` 结尾（包括`val`）的元素。
```css
[src$="gif"] {
  border: 1px solid #ccc;
}
```
 
### [attr|=val]
`[attr|=val]` 选择 `attr` 属性的值以 `val`（包括`val`）或 `val-`开头的元素（-用来处理语言编码）。
```css
[lang|="zh"] {
  font-family: '微软雅黑';
}
```
 
## 伪类 Pseudo-classes
```css
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
```
```css
li:first-child { ... }
li:last-child { ... }
```
```css
body :not(p) { ... }
p:not(.warning) { ... }
```
 
## 伪元素 Pseudo-elements
### ::after
[`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after)
```css
.clearfix::after {
  content: '';
  clear: both;
  display: block;
}
```
### ::before
[`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before)
```css
.happy::before {
  content: '😁';
}
```
### ::selection
[`::selection`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection) 应用于文档中被用户高亮的部分（比如鼠标选中的部分）。
```css
p::selection {
  color: white;
  background: blue;
}
```
 
### ::backdrop
[`::backdrop`](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop) `实验特性`
 
### ::first-letter
[`::first-letter`](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter) 选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。
 
### ::first-line
[`::first-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line) 将样式只应用于一个块状元素的首行。
 
### ::-webkit-input-placeholder
```css
/* 设置 input 元素 placeholder 的字体颜色 */
input::-webkit-input-placeholder {
  color: #aaa;
}
```
## 组合选择器 Combinators
## A, B
`A, B` 选中匹配 A 或/和 B 的元素  
```css
.author, .famous {
  font-weight: bold;
}
```
```html
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>
```
 
## A B
`A B` 选中匹配 B 且为匹配 A 的元素的后代元素。
```css
.article a {
  color: #384ebf;
}
```
 
## A > B
`A > B` 选中匹配 B 且为匹配 A 的元素的直接子元素。
```css
.warriors > li {
  background-image: url(../images/warrior.svg);
}
```
```html
<ul class="warriors">
  <li><!-- ✅ -->
    斯蒂芬·库里
    <ul>
      <li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li><!-- ✅ -->
  <li>克莱·汤普森</li><!-- ✅ -->
  <li>德雷蒙德·格林</li><!-- ✅ -->
</ul>
```
 
## A + B
`A + B` 选中匹配 B 且为匹配 A 的元素的下一相邻元素。
```css
.cavs .lbj + li {
  text-shadow: 1px 1px 5px #ccc;
}
```
```html
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li>
</ul>
```
 
## A ~ B
`A ~ B` 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。
```css
.cavs .lbj ~ li {
  text-shadow: 1px 1px 5px #ccc;
}
```
```html
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li><!-- ✅ -->
</ul>
```
🌰 正立方体各个面切换 https://twhy.github.io/fruit-cube
 
## 多个选择器 Multiple Selectors
```css
.players .player.curry, .player.mvp, #lebron-james {
  background-image: url(../images/mvp.png);
}
```
 
## 参考链接
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors
* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors
 
 
 
 
 
 
</markdown>