Netherspite

CSS的顶层样式表由两种规则组成的规则列表构成，一种被称为at-rule，另一种是qualified rule，即普通规则。

at规则

@charset

@charset用于提示CSS文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在语法解析阶段前使用，不影响页面上的展示效果。

@charset "utf-8";

@import

@import用于引入一个CSS文件，引入除了@charset规则外的全部内容。

@import "mystyle.css";
@import url("mystyle.css");

除了url和string之外，还支持supports和media query形式。

@media

@media即media query使用的规则，它能够对设备的类型进行一些判断。在media区块内就是普通规则列表。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

@media后面跟的是媒体查询列表，一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，如宽度、高度和颜色等。媒体类型有如下几种：

  • all，所有设备
  • print，适用于在打印预览模式下在屏幕上查看的分页文档
  • screen，适用于屏幕
  • speech，适用于语音合成器

媒体查询还可以使用and、not、，(comma)和only这四个逻辑操作符。and用于合并多个媒体属性或合并媒体属性与媒体类型，逗号分隔效果等同于or。not应用于整个媒体查询，在媒体查询为假时返回真。

@page

@page用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。


@page {
  size: 8.5in 11in;
  margin: 10%;
  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

@counter-style

@counter-style产生一种数据，用于定义列表项的表现。

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

@keyframes

@keyframes产生一种数据，用于定义动画关键帧


@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

@fontface

@fontface用于定义一种字体，可以实现icon font技术。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }

@ support

@support 检查环境的特性，它与 media 比较类似。

@ namespace

@namespace用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。

@ viewport

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替。

普通规则

qualified rule主要由选择器和声明区块构成，声明区块又由属性和值构成。

选择器

选择器都是由空格、大于号、加号、波浪线、双竖线这几个符号结构连接的。只有伪类可以出现在伪元素之后。

简单选择器

  • 类选择器(.myclassname)

  • id选择器(#myid)

  • 元素选择器(div)

  • 通配符选择器( * )

  • 属性选择器(a[rel=”external”])

    • [attr]，直接放入属性名，只要有这个属性就被选中
    • [attr=val]，精确匹配
    • [attr~=vals]，多种匹配，检查一个元素的值是否是若干个值之一，vals是用空格分隔的一个序列，匹配完整的单词
    • [attr|=val]，前缀匹配，检查一个元素是否以val开头，且val是一个独立完整的单词，或用-连接的词串
    • [attr^=val]，属性值以val开头的元素
    • [attr$=val]，属性值以val结尾的元素
    • [attr*=val]，属性值包含val的元素
    <li title="hello world fjornan">第一行</li>
    <li title="hello_world_fjornan">第二行</li>
    <style>
      li[title ~="world"] {}/*匹配到第一行*/
      li[title *="world"] {}/*匹配到第一行和第二行*/
      li[title |="hello"] {}/*匹配到第一行*/
      li[title ^="hello"] {}/*匹配到第一行和第二行*/
    </style>

  • 伪类选择器(a: hover, li:nth-child)

    • 树结构关系伪类选择器

      • :root，树的根元素，一般用html标签选中根元素，随着scoped css和shadow root等场景出现，选择器可以针对某一子树用:root来选择

      • :empty，没有子节点的元素。子节点包括空格、文本和元素节点。注释或处理指令都不影响。

      • :nth-child和:nth-last-child，函数型伪类，nth-last-child的区别是从后往前数。of-type系列，S:nth-of-type(An+B)是:nth-child(|An+B| of S)的另一种写法。

        选择器 效果
        :nth-child(even) 选中偶数节点
        :nth-child(4n-1) 选中第3个、第7个、第11个等节点
        :nth-child(3n+1 of li.important) 选中第1个、第4个li.important等，只有li.important会被计数

      • :first-child和:last-child，第一个和最后一个元素，还有nth-last-of-type、first-of-type

      • :only-child，选中唯一一个子元素，还有only-of-type

    • 链接与行为伪类选择器

      • :any-link，表示任意的链接，包括a、area、link标签都可能匹配
      • :link，表示未访问过的链接
      • :visited，表示已访问的链接
      • :active，表示用户正在激活这个元素，如按下按钮鼠标还未抬起
      • :focus，焦点落于这个元素
      • :target，选中浏览器URL的hash部分所指示的元素
      • 锚伪类排序：a:link; a:visited; a:hover; a:active;

    • 逻辑伪类选择器

      • :not，函数型伪类，防止特定元素被选中，如选中所有不是段落的元素，内部元素只能是简单选择器。
      :not(p) {
        color: blue;
      }

    • 其他

      • 国际化和多语言：dir，lang
      • 音视频，play，pause
      • 时序，current，past，future
      • 表格：nth-col，nth-last-col

需要注意的是元素选择器需要考虑命名空间的问题，比如svg和html中都有a元素，要区分svg中的a和HTML中的a，就必须用带命名空间的类型选择器。

svg|a { 
  stroke:blue; 
  stroke-width:1;
}
html|a { 
  font-size:40px;
}

选择器的组合

选择器列表是用逗号分隔的复杂选择器序列，复杂选择器是用空格、大于号、波浪线等符号连接的。

  • 第一优先级：无连接符号，表示“且”的关系

    • 元素+类选择器(p.myclassname)，选择所有包含myclassname的p元素
    • 多类选择器(.class1.class2)，选择同时具有class1和class2类名的元素

  • 第二优先级：连接符连接

    • 相邻选择器(h1 + p) ，选择紧接在h1后面的p元素
    • 子选择器(ul > li)，对ul中的子元素li进行选择
    • 后代选择器(li a)，对li中的所有a进行选择
    • 后继选择器(.a ~ .b)，对所有具有class为a的后继中选择class为b的节点，后继节点跟当前节点有同一个父元素
    • 列选择器(a || b)，在table和grid中有列的概念，选中所有属于a的b元素，即使b元素横跨多列

  • 第三优先级：选择器分组(div, p)，表示div和p的样式相同

    伪元素

目前兼容性达到可用的伪元素有：

  • ::first-letter：选择元素文本的第一个字（母），它在所有标签内，与firstline不同
  • ::first-line：选择元素文本的第一行，第一行指的是排版后显示的第一行，和HTML中的换行无关，且必须出现在最内层的块级元素之内
<div>
  <p id=a>First paragraph</p>123<!--p标签内为蓝色，若该把p改为行内元素span，则span标签内为绿色，123为蓝色-->
  <p>Second paragraph</p>
</div>
<style>
div>p#a {
    color:green;
}
div::first-line { 
    color:blue; 
}
</style>

