共计 1657 个字符，预计需要花费 5 分钟才能阅读完成。
记录不罕用，只知其一; 不知其二，或者不理解的知识点，及时查漏补缺，进步技术水平。
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;
}