css-选择器

Posted on   |   In   |  

CSS 基础

CSS: 层叠样式表（Cascading Style Sheets),

层叠表示先前添加的样式会被后面添加的样式覆盖(具体原则后面详述)，
样式用于定义HTML元素在浏览器中的表现形式， 其通常存放在样式表中

CSS 语法

syntax

CSS 规则 由 选择器(selector) 和 声明块(declaration block) 两个部分组成

选择器： 用于从HTML文档中选择需要添加样式的DOM元素
声明块： 由一个或多个声明组成，各个声明之间用 ; 分隔。每个声明是一个key-value对， key为CSS属性，value为该属性的值， key和value之间用 ： 分隔。

样式表 由一系列上述规则组成

CSS选择器

元素选择器

使用 html 元素名作为选择器，(所有html元素的的元素名都可以作为选择器) 例如：

1
2
body { background: gray; }
p { color: red; }

使用了 <body> 或 <p> 元素名作为选择器。他们会影响整个html文档中 <body>的背景色， 和所有<p>元素中的字体颜色

选择器分组

用于将一个 CSS 声明块影响多个不同的元素

1
p, h1 { color: red; } /*所有 <p> 和 h1 标签中的字体颜色为红色 */

在 CSS规则左侧将多个选择器用逗号( , )隔开，告诉浏览器这个两个不同的选择器。逗号不能省略， 如果省略意义就完全不同了。

声明分组

与选择器分组类似，CSS规则的声明也可以分组

1
2
p { font-size: 14px; }
p { color: blue; }

将所有p元素中的字体大小设置为 14px， 颜色为蓝色
这种声明效率底，在实际开发中不使用，会将分组声明合成一个声明

1
p { font-size: 14px; color: blue;}

类选择器和ID选择器

除了用标签名作为元素选择器外，类选择器(class selector)和ID选择器(ID selector) 也是开发过程中常用的选择器

1、类选择器： 用元素的 class 属性作为选择器， 在CSS中，用点号 + 类名 (.class-name) 表示类选择器

  • 类选择器默认作用于拥有对应 class 属性的所有元素， 如下例所示 .warn 中的规则作用于 p 和 span 两个元素， 字体颜色都为蓝色
  • 如果想要将类选择器的样式与元素关联， 可以采用元素名+.+类名的方式构成选择器， 如下例： span.warn, 其对应的规则只影响到了 span 元素， 而p 元素未受影响
  • HTML中， 元素的class 属性可以包含多个值，各个值直接用空格隔开， 假如两个或几个类选择器链接在一起，可以选择仅同时包含这些类名的元素(类名顺序不限), 如下例： .urgent.warn 对应的规则只影响了同时拥有类： urgent 和 warn 的 p 元素 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .warn { color: blue; }
        span.warn { font-size: 20px; }
        .urgent { font-style: italic; }
        .urgent.warn { background: yellow; }
    </style>
    <p class="warn">feifeiyu p</p>
    <span class="warn">feifeiyu span</span>
    <p class="warn urgent">feifeiyu multi-class</p>
    <span class="urgent">feifeiyu single-class</span>

class-selector

2、ID选择器： 用元素的 id 属性作为选择器， 在CSS中， 用 #+id值(#id-value) 表示ID选择器，

1
2
3
4
<style>
    #my-num { color: blue;}
</style>
<p id="my-num">13288888888</p>

与类选择器不同， 标签中的id属性是唯一的，且不可以有多个值， 因此ID选择器不能像类选择器一样结合使用，ID选择器理论上可以更精准的选择对应的元素

注意 浏览器通常不检查HTML标签中 id 属性的唯一性， 意味着如果一个HTML文档中假如存在多个相同的id属性值， 对应的CSS规则可能为这些id值相同的元素添加相同的样式

属性选择器

属性选择器（atrribute selector): 根据元素的属性及属性值来选择对应的元素， 类选择器和ID选择器本质上就是属性值的选择

1、简单属性选择

简单属性选择用于选择有某个属性的元素， 不论该属性是什么值。
简单属性选择器定义：标签名[属性名]，如下所示：有class 属性的 h3 标签， h3[class], 或有 my-name属性的 h3 标签， h3[my-name]

1
2
3
4
5
6
<style>
    h3[class] { color: green; }
    h3[my-name] { font-style: italic; }
