内容概述

一. 伪类

我的理解是，伪类是方便选择器选择的：比如某个交互操作自动给元素添加的类

（如果没有伪类，在这些交互操作的时候需要用js给目标元素加上类）

伪类是把常见的功能做成现成的类

类用.作为选择符，伪类用:作为选择符

a:target这种选择器是交集选择器，中间没有空格，加了空格是后代选择器！

动态伪类（dynamic pseudo-classes）

• 共五个：

  • link: a
  • visted: a
  • focus 获取焦点时（用于a和input元素）

• hover 悬停时（除了用于a，也能用在其他元素上）

  • active 激活的瞬间（除了用于a，也能用在其他元素上）

• 1 用于a元素

  • 使用注意：
    :hover必须放在:link和:visited后面才能完全生效
    :active必须放在:hover后面才能完全生效
    所以建议的编写顺序是 :link、:visited、:hover、:active
  • 动态伪类编写顺序建议为
    :link、:visited、:focus、:hover、:active
    记忆：女朋友看到LV包包后，（Feng）疯一样地ha ha大笑

• 2 hover/active应用到其他元素

  strong:hover {
    color: purple;
  }
  

• 3 获取焦点：focus

  • :focus指当前拥有输入焦点的元素（能接收键盘输入）

  • 文本输入框一聚焦后，背景就会变红色

  • 去除a元素默认的:focus焦点状态效果：（导航栏等）

    • 方法1 outline: none; 取消了效果但还是能选中（没有实现功能，不推荐）

      选中时（焦点状态）会给元素加上outline（轮廓），设置为none即可不显示

      a:focus {
        outline: none;
      }
      

    • 方法2 将tabindex属性设置为-1，表示不能被选中

      <a tabindex="-1" href="#">Google一下</a>

• 4 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

  a {
    color: red;
  }
  

  • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

结构伪类（structural pseudo-classes）

• :nth-child( )

  • 选中子元素中的第几个（除了根元素，其他都可以是子元素）

  • 1 :nth-child(数字)

    • 例 :nth-child(1)是父元素中的第1个子元素
    • 例 p:nth-child(3)

  • 2 :nth-child(n) n代表任意正整数和0

    HTML里都是从1开始，而不是0

    • 例 :nth-child(2n)是父元素中的第偶数个子元素（第2、4、6、8...个）（0在这里没有意义）
      跟:nth-child(even)同义
    • 例 :nth-child(2n + 1)是父元素中的第奇数个子元素（第1、3、5、7......个）
      跟:nth-child(odd)同义
    • n的表达式
      • 2n + 3 ：3，5，7……
      • -n + 3：3，2，1（n从0开始递增）（常用）

• :nth-last-child( ) 从后向前数

  • :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

  • 1 :nth-last-child(数字)

  • 2 :nth-last-child(n) n代表任意正整数和0

    :nth-last-child(1)，代表倒数第一个子元素
    :nth-last-child(-n + 2)，代表最后2个子元素

• :nth-of-type( )

  • :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的子元素
  • 注意
    • nth-child()是所有子元素，如果类型不同, 忽略
    • nth-of-type()是同种类型的子元素

• :nth-last-of-type( )

  • 从后向前数

• 其他结构伪类：

  • :first-child，等同于:nth-child(1)
  • :last-child，等同于:nth-last-child(1)
  • :first-of-type，等同于:nth-of-type(1)
  • :last-of-type，等同于:nth-last-of-type(1)
  • :only-child，是父元素中唯一的子元素
  • :only-of-type，是父元素中唯一的这种类型的子元素
  • :root，根元素，就是HTML元素
  • empty，内容完全空白的元素

其他伪类（用得较少）

• 目标伪类 :target

  • 用于锚点
  • 例：点击链接，跳到目标位置的标题（用锚点实现），标题变红（用js）

• 元素状态伪类（UI element states pseudo-classes）

  • :enabled、:disabled、:checked(input)

  • 例：给不可交互按钮button设置样式

    :disabled {
      color: red;
    }
    
    /*相当于*/
    button[disabled] {
      color: red;
    }
    

    button 有disabled等属性

