作为一个长时间来做后端服务的程序员,一直对如何展现漂亮的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的属性继承机制。


CrisLi
23 声望0 粉丝