</style>
<h3 class="hoop">Hello</h3>
<h3 class="hoop" my-name="fei">Feifeiyu</h4>

attr-selector

2、具体属性值选择

根据特定属性值选择元素, 定义： 标签名[属性名=”属性值”]
例如：选择链接为google.com的 a 标签 a[href=”google.com”]
注意 采用具体属性值选择时， 必须要求属性值与相应标签的属性值完全相同，否则无法生效， 例如： a[href=”baidu”]的样式就无法生效

1
2
3
4
5
6
7
8
9
10
<style>
    a[href="google.com"] {
        text-decoration: none; /*无下划线*/
    }
    a[href="baidu"] {
        text-decoration: none; 
    }
</style>
<a href="//google.com">Google</a>
<a href="//baidu.com">Baidu</a>

attr-selector

3、根据部分属性选择
| 选择器 | 描述 | 例 |
| —- | —- | – |
| [foo~=”bar”] | 选择属性值列表里包含词 “bar” 的所有元素 | p[class~=”warn”] |
| [foo^=”bar”] | 选择属性值以 “bar” 开头的所有元素 | p[href^=”baidu”] |
| [foo$=”bar”] | 选择属性值以 “bar” 结尾的所有元素 | p[href$=”com”] |
| [foo*=”bar”] | 选择属性值中包含子串 “bar” 的所有元素 | p[href*=”du”] |

HTML文档树结构

HTML文档是一种具有层次结构的文档， 可以从 “树” 这种数据结构来形象的理解这种文档结构， 如下图所示
dom-tree
在HTML文档中， 每个元素都有自己的位置， 他要么是别的元素的子元素， 要么是别的元素的父元素， 通常两者兼有之。

1
2
3
4
5
6
7
8
9
10
11
12
<html> 
<head> 
    <title>page title</title> 
</head>
<body>  
    <p>XXX我是一个段落XXX</p>
    <ul>
        <li>google</li>
        <li>baidu</li>
    </ul>
</body>
</html>

根据上例分析:
1、如果一个元素出现在另一个元素的上一层， 则 前者称为后者的父元素， 后者为前者的子元素， 他们之间为 父-子关系

head, body 为 html 元素的 子元素， html 为 head, body 的父元素; body 为 p， ul 元素的父元素， p, ul 为 body 的子元素， 以此类推

2、如果从一个元素到另一个元素需要跨越两级或多级， 他们之间为 祖先-后代 关系

例如： ul, p 为 html 元素的后代， html 为 ul，p 元素的祖先。 li 为 body 和 html 的后代元素， body, html 都为 li 的祖先元素
父子关系为 祖先-后代关系的特例

3、拥有相同父元素的元素， 他们之间为： 兄-弟关系

例如 p, ul 元素相互为兄弟关系， 两个 li 元素之间为兄弟关系， body, head 之间为兄弟关系

后代选择器

后代选择器： 在CSS 规则左边的选择器一端包含两个或多个用空额分隔的选择器， 选择器之间, 左侧的对应的元素必须是右侧的祖先元素，
选择器可以是上面介绍的每一种， 后代选择器可以影响所有后代元素， 包括子元素。
例如： p i 表示 p 元素后代中的任何 i 元素： 从结果上看这条规则可以影响到 p 元素的子元素及后代元素

1
2
3
4
5
6
7
<style>
    p span {color: gray;}  /*p 的子元素 span 颜色为 灰色*/
    p i {color: yellowgreen;} /*p 的后代元素 i 颜色为黄绿*/
    p .school { font-size: 26px; } /* 使用 元素选择器加类选择器混用模式 */
</style>
<p>feifeiyu <span>is my</span><i>nick</i></p>
<p>graduated from <span class="school">NUAA <i> with master degree</i></span></p>

child-selector

子选择器

子选择器： 用于选择一个元素的子元素， 定义：父元素选择器 > 子元素选择器 ( > 称为子结合符)， > 的左右两侧可以有空格，也可以没有，随意。
例如： p > i 规则只会影响到 p 中子元素 i 的样式， 而后代元素为 i 的则无影响。

1
2
3
4
5
<style>
    p > i {color: yellowgreen;} 
</style>
<p>feifeiyu <span>is my</span><i>nick</i></p>
<p>graduated from <span class="school">NUAA <i> with master degree</i></span></p>

child-selector

相邻兄弟元素选择器

