search

sweeetcc / blog

Personal blog powered by Github issues
2 stars 0 forks source link

CSS 选择器总结 #12

Open sweeetcc opened 8 years ago

sweeetcc commented 8 years ago
css

为什么要总结CSS选择器？

写 CSS 越久，特别是用了更多的 CSS3 特性，越是发觉 CSS 的强大之处。尤其是最近用 React 之类的框架越来越频繁，因为是数据变化驱动界面变动，做动画、效果、交互时很少去考虑用 DOM 操作去实现，而是更多的结合 CSS 去增减 class 等去实现。

另外一方面，jQuery 等库中选择 DOM 元素等时，选择器的用法和 CSS 中的选择器基本一致，所以这里总结一下 CSS 的选择器，一举多得。

CSS 选择器分类

一、 基本选择器：

1. 标签选择器（element）

匹配所有使用 element 标签的元素。

2. 类选择器（class）

匹配所有 class 属性中包含 classname 的选择器。

3. ID 选择器

匹配所有 id 属性为 idname 的元素。

二、属性选择器：

属性选择器匹配的属性名或属性值。

属性值列表：一个以空格作为分隔的值列表。

  1. [attr] 匹配带有 attr 属性名的元素
  2. [attr=value] 匹配带有 attr 属性名，并且属性值为 value 的元素
  3. [attr~=value] 匹配带有 attr 属性名，并且属性值列表中至少有一个值为 value
  4. [attr|=value] 匹配带有 attr 属性名，并且属性值列表中至少一个值为 value 或者以 'value-' 开头的元素
  5. [attr^=value] 匹配带有 attr 属性名，并且以 value 开头的元素
  6. [attr$=value] 匹配带有 attr 属性名，并且以 value 结尾的元素
  7. [attr*=value] 匹配带有 attr 属性名，并且包含 value 的元素
  8. [attr operator value i] 在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母）

    三、伪类选择器：

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

四、组合选择器：

  1. A E：元素A的任一后代元素E
  2. A > E： 元素A的任一子元素E(也就是直系后代)
  3. B + E： 元素B的任一下一个兄弟元素E
  4. B ~ E： B元素后面的拥有共同父元素的兄弟元素E

    CSS 选择器优先级

选择器的优先级是分配给指定 CSS 声明的一个权重，它由匹配的选择器中每一种选择器类型的数值决定。当同一个元素有多个声明的时候，优先级才会有意义。

一、优先级列表：

注：通用选择器（universal selector）(*),组合符合（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 不会影响优先级（但是，在 :not() 内部声明的选择器是会影响优先级的）。

1. 优先级为 1 (0, 0, 0, 1)

  • 元素(类型)选择器（type selectors）（例如：h1）
  • 伪元素选择器（pseudo-elements）（例如：:before）

    2. 优先级为 10 (0, 0, 1, 0)

  • 类选择器（class selectors） (例如：.example)
  • 属性选择器（attributes selectors）（例如：[type="radio"]）
  • 伪类选择器（pseudo-classes）（例如：:hover）

    3. 优先级为 100 (0, 1, 0, 0)

  • ID选择器（例如：#example）

    4. 优先级为 1000 (1, 0, 0, 0)

  • 内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。

那么，就有如下图所示的一个顺序：

css-specificity

二、一些例外：

例如，有一段 html 为：

<p id="foo">I am a sample text.</p>

在其上应用 css：

* #foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}

最终结果为：

css-result

从以上结果可以看出，尽管选择器*[id="foo"] 选择了一个ID，但是它还是作为一个属性选择器来计算自身的优先级。虽然匹配了相同的元素，但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。

无视 DOM 树中的距离

例如有一段 html：

<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>

在其上应用 css：

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

会被渲染成：

css-result2

也就是说，虽然样式表 body h1 中的 body 比另一个中的 html 距离元素更近，但是 body html 都被同等地当做标签选择器来对待，那么自然会以后一个样式表为准。

举几个例子：

demo1

计算结果为：

result1

demo2

计算结果为：

result2

demo3

计算结果为：

result3

sweeetcc commented 8 years ago

伪类选择器有很多好玩的东西，有人用一个 div 做出各种炫酷的画面，例如：A single div SingleDivProject 所以伪类选择器还有更多可以总结的，这里先留坑待填。