- Objective:
- Breadcrumb:
# 概念阐释
## 语义
利用选择器之间的关系更加准确的指向要渲染的HTML内容。
## 语法
### 元素标签与属性或标签
更加准确的定位到要修改的内容
```css
p.big {}/*属性为big且标签为p的样式修改*/
p#unique{}/*这种情况不会出现，因为一个页面只能有一个id*/
```
### 同时修改多种选择器
```css
p,.big { }
```
### 属性和属性
一个属性内会有多个属性名称的可能，没有空格
```html
<p class=".mainpoint highlight">
```
```css
.mainpoint.highlight { }
```
### 后代选择器
父元素内的所有子元素，两个选择器中有空格
```css
.box p {
color: red;
} /*box属性下的p元素*/
#hello p {
color:yellow;
} /*hello ID下的p元素*/
```
```html
<div class="box">
<p>Text in .box</p>
</div>
<p>Text not in .box</p>
```
但必须是子元素，如果再下一级就必须写全
```html
.published-container .markdown-rendered h2 {
border: none;
}
```
### 子代关系选择器
父级元素下的直系子元素会发生改变，孙系没变化
``` css
article > p {
color:blue;
}
```
```html
<article>
...
<p>...</p>/*有变化*/
</article>
<p>...</p> /*无变化*/
<article>
<div>
<p>...</p>/*无变化*/
</div>
</article>
```
### 临接兄弟
处于同级别的紧挨着的元素会发生改变
```css
h1 + p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
```
```html
<article>
<h1>A heading</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p> /*样式化*/
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> /*样式无变化*/
</article>
```
### 通用兄弟
处于同级别的所有元素会发生改变
```css
h1 ~ p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
```
```html
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p> /*样式化*/
<div>I am a div</div>/*样式无变化*/
<p>I am another paragraph.</p> /*样式化*/
</article>
```
# 实例
除了通过标签、class 和 id 来获取 HTML 标签外，还有一些特殊属性
### data-属性
在[[HTML 属性|HTML]]5中加入了`data-*`数据属性
```css
h1[data-heading="章序号/节序号/节/笔记序号"] {
display: none;
}
```
```html
<h1 data-heading="章序号/节序号/节/笔记序号">...<h1>
```
```css
.metadata-property[data-property-key="tags"] .multi-select-pill {
background: orange;
color: blue;
}
```
```html
<element class="metadata-property" data-property-key="tags">
…
<element class="multi-select-pill">
```
### input 的 type 属性
```html
<input type="checkbox">
```
```css
.todoist-p4 > input[type='checkbox'] {
border: 1px solid #b4c2f0 !important;
background-color: rgba(180, 194, 240, 0.25) !important;
}
```
# 相关内容
### 选择器种类
```css
h1 { }
.box { }
#unique { }
* { margin:0;} /*全局选择器*/
```
# 参考资料
- [关系选择器-MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators)