记录不常用，一知半解，或者不了解的知识点，及时查漏补缺，提高技术水平。
CSS选择器
标签属性选择器
<a title="我是超链接" href="www">点击我</a>
根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] {
color: red;
}
根据一个有特定值的标签属性是否存在来选择：
a[href="www"] {
font-weight: bold;
}
类选择器
指向特定元素的类
比如文档中有多个相同的类，我们只想h1元素应用上highlight样式
<h1 class="highlight">我是标题</h1>
<p class="highlight">bbbbbb</p>
通过使用附加了类的欲选元素的选择器做到这点，其间没有空格。
/* highlight类只应用在h1元素上 */
h1.highlight { }
多个类被应用的时候指向一个元素
比如我们只想匹配带有所有这些类的元素，可以将这些类不加空格地连成一串。
<div class="notebox">
This is an informational note.
</div>
<div class="notebox warning">
This note shows a warning.
</div>
多个选择器中间不加空格
/* 只能匹配同时拥有 notebox 和 warning类的元素 */
.notebox.warning {
border-color: orange;
font-weight: bold;
}
伪类与伪元素
伪类，用来样式化一个元素的特定状态。
用于选择处于某种状态活满足特定条件的元素，以:冒号开头，并在选择器的末尾使用。常用的伪类例如:hover, :focus, :actice, :link, :last-child等。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素。
a:hover { }
伪元素，选择一个元素的某个部分而不是元素自己。
用于在元素的特定部分上应用样式，这些部分不存在于文档结构中，以::双冒号开头，并在选择器的末尾使用。常用的伪元素例如::before, ::after, ::first-line。例如::first-line是会选择一个元素（下面的情况中是<div>）中的第一行。
<div>
<p>我是第一个元素</p>
<p>我是第二个元素</p>
</div>
div::first-line { }
伪类与伪元素的异同
他们都是用于选择页面上特定元素的方式。
- 伪类描述元素的状态或特定条件，而伪元素描述元素的虚拟部分。
- 伪类以单冒号（
:）开头，伪元素以双冒号（::）开头。 - 伪类通过描述元素的状态来选择元素，而伪元素通过在元素的内容之前或之后插入虚拟元素来选择元素。
需要注意的是，虽然在最新的CSS规范中伪元素使用了双冒号（::），但为了保持向后兼容，单冒号（:）也仍然可以使用来表示伪元素。
关系选择器
子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的<p>元素：
article > p { }
邻接兄弟
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素：
例如找一个紧挨<h1>的<p>，然后样式化它。
h1 + p {}
<h1>标题</h1>
<p>段落1被添加样式</p>
<div>盒子</div>
<p>段落2</p>
通用兄弟
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。
例如选中所有的 <h1>之后的<p>元素，虽然文档中还有个 <div>，其后的<p>还是会被选中。
<article>
<h1>A heading</h1>
<p>段落1被添加样式</p>
<div>I am a div</div>
<p>段落2被添加样式</p>
</article>
h1 ~ p {
font-weight: bold;
background-color: #333;
}
