[note] CSS 伪类|伪元素|Emmet|继承

内容概述

一. 伪类

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

(如果没有伪类,在这些交互操作的时候需要用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

推荐阅读更多精彩内容