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