关于css: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/…