css - Selectors

css 选择器规定了 css 规则会被应用到哪些元素上。

通用选择器

通用选择器选择命名空间所有的元素，如果未提供命名空间，则选择文档所有元素。

* {
  margin: 0;
  padding: 0;
}

#app * {
  box-sizing: border-box;
}

ID 选择器

ID 选择器选择具有指定 ID 属性的元素。

#app {
  background: #fff;
}

类选择器

类选择器选择具有特定名称的元素，如果未提供类名，则选择所有元素。

.app {
  color: red;
}

属性选择器

属性选择器选择具有指定属性的元素。

input[type='text'] {
  border: 1px solid #ccc;
}

元素选择器

元素选择器选择具有指定名称的元素。

p {
  color: red;
}

子元素选择器

子元素选择器选择具有指定名称的元素的所有子元素。

#app > a {
  color: red;
}

伪类选择器

伪类选择器选择具有指定名称的元素，如果未提供伪类名，则选择所有元素。

.app:hover {
  color: red;
}
.app:after {
  content: '.';
}

组合选择器

组合选择器选择具有指定名称的元素，如果未提供组合选择器，则选择所有元素。

/*选择命名空间所有的div、p*/
div,
p {
  color: red;
}
/*选择命名空间所有的 li*/
ul > li {
  color: red;
}
/*选择临近的p*/
div + p {
  color: red;
}