2.CSS

目录

 一、CSS的基础语法。

二、选择器的分类：

（1）元素选择器：

（2）类选择器：

（3）ID选择器：

（4）通用（通配符）选择器：

（5）后代选择器：

（6）子元素选择器：

（7）相邻兄弟选择器：

（8）并集选择器（组合选择器）：

（9）属性选择器：

（10）伪类选择器：

（11）伪元素选择器：

三、元素定义多个类名要用间隔分隔开。

---

 一、CSS的基础语法。

display:block ：显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度（在块级元素范围内都可以点击到该链接）

二、选择器的分类：

（1）元素选择器：

通过元素名称来选择元素。

p {
  color: red;
}

（2）类选择器：

通过类名来选择元素。

.red-text {
  color: red;
}

（3）ID选择器：

通过ID属性来选择元素。

#main-content {
  width: 80%;
}

（4）通用（通配符）选择器：

匹配所有元素

* {
  margin: 0;
  padding: 0;
}

（5）后代选择器：

通过一个元素的子孙元素来选择元素

ul li {
  list-style-type: circle;
}

（6）子元素选择器：

通过一个元素的直接子元素来选择元素

ul > li {
  font-size: 14px;
}

（7）相邻兄弟选择器：

通过一个元素的相邻兄弟元素来选择元素

h1 + p {
  font-size: 16px;
}

（8）并集选择器（组合选择器）：

将多个选择器组合起来使用，以逗号分隔，可以同时选择多个元素

h2, .heading {
  font-weight: bold;
}

（9）属性选择器：

通过元素的某个属性来选择元素

input[type="email"] {
  border: 1px solid #ccc;
}

（10）伪类选择器：

通过元素在特定状态下的样式来选择元素，如:hover、:checked等

a:hover {
  text-decoration: underline;
}

（11）伪元素选择器：

添加虚拟的样式元素，如::before、::after等

p::before {
  content: "- ";
}

三、元素定义多个类名要用间隔分隔开。

<button type="submit" class="btn bg-maroon">保存</button>

表示这个button元素的类名为 btn 和 bg-maroon，当元素同时使用多个类名时，每个类名之间需要使用空格分隔开。