CSS – W3Schools 学习笔记 (2)

CSS Combinators

Link to W3Schools

body p = body 里的所有 p descendant

body > p = body first child layer 所有的 p

div + p = div next p (must be next element and only get 1, 如果 next 是 text node or comment is ok)

div ~ p = div next all p (可以有间隔, get many)

CSS Pseudo-classes

Link to W3Schools

p:first-child = p element 同时它是某个 element 的 first child

CSS Pseudo-elements

Link to W3Schools

伪元素用双分号 ::

比较常看到的使用场景, 第一个字特别大

p::first-letter {

  color: #ff0000;

  font-size: xx-large;

}

前 / 后插入图片

h1::before {

  content: url(smiley.gif);

}

user selection

::selection {

  color: red;

  background: yellow;

}

不是所有 element 都可以插入伪元素的, 比如 img 就不行.

参考: stackoverflow – Does :before not work on img elements?

CSS Image Sprites

Link to W3Schools

以前常用于把多个 icon 放到 1 个 image 里.

通过 background-image + position 调出图片然后显示某个区域而已

CSS Attribute Selectors

Link to W3Schools

[target] = 有 attribute "target"

[target="_blank"] = 有 attribute "target" 同时 attribute value 是 "_blank"

[title~="flower"] = attribute "title" 同时 value contains a space-separated list of "flower" (e.g. "flower abc", "abc flower", not ok: "abc-flower", "flowerAbc")

[title*="flower"] = attribute "title" 同时 value contains "flower" (没有 space-separated 概念)

[class|="top"] = attribute "class" 同时 value starts with top (必须是完整字, 或者 hypen, e.g. "top", "top-abc", "top-xyz", not ok: "topcontent,", "topAbc") 注: 所以 class 最好还是用 hypen 不要用 camelcase 嘛.

[class^="top"] = attribute "class" 同时 value starts with top 了 "不需要完整字"

[class$="test"] = attribute "class" 同时 ends with test "不需要完整字"

*, ^, $, contains, starts with, ends with 和正则一样, 很好记.

~, | contains, starts with 比较怪.

CSS Forms

Link to W3Schools

input + icon

用 background-image + padding 来做的

去掉 textarea resize

{ resize: none; }

CSS Counters

Link to W3Schools

可以用 CSS 来做 index

CSS 长这样

CSS Units

Link to W3Schools

Absolute Lengths

px, cm, mm

in (inch) 1in = 96px = 2.54cm (电脑 dpi 的情况)

pt (point) 1 pt = 1/72 inch

pc (1pc = 12 pt)

Relative Lengths

em, rem, %,

vw, vh (对应 viewport 的 percentage, 1vw = 1% of viewport width)

冷门的: ex, ch, vmin, vmax

Default Unit

没有 default unit 的, 除了 0 可以不用放 unit, 其它都得放. 参考: CSS Default Units

CSS Specificity

Link to W3Schools

CSS 的优先级是有点复杂的. (CSS order logic)

它有一个跑分机制

4 个 Levels:

Inline styles,

IDs, Classes,

attributes and pseudo-classes,

Elements and pseudo-elements

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.

如果同分那就下面覆盖上面.

例子: 一个 div 有 id 也有 class

<div id="dada" class="tata">asdd</div>

CSS

#dada {

  background-color: green;

}

.tata {

  background-color: red;

}

最终结果是 green, 虽然 .tata 在下面, 但是由于 id add 100, class 只是 add 10, 所以 id 分数比较高.

虽然说 add 10 for each attribute, 按理说我只要有超过 10 个 attribute 就可以超越 id 的 100 分, 但我测试了没有.

所以它的累加只是在平级的时候可以区分, 不是拿来越级的.

!important

#myid {

  background-color: blue !important;

}

important 就无视跑分了, 但是如果 2 个 !important 的话就依然看分数

CSS Math Functions

calc, max, min

常用方式

width: calc(100% - 100px);

width: max(50%, 300px);