兄弟元素选择器： 在同一父元素下， 要选择紧接在一个元素后的兄弟元素，可以使用兄弟选择器, 定义 选择器 + 选择器( + 称为相邻兄弟结合符 )， + 左右两侧可以有无空格随意
例： .list #google + li 选择 id 属性值为 google 元素后面相邻的兄弟元素

1
2
3
4
5
6
7
8
<style>
    .list #google + li {color: brown;}
</style>
<ul class="list">
    <li id="google">Google</li>
    <li>Baidu</li>
    <li>Bing</li>
</ul>

brother-selector

伪类选择器

伪类(pseudo-class)： 一般用于标识已访问和未访问的锚类型， 例如： visited, hover
伪类选择器： 为普通选择器 + 伪类结合的选择器，定义： 选择器：伪类名
例如： 1、常见用法 a:link, 2、结合伪类 a:visited:hover

1
2
3
4
5
6
7
8
<style>
    a:link { color: gray; } /*未访问时状态*/
    a:hover { color: pink;}  /*鼠标指针停留时状态*/
    a:visited { color: blue;} /*访问过后的状态*/
    a:visited:hover {color: red;} /*访问过后的链接，鼠标指针停留 */
</style>
<a href="//google.com">Google</a>
<a href="//Baidu.com">Baidu</a>

pseudo-selector

伪元素选择器

伪元素(pseudo-element): 是插入文档的假想元素, 从而得到某种效果
伪元素选择器： 为普通选择器 + 伪元素结合的选择器， 定义: 与伪类选择器类似， 选择器:伪元素名 or 选择器::伪元素名
例如, :first-letter 段落的首字母， :before, :after 对应元素添加之前之后元素

1
2
3
4
5
6
7
<style>
    .pse-elem:first-letter { font-size: 200%;}
    .bre-aft:before { content: "(" }
    .bre-aft:after { content: ")"}
</style>
<p class="pse-elem">This is a rainy day</p>
<p class="bre-aft"> pseudo element after & berfore </>

pseudo-selector

其他选择器

除以上介绍的常用的选择器， 跟多的选择器请访问： CSS 选择器参考手册

样式继承

样式继承: CSS样式不仅可以应用的到选择器指定的元素， 还会应用的他的后代元素
例如： .inherit1 选择的目标元素为 p 元素， i 作为 p 的子元素继承了 p 元素的样式
CSS 样式声明会沿着DOM树，向下传播到后代元素;但后代元素的样式声明则不能反方向向祖先元素传播

1
2
3
4
5
6
<style>
    .inherit1 { color: blue; }
    .inherit2 { color: yellow; }
</style>
<p class="inherit1">NUAA is short for <i> Nanjing University of Aeronautics and Astronautics</i></p>
<p>NUAA is short for <i class="inherit2"> Nanjing University of Aeronautics and Astronautics</i></p>

inherit
注意一般而言， 大多数框属性无法继承， 例如： 外边距， 内边距， 边框， 背景等。

样式层叠