• 否定伪类:not()

  • :not(x)表示除x以外的元素，特殊场景下用
  • x是一个简单选择器：元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
  • class不香吗?
  • 注意：会选中HTML元素，可以在Chrome调试的时候看到继承情况

• 语言伪类（language pseudo-classes）:lang( )

二. 伪元素

• 常用的伪元素有：

  • :first-line、::first-line（很少用）
  • :first-letter、::first-letter （很少用）
  • :before、::before（常用）
  • :after、::after（常用）

• 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

• ::first-line、::first-letter（很少用）

  • ::first-line可以针对首行文本设置属性
  • ::first-letter可以针对首字母设置属性
  • 只有下列属性可以应用在::first-line伪元素
    • ·字体属性、颜色属性、背景属性
      word-spacing、letter-spacing、text-decoration、text-transform、line-height
  • 只有下列属性可以应用在::first-letter伪元素
    • 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
      text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）

• ::before、::after（常用）

  • ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）

    .box::before {
      content: "插入的文本";
      color: red;
      font-size: 20px;
    }
    
    .box::after {
      /* content: url(../img/diqiu.jpg); */
      content: "";
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #f00;
    }
    

    • 注意：【content必须要写】没有content也要写个空字符串“”

  • 在CSS属性值中，使用url(图片的URL)来引用图片
    url(dot.png);
    url('dot.png');
    url("dot.png");

    加不加引号都可以

三. Emmet语法

• !和html:5
  • !和html:5可以快速生成完整结构的html5代码
• >（子代）和+（兄弟）

Emmet语法注意点：中间不要留空格

• *（多个）
• ^（上一级）和()（分组）
• 属性(id属性#、class属性.、普通属性[])
  • div#header+div.page+div#footer.class1.class2.class3
  • td[title=hello]
• 内容{}
  • a{click}+span{here}
• $
  • ul>li.item$*5
  • ul>li.item$$$*5，生产001、002、……、005
• 隐式标签
  • 一般省略标签默认是div
  • ul>.item ul下默认是li
  • table>.row>.content table下默认是tr td(讲完table回头看)
• css emmet语法
  • whmp
  • fz fw
  • lh bgc
  • dib

四. CSS的特性

• 继承

  • 一个元素如果没有设置某属性的值，就会跟随父元素的值

    比如color、font-size等属性都是可以继承的

  • 并不是所有的属性都可以继承(文本相关属性, 更多的去查文档MDN)，究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案

  • 不能继承的属性，一般可以使用inherit值强制继承

    img {
      width: 100%;
      /* width: inherit; */
    }
    

    浏览器的开发者工具也会标识出哪些样式是继承过来的inherited from

  • 注意：【CSS属性继承的是计算值】，并不是当初编写属性时的指定值（字面值）

    • 例：0.5em，继承的是计算后的px值

• 层叠

  • 基本层叠: 选择器相同时, 后面的属性会层叠前面的属性

  • 优先级(权重)

    • !important: 10000
    • 内联样式: 1000
    • id: 100
    • 类/伪类/属性: 10
    • 元素/伪元素: 1

  • 通配符：0

  • 优先比较优先级高的选择器

  • 比较优先级的严谨方法
    从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
    如果数量相同，比较下一个较小的权值，以此类推
    如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

屏幕快照 2020-02-06 下午3.00.52.png

• CSS经验
  • 为何有时候编写的CSS属性不好使，有可能是因为
    选择器的优先级太低
    选择器没选中对应的元素
    CSS属性的使用形式不对
    元素不支持此CSS属性，比如span默认是不支持width和height的
    浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
    被同类型的CSS属性覆盖，比如font覆盖font-size
  • 建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

快捷键

• alt + shift + f: 代码格式化

提问

1.文字相关的属性

• text-align
• text-transform
• text-decoration
• text-indent
• letter(字母)-word(单词)-spacing

2.字体相关的属性

• font-size
• font-family
• font-weight
• font-style
• font-varient
• line-height
• font

3.关键的选择器

• 后代选择器: .box 空格 其他选择器
• 子代选择器: >
• 相邻/全兄弟选择器: + ~(全)
• 交集选择器: div.box
• 并集选择器: div, .box