CSS 选择器-白红宇

CSS 选择器

阅读量：3956 次

发布时间：2019-05-24

本文共 2920 字，大约阅读时间需要 9 分钟。

文章目录

1. 基本选择器

1.1 标签选择器

给指定的标签加样式，语法如下：

[标签名] {
       /* 样式 */}

p {
       color: red;}

1.2 ID 选择器

给指定 ID 的标签添加样式，语法如下：

#[id] {
       /* 样式 */}

#abc {
       height: 20px;    width: 20px;    background-color: black;}

1.3 类选择器

类选择器以标签的 class 属性值作为选择对象，语法如下：

.[类名] {
       /* 样式 */}

.abc {
       height: 20px;    width: 20px;    background-color: black;}

1.4 通配选择器

通配选择器选择的是页面所有内容，语法如下：

* {
       /* 样式 */}

一般用于清除默认样式

* {
       margin: 0;    padding: 0;}

2. 复合选择器

2.1 指定选择器

选择同时满足多个选择器的元素，可以理解为交集概念，语法如下：

[选择器1][选择器2]...[选择器n] {
       /* 样式 */}

古诗词

黄河之水天上来，奔流到海不复回。

山有木兮木有枝，心悦君兮君不知。

p.cls[title=将进酒] {
       background-color: brown;}

注意，选择器之间不留空格，只会选择满足所有选择器的对象。

2.2 包含选择器

选择分别满足多个选择器的对象，是一个并集的概念，语法如下：

[选择器1],[选择器2],[选择器n] {
       /* 样式 */}

凑热闹

古诗词

黄河之水天上来，奔流到海不复回。

山有木兮木有枝，心悦君兮君不知。

div,.cls,#将进酒,[title=越人歌] {
       background-color: brown;}

3. 关系选择器

关系选择器也属于复合选择器。

3.1 子元素选择器

从第一个选择器选择的父对象中选择子对象，语法如下：

[父选择器]>[子选择器] {
       /* 样式 */}

div>p {
       color: red;}

只要是满足选择器的父子，无论在哪，都会被选中。

3.2 相邻选择器

相邻选择器，从第一个选择器选择的对象中，用第二个选择器选择下一个相邻的元素，语法如下：

[第一个选择器]+[第二个选择器] {
       /* 样式 */}

标题

段落1

段落2

段落3

h2+p {
    color: red; }    /* 选中段落一 */h2+.p1 {
    color: red; }  /* 选中段落一 */h2+.p2 {
    color: red; }  /* 无选中 */h2+span{
    color: red;}   /* 无选中 */

注意：相邻选择器只能选择相邻元素，满足弟选择器才会被选中。

3.3 兄弟选择器

兄弟选择器，从兄选择器选择的对象中，用弟选择器选出所有的弟弟元素，语法如下：

[兄选择器]~[弟选择器] {
       /* 样式 */}

标题

段落1

段落2

段落3

h2~p {
    color: royalblue; }  /* h2 下面的所有 p 元素被选中 */h2~span {
    color: red; }     /* h2 下面的所有 span 元素被选中 */

3.4 后代选择器

后代选择器是从父元素中选出所有后代元素，语法如下：

[祖先选择器][空格][后代选择器] {
       /* 样式 */}

#com p {
       color: red;}

注意与指定选择器区分，指定选择器的选择器之间没有空格，后代选择器有空格。

4. 属性选择器

属性选择器根据标签的属性或属性与值进行选择，语法如下：

[属性名] {
   }          /* 选择有指定属性的元素 */[属性名=属性值]{
   }    /* 匹配属性与属性值 */[属性名^=属性值]{
   }   /* 前缀匹配 */[属性名$=属性值]{
   }   /* 后缀匹配 */[属性名*=属性值]{
   }   /* 模糊匹配 */

黄河之水天上来，奔流到海不复回。

山有木兮木有枝，心悦君兮君不知。

人间四月芳菲尽，山寺桃花始盛开。

海上生明月，天涯共此时。

江山如画，一时多少豪杰。

[title="将进酒"] {
    color: red; }[title^="越"] {
    color: orange; }[title$="花"] {
    color: blue; }[title*="怀"] {
    color: purple; }

5. 伪选择器

伪选择器包括伪类和伪元素，语法如下：

[选择器][伪元素或伪类名] {
       /* 样式 */}

段落

p:hover {
       color: red;}

使用时查手册：

6. 样式继承

为一个祖先元素设置样式，可以自动被其子元素继承，利用继承可以将一些通用的样式，统一设置到祖先元素上，这样只需要设置一次，让所有后代元素都拥有该样式。

需要注意的是，不是所有的样式都会被继承，如背景相关的、布局相关的样式不会被继承。

7. 选择器权重

不同的选择器选择相同的元素，并且对相同的样式设置不同的值时，会有样式冲突。发生样式冲突时，应用哪个值由选择器的权重（优先级）决定。

选择器的权重：

样式	优先级
内联样式	1,0,0,0
id 选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级
属性值后面加 !important;	最高优先级