Magicdawn
0%

CSS权威指南(1)

发表于 分类于

选择器

属性选择器

选择器 说明
a[href] 表示有 href 属性的 a 标签
a[href=”xxx”] 属性名称&值写在方括号中
a[href ~= “abc”] 根据属性值中出现的单词,如 class=”abc def” ~=abc
a[href *= “abc”] 出现的子串,class=”abcdef”, *="abc"
a[href ^= “abc”] 属性值以abc开头
a[href $= “abc”] 属性值以``abc 结尾
a[lang |= “en”] 属性值以en 或者 en- 开头皆满足条件

注意 ~= 和 *= 之间的差别,~=是先 split 一下,看是否包含,而*=则是看是否包含子串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  div
  {
    margin:10px;
  }
  *[class*="abc"]
  {
    outline:1px solid red;
  }

  *[class~="abc"]
  {
    color : #ff0000;
  }
</style>
<div class="abc def">abc def</div>
<div class="abcdef">abcdef</div>

效果:

伪类/伪元素

关于 a 标签的 :link :hover : focus :visited在 CSS 彻底研究中已经研究过了,这里补充:
顺序:

  1. a,a:visited 先设置正常样式和已访问过的样式
  2. 再设置 focus hover 样式

因为连接分两种,已经访问过的 和 未访问过的,如果后写 a,a:visited 这个规则会匹配所有的 a 标签,也就是覆盖前面写的hover/focus效果,导致没有hover/focus效果.

:first-child伪类
注意 :

1
2
3
p:first-child {
  //bla bla
}

选择的不是 p 下面的第一个子元素,而是 : 作为第一个子元素的p,所以说它是伪类,选择的还是 p 标签.

伪元素选择器 :能够在文档中插入假想的元素

  1. :first-letter : 块级元素,首字母的样式
  2. :first-line : 块级元素,第一行
  3. :before/:after : 设置一个元素之前/之后的 样式,内容用content : "abcd";来表示

层叠/覆盖 规则

对一条 CSS 规则的特殊性,用一个(int,int,int,int)的元组来表示,如(0,1,0,0).

  1. 对于行内样式,即<div style="color:red;"></div>之类的,加(1,0,0,0)
  2. 对于#id选择器,加(0,1,0,0)
  3. 对于.class|[href="abc"]|a:hover 即类选择器/属性选择器/伪类选择器,加(0,0,1,0),
  4. 对于各元素/伪元素,加(0,0,0,1)
  5. 对于 结合符> + ,通配符*,对特殊性没有任何贡献

运用上述规则之后,比较大小即可,前面算高位,冲突时按特殊性层叠.
特殊 :

  • class = "a b",两个 class 冲突时,取 a 的样式
  • 特殊性相同时,冲突 后者 覆盖 前者
    如
1
2
h1 { color : yellow; }
h1 { color : red; }

这两个的特殊性相同,后面的覆盖前面的,因此结果为 : color :red;

继承

概念 : 样式不仅应用到指定的元素,还会应用到它的后代元素.

  • 某些属性不能被继承,如盒模型的 padding/margin/border/background
  • 继承的值没有特殊性,比内建样式表 和 通配符选择器*{ ... }还弱,所谓内建样式表,指那些默认的样式,如 a 标签默认颜色为 blue,是浏览器的内建样式表.