CSS 学习笔记

CSS 选择器

通配选择器

通配选择器（*）匹配文档中的所有元素。

css

* {
  color: red;
}

类选择器

类选择器（.class）匹配指定 class 属性的元素。

css

.red {
  color: red;
}

ID 选择器

ID 选择器（#id）匹配指定 id 属性的元素。

css

#red {
  color: red;
}

元素选择器

元素选择器（element）匹配指定元素。

css

p {
  color: red;
}

属性选择器

属性选择器（[attribute]）匹配包含指定属性的元素。

css

[title] {
  color: red;
}

属性值选择器

属性值选择器（[attribute=value]）匹配指定属性值的元素。

css

[title="red"] {
  color: red;
}

伪类选择器

伪类选择器（:pseudo-class）匹配元素的特殊状态。

css

a:visited {
  color: red;
}

伪元素选择器

伪元素选择器（::pseudo-element）匹配元素的特殊部分。

css

p::first-line {
  color: red;
}

组合选择器

组合选择器（selector1, selector2）匹配 selector1 或 selector2 的元素。

css

h1, h2 {
  color: red;
}

后代选择器

后代选择器（selector1 selector2）匹配 selector1 元素的后代 selector2 元素。

css

div p {
  color: red;
}

子元素选择器

子元素选择器（selector1 > selector2）匹配 selector1 元素的子元素 selector2。

css

div > p {
  color: red;
}

CSS 盒模型

盒模型

盒模型由内容、内边距、边框和外边距组成。

css

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid red;
  margin: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

CSS 学习笔记

CSS 选择器 ​

通配选择器 ​

类选择器 ​

ID 选择器 ​

元素选择器 ​

属性选择器 ​

属性值选择器 ​

伪类选择器 ​

伪元素选择器 ​

组合选择器 ​

后代选择器 ​

子元素选择器 ​

CSS 盒模型 ​

盒模型 ​