CSS 选择器基础

约定：本文使用 jade 模板语言来表示简化的html结构
没接触过 jade 的同学，请看下面的小科普：

1
2
3
4
5
<div class="father">
  <span id="child">hello jade!</span>
  <img src="jade.jpg"/>
</div>
<! -- a comment -->

上面的html结构可用 jade 表示如下:

1
2
3
4
div.father
  span#child hello jade!
  img(src="jade.jpg")
// a comment

即:

  1. class用.表示
  2. id用#表示
  3. 属性值写在小括号里
  4. 用两个空格缩进来表示元素之间的层级关系
  5. // 表示注释

选择器种类

1.元素选择器

直接写元素名即可

1
2
3
4
/* css code */
html {
  font-size: 100px;
}

2.类选择器

以.开头

1
2
// jade code
div.white.green-bg
1
2
3
4
5
6
7
8
/* css code */
.white {
  color: white;
}

.green-bg {
  background: green;
}

因为示例div带有两个类，因此还可以使用多个类选择,注意多个类之间不能有空格，不然就变成后代选择器了

1
2
3
4
/* css code */
.white.green-bg {
  border: 1px outset black;
}

3. id选择器

以#开头

1
2
// jade code
span#child

1
2
3
4
/* css code */
#child {
  display: inline-block;
}

以上三个元素器其实是可以组合起来用的，如：

1
2
3
4
p.class, 
p#id {
  /* some style */
}

这样的写法并不出错，但若非必要，并不推荐，理由是：

1. 浏览器根据css代码查找元素是从右到左查找的，也即先找到类为.class的元素，再看它是否为p元素。因此上述写法会增加浏览器的查找负担。

2.类/id选择器的速度都比元素选择器要快，所以如果可以使用类/id选择器来选择元素的话，何必再加多个元素选择，画蛇添足呢

3.选择不要“多得过分”。`html  body header nav li a ` 像这样的选择器，看起来好像十分精确，但明显html与body是多余的，这样会降低浏览器查找效率的。一般而言，三四个类/元素的组合最佳。

4.实战表明，id选择器若非"情非得已"还是少用,多用类选择器与元素选择器(具体情况具体分析，记住id必须唯一)

4.属性选择器

使用[] 括号里面填写属性值，常用的有两种：

1
2
3
4
5
6
7
//jade code

img(alt="null src")
img(src="../images/demo.jpg" alt="have src")

input(placeholder="不指定type，默认为text")
input(type="email")
1
2
3
4
5
6
7
8
/* css code */
img[src] {
  /* 选择src属性不为空的img元素,即第2个img元素 */
}

inpnt[type="text"] {
  /* 选择type为text的input元素,上面两个input都选不到 */
}

注意：
1.没有属性不等于某值的选择器,即 input[type!=”text”] 是行不通的

2.元素不指定属性则属性选择器选不到,故想选择
input[type="text"] 时一定要显示指定input的type

3.input[type="text phone"] 这种写法是行不通的,只能老老实实地写
input[type="text"], input[type="phone"] { }

5.根据文档结构选择

考虑下列文档结构

//jade code
body
  header
    ul
      li
        a(href="index.html") first link
      li
        a(href="about.html") second link 
  a#body-link(href="body.html") link in body     
  div#before-footer 
  footer
    a(href="other.html") link in footer

5.1 选择后代

选择器之间带空格

1
2
3
4
5
6
body a {
  /* 
    选择 body 元素下的所有 a 元素，不管嵌套有多深
    注意到,这里是有空格的,同理,如果类名之前也带空格,那也是选择后代
  */
}

5.2 选择孩子

使用 > 

1
2
3
4
5
6
body > a {
  /*
    选择 body 元素的直接子代 a 元素
    只有 #body-link 被选中
  */
}

5.3 选择相邻的兄弟

使用 + 选择下一个元素

1
2
3
4
5
6
#before-footer + footer {
 /* 
   选择 #before-footer 的下一个 footer 元素,
   也即示例结构中唯一的footer元素被选中
 */
}

5.4 选择后面所有的兄弟

使用 ~
如果元素之间间隔太远，使用 + 选择不到，可以使用 ~

1
2
3
4
5
6
#body-link ~ footer {
  /*
    选择 #body-link 后面所有的 footer 兄弟元素，
    也即示例结构中唯一的footer元素被选中
  */
}

注意：
没有选择前面的兄弟的选择器

6.特殊选择器

特殊选择器分为伪类与伪元素。用于给文档元素添加特殊效果,增强表现力。
规范而言：
一个冒号开头的是伪类
两个冒号开头的是伪元素

