关于程序员:玩转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;
}