CSS学习内容介绍

天才球员芝麻圆
153 阅读5分钟

我正在参加「掘金·启航计划」

开始学习CSS的笔记，做了一些补充后，希望可以帮助到入门的兄弟。 主要内容是对CSS学习内容的指引，以及常规外对CSS的认知方式，还有就是新手容易混乱的选择器则是用了产生式描述（利好编译原理课程扎实者😂）

css总论

css2.1语法标准文档地址：

At-rule

At-rule文档地址：（加粗为重要内容）

普通规则

css规则结构

  • 选择器
  • 声明
    • key
    • value

css规则标准

  1. selector
  2. key
  3. value

css选择器

产生式写法

selectors_group
  : selector [ COMMA S* selector ]*
  ;

selector
  : simple_selector_sequence [ combinator simple_selector_sequence ]*
  ;

combinator
  /* combinators can be surrounded by whitespace */
  : PLUS S* | GREATER S* | TILDE S* | S+
  ;

simple_selector_sequence
  : [ type_selector | universal ]//类型|*星号
    [ HASH | class | attrib | pseudo | negation ]*
  | [ HASH | class | attrib | pseudo | negation ]+
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo
  /* '::' starts a pseudo-element, ':' a pseudo-class */
  /* Exceptions: :first-line, :first-letter, :before and :after. */
  /* Note that pseudo-elements are restricted to one per selector and */
  /* occur only in the last simple_selector_sequence. */
  : ':' ':'? [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* expression ')'
  ;

expression
  /* In CSS3, the expressions are identifiers, strings, */
  /* or of the form "an+b" */
  : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  ;

negation
  : NOT S* negation_arg S* ')'
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo
  ;

selector level 4新增：

更多的伪类、not有更强大的功能、css variables

四种函数：

  • calc：常用，计算值，可用css变量
  • max
  • min
  • clamp：裁剪

简单选择器

  1. *：通配符
  2. div svg|a：类型选择器，匹配标签的tagName属性
    • HTML
    • svg，使用|分隔开，|被称为命名空间分隔符（其实仅重复a标签）
    • MathML
  3. .cls：空白分隔符可指定多个class名
  4. #id
  5. [attr=value]：包含3、4，前面加波浪线开头~：像class一样，拿空格分隔值的序列；前面加单竖线开头|：属性以此开头
  6. ：hover：伪类（可带函数），多用于用户交互
  7. ::before：伪元素，可用单冒号，为了规范和容易区分，用使用::

复合选择器

combined selector，写作<simpleSlector><simpleSlector>……

多个简单选择器的连写，表示**“与”**关系，并要求type selector或者*写在最前。

复杂选择器

使用连接符连接复合选择器形成：

  1. <combinedSelector><sp><combinedSelector>：子孙选择器
  2. <combinedSelector>><combinedSelector>：父子选择器
  3. <combinedSelector>~<combinedSelector>：相邻前一个
  4. <combinedSelector>+<combinedSelector>：相邻后一个
  5. <combinedSelector>||<combinedSelector>：做表格时选中一列（level 4新增）
  6. <combinedSelector>\，<combinedSelector>：表示或关系

选择器优先级计算

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

下面列表中，选择器类型的优先级是递增的：

  1. 类型选择器（例如，h1）和伪元素（例如，::before）
  2. 类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
  3. ID 选择器（例如，#example）。

通配选择符（universal selector）（*）关系选择符（combinators）（+, >, ~, ' ', ||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。

一句以上权重得到四元数组[a,b,c,d]，利用一个足够大的常量N（一般是256的倍数以占满字节防止浪费）作计算，优先级的值最后写作：

Specificity=a∗N3+b∗N2+c∗N1+d∗N0Specificity=a*N^3+b*N^2+c*N^1+d*N^0

伪类

根据用途主要分作三类：

  1. 链接/行为：

    • ：any-link：所有超链接

    • ：link：所有未访问的超链接

    • ：link:visited：已访问的超链接

      当使用了link和visited后，无法继续更改元素除文字颜色之外的属性了

      原因：使用layout相关属性后，例如修改visited的尺寸，这样会影响排版，如此，通过js即可获取链接是否被visited，此时，便可以获取用户访问网站的行为，如此是违背浏览器的安全性的。

    • ：hover：悬停

    • ：active：激活状态

    • ：focus：聚焦（新有focus-within，经常在搜索框使用）

    • ：target：链接到当前目标，给作为锚点的a标签使用

  2. 树结构：

    • 1：empty：是否有子元素

    • ：nth-child()：第n个子元素，可使用表达式，但不建议过于复杂

    • 2：nth-last-child()：倒数第n个

    • ：first-child(),3：last-child(),4：only-child()

      1234都违反了回溯原则，性能都比较差，134影响不大。

  3. 逻辑型（现仅not可用）

    • ::not：仅支持复合选择器，表示非
    • ::where
    • ::has

伪元素

分为两组：

会形成不存在的元素，使用后，declaration中可添加content属性：

  • ::before：在元素内容前插入
  • ::after：在元素内容后插入

选择元素：

  • ::first-line：选中第一行，可用属性有：
    • font
    • color
    • background
    • Word-spacing
    • letter-spaccing
    • Text-decoration
    • text-transform
    • line-height
  • ::first-letter：选中第一个字母，可用属性有：
    • font
    • color
    • background
    • Word-spacing
    • letter-spaccing
    • Text-decoration
    • text-transform
    • line-height
    • float
    • Vertical-align
    • 盒模型:margin, padding, border

补充

css变量

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

写法

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
avatar
文章
阅读
粉丝