6.1 伪类

伪类一般与行为/状态有关。可以认为是CSS选择器内置的类，与开发人员自定义的类区分开来(个人观点,帮助理解)

常用伪类

1
2
3
4
5
6
:hover /*鼠标悬停时*/
:active 鼠标按下去时(松开即没有)
:focus 获得焦点时
:first-child 某某元素作为其父元素的第一个子元素 
:last-child 某某元素作为其父元素的最后一个子元素
:nth-child(n) 某某元素作为其父元素的第n个子元素

把:first-child讲清楚，这个很容易被误解
考虑以下dom结构

1
2
3
4
5
//jade code
article
  p#p1
  p#p2
  p#p3

则 p:first-child 指的是#p1,
因为它意为：选择p元素，它是属于其父元素的第一个子元素

6.2 伪元素

伪元素因不存在于HTML文档中，故称为伪元素，与真正的元素区分开来

常用伪元素

::before ::after

注意：
1.以上两种伪元素在使用时，必须设置content属性，即使是空字符串 content:’’;也可以，否则是不会显示出来的
2.伪元素的初始位置是存在于真正的元素边框内部的

选择器权重

当出现多个选择器，或在使用UI框架想覆盖框架的样式时，选择器权重的知识成为关键。

1.特殊性

特殊性分为四个等级，越在前面就越高,当规则冲突时，特殊性最高的选择器胜出。

  1. 内联样式: 1,0,0,0
  2. ID选择器: 0,1,0,0
  3. 类选择/属性选择/伪类: 0,0,1,0
  4. 元素选择器/伪元素: 0,0,0,1
    另: 结合符(> + ~)/通配符(*)不增加权重

来看一些例子帮助理解(为了直观，CSS代码写成一行，请勿在实践中模仿)：

1
2
3
4
5
6
7
8
9
10
11
h1{color:white;} 0,0,0,1

header h1{color:red;} 0,0,0,2

h1.black{color:black;} 0,0,1,1

div > input[type="text"]{color:green;} 0,0,1,2

#list:hover {color:blue;} 0,1,1,0

div::after(style="color:wheat;") 1,0,0,2

以上例子，越往下，选择器特殊性越高

2.重要声明

难道面对内联样式，不使用js，难道真的无法修改了吗？
不，我们还可以使用重要声明,即在普通声明的结束分号之前加上!important： 

1
span.important
1
2
3
.important{
  color: gray !important;
}

面对普通声明，重要声明总是胜出
重要声明一共有5级,权重由大到小排列如下:
1.读者的重要声明
2.开发人员的重要声明
3.开发人员的正常声明
4.读者的正常声明
5.用户代理的默认样式


3. 继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素
值不会向上传播.
只有一个例外:
body元素的背景样式可以传递到html元素,相应地可以定义画布.

继承的值根本没有特殊性,也即比0还要小.这一点绝不能等闲视之
这到底是什么意思呢?考虑下面的情况：

1
2
div.article.font52
  p.title 标题

根据继承, p 元素继承了div的font52这个类，即字体大小为52px,
但由于使用的框架预设定了样式

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

虽然权重很小，却也比继承的权重要大,因而元素 p的字体大小为14px

这就提醒我们：谨慎地使用通配符,小心地使用元素选择器，还有，不要太相信继承

另：
不能继承的值: 盒子模型(margin,padding,background), border

疑问：
但在实践中，我们会发现，如果设置了父元素的背景颜色，
如果不设置子元素的背景颜色,子元素背景色是与父元素的一致的，这难道不是继承？

使用控制台，查找子元素的样式规则，你的确找到不从父元素中继承的background-color属性。它其实是继承了来自浏览器的默认背景色：transparent(透明)，因而看起来背景色与父元素的背景色一致。但这真不是继承。

4. 层叠

根据上面的知识，现在提出一个问题：
如果特殊性相同的选择器选中了同一个元素，那将会怎样呢？
“层叠样式表”这个名字可能会提供一点提示。CSS所基于的方法通过结合继承与特殊性，让样式层叠到一起的。其规则如下：

  1. 找出作用于给定元素的所有选择器
  2. 按声明重要性排序。声明来源有：开发人员，读者，用户代理(可简单理解为浏览器)默认样式。重要性声明胜出。
  3. 按特殊性排序。特殊性高的胜出。
  4. 按出现选择器出现顺序排序。一个声明出现在文档中越后面，则其权重越大。如果样式表中有导入样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后，也即权重越大。

以上是实践中会用到的CSS基础，希望能对大家有所帮助。

Fork me on GitHub