::first-line 和 ::first-letter 实现的都是文本相关的CSS，如下图：

  • ::before：在元素内容的最前面添加新内容
  • ::after：在元素内容的最后面添加新内容

这两个元素必须制定content属性才会生效，支持所有的CSS属性。

主要应用：

  • 清除浮动
  • 画分割线
  • 计数器
  • 形变
  • 增大点击热区

伪类和伪元素

  1. 伪类本质上是为了弥补常规CSS选择器的不足，找到那些不存在DOM树中的信息（标签的:link、visited）以及不能被常规CSS选择器获取到的信息（:target，匹配文档(页面)的URI中某个标志符的目标元素）；
  2. 伪元素本质上是创建了一个有内容的虚拟容器；
  3. CSS3中伪类和伪元素的语法不同伪元素两个冒号
  4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

选择器的优先级

  1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器（class） = 伪类选择器（.test:first-child）=属性选择器（[title]） （后面的样式会覆盖前面的样式）
  5. 标签选择器
  6. 通配符选择器（*）
  7. 浏览器自定义的样式

计算方式如下

  • 内联样式，如: style=””，权值为1000
  • ID选择器，如：#content，权值为100
  • 类，伪类和属性选择器，如.content，权值为10
  • 元素选择器和伪元素选择器，如div p，权值为1。

声明：属性和值

属性是由中划线、下划线、字母等组成的标识符，CSS还支持反斜杠转译。双中划线开头的属性被当作变量，与之配合的是var函数。

:root {
  --main-color: red;
}
h1 {
  color: var(--main-color);
}

值可能是以下类型：

  • CSS范围的关键字，如inherit、initial等
  • 字符串，如content属性值
  • URL，使用url()函数
  • 数字，如flex属性、width属性
  • 百分比
  • 颜色
  • 图片
  • 2D位置
  • 函数，比如transform

函数

CSS支持一些计算型函数：calc()、max()、min()、clamp()、toggle()、attr()。calc()函数是基本的表达式计算，支持四则运算，且允许不同单位混合运算。

section {
  float: left;
  margin: 1em;
  border: solid 1px;
  width: calc(100% / 3 - 2 * 1em - 2 * 1px);
}
ul { 
  list-style-type: toggle(circle, square); 
}
p {
  width: clamp(10px, 4em, 80px);
}

max、min取较大、较小的一个，clamp给一个值限定范围，超出范围则使用范围的最大或最小值，clamp(MIN, VAL, MAX)等同于max(MIN, min(VAL, MAX))。toggle在规则选中多于一个元素时生效，它会在几个值之间切换。attr允许CSS接受属性值的控制。

其他

深度选择器

Sass/Scss: /deep/ CSS: >>>

由于使用scoped之后，父组件的样式不会渗透到子组件中，在使用iview或者element等第三方组件时不能修改给出的组件样式，因此需要用深度选择器来进行修改。

参考文章

  1. CSS媒体查询
  2. attr
  3. CSS选择器：伪元素是怎么回事

 上一页

HTML

 评论