选择器

基础选择器

选择器 实例 描述
.class .info 选择class=info的所有元素
#id #name 选择id=name的所有元素
* * 选择所有元素
element p 选择所有<p>元素
element,element div,p 选择所有<div>与<p>元素
element element div p 选择<div>下的所有<p>元素
[attribute] [target] 选择含有target属性的元素
element[attribute=value] link[target=_blank] 选择所有<link>中属性target=_blank的元素

伪类选择器

清除缓存后失效

选择器 实例 描述
:link a:link 所有未访问的链接
:hover a:hover 鼠标指针位于其上的链接
:visited a:visited 已访问的链接
:active a:active 活动的链接（例如点击操作时）
:empty li:empty 空的列表
:root :root 文档根元素
:first-child p:first-child 选择后代中的第一个为<p>的元素
:first-of-type: p:first-of-type 选择后代中的第一个类型为<p>的元素

父子选择器

选择器 实例 描述
element>element div>p 父元素为<div>的所有<p>子元素
element+element div+p 紧接在<div>后的<p>元素
element~element div~p 前面有<div>的每个<p>元素

内容选择器

选择器 实例 描述
[attribute^=value] a[src^=”https”] 以https开头的所有链接
[attribute$=value] a[src$=”.pdf”] 以.pdf结尾的所有链接
[attribute*=value] a[src*=”abc”] 属性中包含abc子串的所有链接

权重

以下样式的权重递增，权重一致时选择后出现的样式：

  • 泛选择器（例如，*），权重0000。
  • 类型选择器（例如，h1）和伪元素（例如，::before），权重0001。
  • 类选择器 (例如，.example)，属性选择器（例如，[type=”radio”]）和伪类（例如，:hover），权重0010。
  • ID 选择器（例如，#example），权重0100。
  • 行间样式，权重1000。
  • !important，权重无穷大。

文字排版

  • px：像素
  • em：相对于当前元素字体的大小
  • rem：相对HTML根元素的字体大小
  • GoogleFonts提供字体，Font-Awesome提供字体图标。

字体，字号，字重，特殊标注

1
2
3
4
5
6
7
8
body{
    font-family: "Microsoft Yahei"; 
    font-size: 12px;
    font-weight: blod;
    font-style: italic;
    text-decoration: underline;
    text-decoration: line-throuht;
}

文本阴影

1
2
3
4
body{
    <!-- 阴影颜色 水平偏移 竖直偏移 阴影模糊度 -->
    text-shadow: rgba(0,0,255,0.7) 5px 5px 2px;
}

文本空白与溢出处理

1
2
3
4
5
6
7
8
9
10
body{
    <!-- white-space: pre; -->

    <!-- 空白符不换行，超出边框的文字隐藏并且使用省略号代替。 -->
    border: solid 1px #ddd;
    width: 300px;
    white-spcae: nowarp;
    overflow: hidden;
    text-overflow: ellipsis;
}

段落缩进，间距，对齐

1
2
3
4
5
6
body{
    text-indent: 2em;
    line-height: 1.5em;
    text-align: center;
    vertical-align: top;
}

CSS框盒

参考：https://blog.raincorn.top/2020/03/21/CSS_box_model/

  • 当存在多个边距时，取最大边距。
  • 边距的简化写法中，遵循顺时针即上、右、下、左。

    圆角

    1
    2
    3
    4
    5
    6
    div{
        width: 300px;
        height: 300px;
        border: solid 2px red;
        border-radius: 10px;
    }

Flex布局

采用Flex布局的元素称为容器（flex container），子元素称为项目（flex item）。
Flex

声明容器

1
2
3
.box{
  display: flex;
}

容器属性

  • flex-direction：主轴的方向，默认为row

    1
    2
    3
    4
    .box {
        <!-- row：从左到右；row-reverse：从右到左 -->
      flex-direction: row | row-reverse | column | column-reverse;
    }

    Flex-Direction

  • flex-warp：元素的换行方式，默认为nowarp

    1
    2
    3
    4
    .box{
        <!-- nowarp：不换行；warp：第一行在上的换行；warp-reverse：第一行在下的换行 -->
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

    Warp
    Warp-reverse

  • flex-flow：flex-direction于flex-warp的简写
    1
    2
    3
    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }

  • justify-content：主轴元素对齐方式，默认为flex-start

    1
    2
    3
    4
    .box {
        <!-- flex-start：左对齐；flex-end：右对齐；center：居中；space-between：两端对齐；space-around：间隔相等对齐 -->
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

    justify-content

  • align-items：交叉轴对齐方式，默认为stretch
    1
    2
    3
    4
    .box {
        <!-- flex-start：上对齐；flex-end：下对齐；center：居中对齐；baseline：以第一行文字为基线对齐；stretch：占满当前容器 -->
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    align-items

    项目属性

  • order：属性定义项目的排列顺序，数值越小越靠前，默认为0
    1
    2
    3
    .item {
      order: <integer>;
    }
    order
  • flex-grow：项目的放大比例，默认为0，不放大；都为1时均分空间
    1
    2
    3
    .item {
      flex-grow: <number>; 
    }
    flex-grow
  • flex-shrink：项目的缩小比例，默认为1
    1
    2
    3
    .item {
      flex-shrink: <number>; 
    }
    flex-shrink
  • flex-basis：项目占据的主轴空间，默认为auto
    1
    2
    3
    .item {
      flex-basis: <length> | auto; 
    }
  • flex：为flex-grow，flex-shrink，flex-basis的缩写；auto属性对应 1 1 auto，none属性对应0 0 auto
    1
    2
    3
    .item {
      flex: none | auto | flex-grow flex-shrink flex-basis
    }
  • align-self：与容器属性类似

参考资料

CSS选择器参考手册

全面打通CSS知识点（B站）

Flex布局教程：语法篇

Flex布局教程：实例篇

MDN