【前端知识初学—CSS和选择器】

---

---

前言

本文就前端知识中部分CSS和选择器基础知识点进行总结，希望对你有用！

---

一、如何引用CSS

1. 内联样式引用

直接在html标签的元素中引用样式，例如：

<div style="font-size:14px;color:#FF0000;">
	在这里直接引用内联样式
</div>

2. 内部样式引用

在html头部放入style样式，例如：

<style type="text/css">
    div{
        color: red;
        border: 1px solid black;
    }
</style>

3. 外联样式引用

外联样式也称外部样式，实际引用样式时最常用此种方式，例如：

<link rel="stylesheet" href="./css/frist.css">
  <!-- 其中路径中的frist.css为外部css文件 -->

注意：外联样式常引用在头部，可在网页打开时快速加载样式。

二、常用选择器

1. 类选择器

类(class)选择器是由点号“.”加上类名就组成了一个类选择器。

css文件内编写类选择器：

.right {
  width: 100px;
  height: 100px;
  background-color: #FF0000;
}

html文件中引用类选择器：

<div class="right"></div>

2. ID选择器

ID选择器和类选择器用法类似，但一个元素只能拥有一个唯一的ID属性，一个ID值在一个HTML文档中只能出现一次。

css文件内编写ID选择器：

#right {
  width: 100px;
  height: 100px;
  background-color: #FF0000;
}

html文件中引用ID选择器：

<div id="right"></div>

3. 标签选择器

通过标签名匹配，匹配文档中所有为此标签名的元素

css文件内编写标签选择器：

p {
  height: 20px;
  line-height: 20px;
  color: red;
}

html文件中匹配对应标签选择器：

<p>我是吴彦祖</p>

4. 通配选择器

通配选择器使用一个星号 * 表示， * 会匹配所有元素。

css文件内编写通配选择器：

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

5. 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代。

css文件内编写后代选择器：

 .father .child {
  color: #006600;
}

6. 子代选择器

子代选择器也称为直接子元素选择器；子代选择器与后代选择器有些区别，子代选择器作用于子元素的第一个后代，而后代选择器是作用于所有子后代元素。

css文件内编写子代选择器：

 .father > .child {
  color: #006600;
}

注意:子选择器是通过“>”进行选择

7. 并列选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

css文件内编写并列选择器：

.first, .second, .third {
  background-color: blue;
}

---

如果以上知识对你有用欢迎点赞和关注~ 谢谢~

---