CSS 选择器

CSS, Cascading Style Sheets 层叠样式表,用于协助 HTML 排版布局。

使用

使用 CSS 的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

当样式较为复杂或复用性较强时,外部样式表是很好的选择,你可以在一个文件中定义整个站点的样式,每个 HTML 文件使用 link 标签链接到样式表,如:

<link rel="stylesheet" type="text/css" href="mystyle.css">

通常,这条语句存在于 head 标签中。

内部样式表

当一些样式只会被应用在单个文件时,可以考虑使用内部样式表。如:

<head>
  <style>
    p {
      text-indent: 2rem;
    }
    body {
      background-image: url("images/back40.gif");
    }
  </style>
</head>

内部样式定义在 head 中的 style 标签内。

内联样式

当一些样式只被某个元素需要时,可以考虑使用内联样式。如:

<p class="red" style="color: red;">This is a subtitle.</p>
<p class="orange bold" style="background-color: orange; font-weight: bold;">This is a small title with multiple class.</p>
<p class="red orange bold large" style="color: red; background-color: orange; font-weight: bold; font-size: x-large;">Class selector can apply on more than one element.</p>

通常情况下,我们应当避免内联样式。

语法

![img](file:///C:/Users/Infinity/AppData/Local/Packages/Microsoft.Office.OneNote_8wekyb3d8bbwe/TempState/msohtmlclip/clip_image001.png)

CSS 主要由两部分构成:选择器声明

图片来源:RUNNOOB

选择器

选择器表明了声明规则应该应用于何处,如:

h1 {
  font-size: large;
}

这条语句表明了 large 字体应当应用于所有 h1 标签。

.header {
  color: red;
}

这条语句表明了所有带有 header 类的元素都应是红色字体。

稍后我们会讲到这些选择器的区别。

ID 选择器

在 HTML 中,我们使用 id 属性 (attr) 来表示 ID;

而在 CSS 中,我们使用 # 来表示 ID。如:

#title-1 {
  font-size: 2rem;
}

这条 CSS 语句所声明的规则会应用在 ID 为 title-1 的 HTML 元素上,如:

<h1 id="title-1">Maybe there is a title</h1>

预览:

Maybe there is a title

Class 选择器

在 HTML 中,我们使用 class 属性 (attr) 来表示类;

而在 CSS 中,我们使用 . 来表示 Class。如:

.red {
  color: red;
}
.orange {
  background-color: orange;
}
.bold {
  font-wight: bold;
}
.large {
  font-size: x-large;
}

这条语句所声明的规则会应用在 Class 为 title 的 HTML 元素上,如:

<p class="red">This is a subtitle.</p>
<p class="orange bold">This is a small title with multiple class.</p>
<p class="red orange bold large">Class selector can apply on more than one element.</p>
<p>Unless it doesn't have this attribute.</p>

预览:

This is a subtitle.

This is a small title with multiple class.

Class selector can apply on more than one element.

Unless it doesn't have this attribute.

Attr 选择器

有时,我们需要将样式应用在含有某个属性 (attr) 的元素上,如:

<p>Either this one.</p>
<p data-attr="true">This one with 'data-attr' attribute and its value is 'true'.</p>
<p data-attr="false">Nor this one.</p>

这时,我们可以使用 attr 选择器:

[data-attr=true] {
  color: red;
}

也可以通过 attr() 方法动态获取属性值来应用,可以参考 Mozilla Developer 中的解释。内容不属于常用,不再赘述。

组合选择器

后代选择器

后代选择器用于选择某元素的后代元素,如选择所有包含在 div 元素中的 p 元素:

div p {
  color: red;
}

子元素选择器

子元素选择器只能选择某元素的直接子元素,如:

div > p {
  color: red;
}
<div>
  <p>This is inside element.</p>
  <div>
    <p>But this is not.</p>
  </div>
</div>
<p>But this is not.</p>

预览:

This is inside element.

But this is not.

But this is not.

相邻兄弟选择器

相邻兄弟选择器可选择紧随其后且父级相同的元素,如:

div + p {
  color: red;
}
<div>
  <p>Not me.</p>
</div>
<p>I'm red.</p>

预览:

Not me.

I'm red.

后续兄弟选择器

后续兄弟选择器类似于相邻选择器,但是会选取所有与指定元素同级且之后的元素,如:

div ~ p {
  color: red;
}
<div>
  <p>Not me.</p>
</div>
<p>I'm red.</p>
<p>I'm red, too.</p>
<p>Also me.</p>

预览:

Not me.

I'm red.

I'm red, too.

Also me.

伪类选择器

伪类选择器使用 : 来声明,如:

div:hover {
  background-color: red;
}

这条语句表明了当鼠标悬浮在 div 元素上时,div 的背景颜色变为红色。

:first-child

选择第一个符合选择器规则的元素,如:

p:first-child {
  color: red;
}
<p>I'm red.</p>
<p>Not me.</p>

预览:

I'm red.

Not me.

:hover

当鼠标悬浮在该元素上时处于该状态。

::before & ::after

配合 content 属性 (prop) 来为元素之前或之后添加内容,如:

p::before {
  content: "BEFORE";
  font-size: x-large;
}
p::after {
  content: "AFTER";
  background-color: red;
}

布局

display: none

隐藏元素,不在 DOM 中渲染。

display: inline

将其显示为内联元素(不换行,一行展示)。

display: block

将其展示为块元素(换行,一个元素一行)。

display: flex

Flex 弹性布局,重点,可参考 阮一峰老师的教程

定位

Position 定位属性指定了元素的定位类型,有如下五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

position: static

默认值,遵循正常的文档流,不会受到 top, bottom, leftright 影响。

position: fixed

相对于浏览器窗口固定,不随窗口滚动而移动。

常用于提示框、弹出层等非文档内容。

position: relative

相对其默认位置的定位,可以搭配 top 等属性。

position: absolute

相对于其直接父级定位,与文档流无关,所以不会占据空间,也可以与其他元素重叠。

position: sticky

这是一个特殊的定位方式,有两种体现形式:

默认情况下,它的表现与 position: relative 相同;

当页面滚动超出目标区域时,它的表现与 position: fixed 相同。

z-index: (number)

当元素处于可重叠的定位状态时(如 absolute,fixed 等),该属性表明了这些重叠元素的堆叠顺序,数值越大越靠上。

margin: (size)

该属性表明了元素的外边距,接受任意的距离数值。

padding: (size)

该属性表明了元素的内边距,接受任意的距离数值。

注意与提示

  1. 不要在属性值与单位间留有空格,如:font-size: 10 px,这是非法定义。
  2. 尽量在声明语句结尾加上 ; 结束。
IInfinity

IInfinity

大道虽简,知易行难。
CN