关于CSS你应该知道的基础知识 - 选择器篇

作为一个长时间来做后端服务的程序员，一直对如何展现漂亮的UI感到苦恼。好在现在很多流行的CSS框架，如Bootstarp, Bluma, Foundation, Uikit 可以帮助后端程序员快速的搭建一个看上去不那么low的UI。但只使用框架提供的默认样式，不能满足全部需求，还是要知道一些CSS基础知识，才能做更好的使用框架。最近刚好有时间学习一下CSS的基础知识，写一系列文章记录下来。

CSS选择器

用CSS代码给指定DOM元素赋予指定样式，就需要用到CSS选择器，即selector。常见的选择器有如下几种

• 元素选择器
• 类选择器
• 全局选择器
• ID选择器
• 属性选择器

元素选择器

通过元素类型选择DOM元素，示例代码如下。

将所有 div元素的背景颜色都设置成红色

div {
  background-color: red;
}

将所有a标签都设置成绿色

a {
  color: green;
}

类选择器

通过元素上的class属性来选择DOM元素，例如：

将class属性带有 title的元素字体大小设置为42px

.title {
  font-size: 42px;
}

<span class="title">我是一个标题</span>

全局择器

将页面所有元素都赋予某种样式，通常我们不会使用此种选择器。

将所有元素都设置为以border为边界计算盒模型长宽。

* {
  box-sizing: border-box;
}

ID选择器

通过元素上的id属性来选择DOM元素，例如：

将id是 login-btn的元素背景设置成绿色

#login-btn {
  backgroud-color: green;
}

<button id="login-btn">我是登录按钮</button>

属性选择器

通过元素上的特定属性值来选择DOM元素，例如：

将含有disabled属性的元素设置成灰色

[disabled] {
  color: grey;
}

<button disabled>我是不可用按钮</button>

以上是几种基本的选择器，还有一些选择器通过元素相互结构关系来选择。

例如我们想选择某个id属性下所有的p元素。可以使用如下代码：

所有id是news下的p元素，都会是红色。

#news span {
  color: red;
}

<div id="news">
  <p>我是红色</p>
  <p>我是红色</p>
  <div>
    <p>我是红色</p>
  </div>
</div>

可以使用 > 来指定只有直接子元素被选中。

id是news下的直接子元素中，是p的会被设置成红色。

#news > p {
  color: red;
}

<div id="news">
  <p>我是红色</p>
  <p>我是红色</p>
  <div>
    <p>我不是红色</p>
  </div>
</div>

使用 + 来选择某个指定元素紧邻的元素，指定元素和选中的元素同属于一个父元素。

选择id是news后面紧邻的p元素，news和那个被选中的p元素都是parent元素的直接子元素。

#news + p {
  color: red;
}

<div id="parent">
  <p>
    我不是红色
  </p>
  <p id="news">
    我不是红色
  </p>
  <p>
    我是红色
  </p>
  <p>
    我不是红色
  </p>
  <div>
    <p>
      我不是红色
    </p>
  </div>
</div>

使用 ~ 来选择某个指定元素之后相邻的元素，指定元素和选中的元素同属于一个父元素。

选择id是news后面相邻的p元素，所有选中的元素都是 parent的直接子元素。

#news ~ p {
  color: red;
}

<div id="parent">
  <p>
    我不是红色
  </p>
  <p id="news">
    我不是红色
  </p>
  <p>
    我是红色
  </p>
  <p>
    我是红色
  </p>
  <div>
    <p>
      我不是红色
    </p>
  </div>
</div>

通过伪类来选择奇偶或者指定第N个子元素

id是news的第三个直接子元素，如果是p元素就设置成红色。

#news > p:nth-child(3) {
  color: red;
}

<div id="news">
  <p>
    我不是红色
  </p>
  <p>
    我不是红色
  </p>
  <p>
    我是红色
  </p>
  <p>
    我不是红色
  </p>
</div>

id是news的基数位置直接子元素，如果是p元素就设置成红色。

#news > p:nth-child(odd) {
  color: red;
}

<div id="news">
  <p>
    我是红色
  </p>
  <p>
    我不是红色
  </p>
  <p>
    我是红色
  </p>
  <p>
    我不是红色
  </p>
  <div>
    我不是红色
  </div>
</div>

id是news的子元素中，第二个是p的元素设置成红色。

#news > p:nth-of-type(2) {
  color: red;
}

<div id="news">
  <div>
    我不是红色
  </div>
  <p>
    我不是红色
  </p>
  <p>
    我是红色
  </p>
  <p>
    我不是红色
  </p>
</div>

CSS选择器就先总结这些，后续会总结一下CSS的属性继承机制。