玩转CSS基础：CSS选择器

记录不常用，一知半解，或者不了解的知识点，及时查漏补缺，提高技术水平。

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;
}