如果存在两条规则，且这两条规则影响的是同一个DOM元素的同一个样式(例如： 下面的两条规则）， 因此这两条规则形成了冲突， 此时那条规则具有更高的优先级，战胜另一条规则， 例如：
h1 { color: red; }
h2 { color: blue; }
此时就涉及到 CSS 中一个非常重要的概念层叠也是 CSS 命名来源之一。
CSS 层叠样式就是， 通过选择器的特殊性和继承， 让样式层叠在一起， 层叠规则如下：

1、找出声明

找出所有相关CSS声明， 这些声明都能影响到某一个DOM元素
如果两条规则影响同一个DOM元素，但声明不同，则这两条规则同时生效，

1
2
3
4
5
<style>
    p { color: blue; }
    p { font-size: 24px; }
</style>
<p>NUAA is short for Nanjing University of Aeronautics and Astronautics</p>

rule2
如果两条规则影响同一个DOM元素，声明相同，就需要考虑以下规则了

2、按权重和来源排序

标志 !important 的声明权重要高于没有 !important 的声明

1
2
3
4
5
<style>
    p { color: blue !important; }
    p { color: yellow; }
</style>
<p>NUAA is short for Nanjing University of Aeronautics and Astronautics</p>

important
不带 ！important 的声明， 不管写得如何的天花乱坠， 优先级都没有带有 ！important 的声明优先级高, 正因 !important 杀伤范围太大， 在开发过程中不推荐使用

CSS 样式来源一共有三种： 创作人员， 读者， 用户代理

  • 创作人员： 就是页面开发者(即前端开发)编写的样式， 称为创作人员样式
  • 读者： 浏览器用户，如果用户为网页样式添加了个性化配置，这些样式称为读者样式
  • 用户代理： 用户代理是指浏览器本身， 一般浏览器都会为一些元素提供默认样式， 这些样式称为用户代理样式

声明优先级排序
1、读者的带有 ！important 的声明
2、创作人员的带有 ！important 的声明
3、创作人员的正常声明
4、读者的正常声明
5、用户代理的声明

开发过程中一般需要考虑前4级， 任何声明都会胜过用户代理样式。

3、按特殊性排序

特殊性(specificity)： 是指选择器的特殊性， 对于每个跪着，用户代理(浏览器)都会计算选择器的特殊性， 并将特殊性附加到CSS规则的各个声明。
按特殊性对元素给定的所有声明进行排序， 特殊性高的声明优先级高， 在声明特殊性最高的会在所有声明冲突中胜出
特殊性是页面开发中最常用的

特殊性表述

  • 使用内联样式，即在元素 style 属性中添加样式： 加 1,0,0,0
  • 使用元素 ID属性值作为选择器的： 加 0,1,0,0
  • 使用元素的 class属性值、属性(例如：title, type等)、伪类作为选择器： 加 0,0,1,0
  • 使用元素名称， 伪元素 作为选择器： 加 0,0,0,1
  • 使用通配符和结合符( * )作为选择器: 对特殊性没有任何帮助

例子：

  • p { color: red; } /specificity = 0,0,0,1 /
  • p i { color: purple; } /specificity = 0,0,0,2 /
  • .class-a { color: blue; } /specificity = 0,0,1,0 /
  • *.class-a { color: yellow; } /specificity = 0,0,1,0 /
  • p.class-a { color: maroon; } /specificity = 0,0,1,1 /
  • p.class-a i.class-b { color: block; } / specificity = 0,0,2,2 /
  • input[type=”button”] { color: pink; } / specificity = 0,0,1,0 /
  • #id-a { color: silver; } / specificity = 0,1,0,0 /
  • p.class-a i#id-b { color: blue; } / specificity = 0,1,1,2 /

特殊性比较：

先比较最高位， 如果 A 的最高为大于 B 最高为，则 A 胜出; 例如： 0,1,0,0 > 0,0,10,0; 0,1,1,0 > 0,0,0,10;
如果 A, B 的最高为相同， 就比较次高位， 次高位数值高的声明胜出， 以此类推…

1
2
3
4
5
<style>
    p.class-a span.class-b { color: blue; }
    #id-b { color: yellow; }
</style>
<p class="class-a">NUAA is short for <span class="class-b" id="id-b">Nanjing University of Aeronautics and Astronautics</span></p>

specificity
在规则 p.class-a span.class-b { color: blue; } 中， 声明 color 的特殊性为 0，0,2,2
在规则 #id-b { color: blue; } 中， 声明 color 的特殊性为 0，1,0,0, 特殊性高，胜出

内联样式的特殊行比其他规则的声明的特殊性都高， 所有写在 元素 style 中的样式是无法通过 CSS 去修改的 (!important 声明除外)

4、按顺序排序

如果两个规则的 权重， 来源， 特殊性完全相同， 那么在样式表中后出现的声明会胜出

1
2
3
4
<style>
    p { color: blue; color: seagreen;}
</style>
<p class="class-a">NUAA is short for <span class="class-b" id="id-b">Nanjing University of Aeronautics and Astronautics</span></p>

rule4

推荐链接样式顺序 LVHA
因为伪类拥有相同的特殊性， 因此与元素匹配比较时最后一个声明会胜出
在点击链接时会同时生效伪类： ：link, :hover, ：active， 如果将 ：active 放在最后，点击链接时可以获得期望的效果
一般在推荐的链接样式： link-visited-hover-active(LVHA)

1
2
3
4
5
6
7
<style>
    a:link { color: blue; }
    a:visited { color: purple;}
    a:hover { color: green; }
    a:active { color: orange;}
</style>
<a href="//baidu.com" target="_blank">Baidu.com</a>

END