CSS 选择器详解

工具与资源中心
帮助开发者更加高效的工作，提供围绕开发者全生命周期的工具与资源
https://developer.aliyun.com/...

一、CSS 选择器介绍

简介

CSS选择器是一种用于匹配HTML文档中元素的模式。关联的样式规则将应用于与选择器模式匹配的元素。
选择器是CSS最重要的方面之一，因为它们用于选择网页上的元素，以便可以设置样式。您可以通过多种方式定义选择器。

二、通用选择器

1.简介

通用选择器（用*星号或星号表示）与页面上的每个单个元素匹配。如果目标元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。

2.案例

* {
    margin: 0;
    padding: 0;
  }

三、元素类型选择器

1.简介

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

2.案例

p {
color: blue;
  }

四、ID选择器

1.简介

id选择器用于为单个或唯一元素定义样式规则。
ID选择器的定义是一个井号（#），后跟ID值。

2.案例

#p{
    color: red;}

五、class类选择器

1.简介

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。
用一个句号（.）紧随其后的类值定义类选择器。

2.案例

.blue {
color: blue;
  }

六、后代选择器

1.简介

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

2.案例

    ul.menu li a {
    text-decoration: none;
    }
    h1 em {
    color: green;
    }

七、子选择器

1.简介

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）隔开。例如，您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

2.案例

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

八、相邻兄弟选择器

1.简介

相邻的同级选择器可用于选择同级元素。该选择器的语法类似于：E1 + E2，其中E2是选择器的目标。

2.案例

    h1 + p {
    color: blue;
    font-size: 18px;
    }
    ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }

九、通用兄弟选择器

1.简介

通用的同级选择器与相邻的同级选择器（E1 + E2）类似，但不太严格。通用的同级选择器由两个简单的选择器组成，这些选择器由波浪号（∼）字符分隔。可以这样写：E1〜E2，其中E2是选择器的目标。

2.案例

    h1 ∼ p {
    color: blue;
    font-size: 18px;
    }
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
    }

十、分组选择器

1.简介

样式表中的多个选择器通常共享相同的样式规则声明。您可以将它们分组为一个逗号分隔的列表，以最大程度地减少样式表中的代码。它还可以防止您一遍又一遍地重复相同的样式规则。

2.案例

h1 {
    font-size: 36px;
    font-weight: normal;
   }
h2 {
    font-size: 28px;
    font-weight: normal;
   }
h3 {
    font-size: 22px;
    font-weight: normal;
   }

本文转自：https://developer.aliyun.com/...