CSS 学习笔记之CSS Selector

简介

CSS Selector（选择器）是CSS中的一项重要概念，它指定了CSS规则将应用到哪些元素上。理解选择器是深入了解CSS的首要任务。

常用选择器

元素选择器

元素选择器是用于选择HTML元素的最基本选择器，它指定了CSS规则将应用于HTML文档中所有指定类型的元素。

/* 例子1：选择所有p元素 */
p {
  color: red;
}

/* 例子2：选择所有h2元素 */
h2 {
  font-size: 24px;
}

类选择器

类选择器是指定CSS规则将应用到HTML元素的class属性上。

/* 例子1：选择class为title的元素 */
.title {
  color: blue;
}

/* 例子2：选择class为btn的元素 */
.btn {
  background-color: green;
}

ID选择器

ID选择器是指定CSS规则将应用到HTML元素的id属性上。

/* 例子1：选择id为logo的元素 */
#logo {
  width: 200px;
}

/* 例子2：选择id为nav的元素 */
#nav {
  height: 50px;
}

属性选择器

属性选择器是根据HTML元素的属性来选择对应的元素。

/* 例子1：选择所有href属性值包含"example"字样的a元素 */
a[href*="example"] {
  color: purple;
}

/* 例子2：选择所有type属性值为"text"的input元素 */
input[type="text"] {
  border: 1px solid gray;
}

后代选择器

后代选择器是指定CSS规则将应用到HTML元素的后代元素上，用空格分隔。

/* 例子1：选择所有p元素内的em元素 */
p em {
  font-style: italic;
}

/* 例子2：选择所有div元素内的p元素 */
div p {
  margin: 10px;
}

子选择器

子选择器是指定CSS规则将应用到HTML元素的直接子元素上，用">"分隔。

/* 例子1：选择所有ul元素下的li元素 */
ul > li {
  list-style: none;
}

/* 例子2：选择所有nav元素下的a元素 */
nav > a {
  color: gray;
}

相邻兄弟选择器

相邻兄弟选择器是指定CSS规则将应用到HTML元素后面第一个兄弟元素上，用"+"分隔。

/* 例子1：选择所有h2元素后面第一个span元素 */
h2 + span {
  font-weight: bold;
}

/* 例子2：选择所有p元素后面第一个a元素 */
p + a {
  text-decoration: underline;
}

通用选择器

通用选择器是指定CSS规则将应用到所有HTML元素上，用"*"表示。

/* 例子1：应用到所有HTML元素 */
* {
  margin: 0;
  padding: 0;
}

/* 例子2：应用到所有HTML元素 */
* {
  box-sizing: border-box;
}

结语

以上是CSS Selector的完整攻略，理解这些选择器是CSS编写的基础技能。掌握好CSS Selector，你就能更加自如地创建漂亮的网页了。