CSS伪元素，属性继承，HTML元素的类型

• 伪元素（常用）
  • 常用的伪元素有：
  • ::first-line：对首行文本设置属性
  • ::first-letter：对首字母设置属性
  • ::before: 可以在文本中加入其他的样式元素

    

  • ::after: 在文本的后面加上其他样式的元素
  • /* 额外的补充 */
  • /* 使用伪元素的过程中，不要将content省略 */
• CSS的属性继承
  • 如果一个属性具备继承性，在该元素上设置后，他的后代元素都可以继承这个属性（可以通过查阅MDN文档来看某些属性是否可以继承）一般情况下，和文本相关的属性，可以具备继承性（后代元素有自己的属性，优先自己的属性）

    

• CSS的层叠性
  • 对于一个元素，相同的属性设置多次，只有一次会生效
  • 选择器权重大的会生效
  • 权重一样，按先后顺序生效
    • 权重比较：

      

• HTML元素的类型(重要)
  • 常用元素：h1/p/span/div/a/img
  • html在设置元素时考虑该元素占据多大的空间
  • 如果元素非常重要，会独占一行 -> 类型：块级元素block（独占一行）：h元素/p/div，可以设置宽度和高度
  • 某些元素与其他内容在一行显示 -> 类型： 行内级元素 inline：a/img/span/strong，不可以设置宽度和高度
    • inline-block（行内块级元素）: 和其他元素在同一行，可以设置宽度和高度，默认宽度和高度由内容决定

    • 

  • 补充：

    

  • /* inline:表示可以和其他元素在同一行显示 */
  • /* block：可以设置宽度和高度 */
  • display: inline-block; //既可以设置宽度，也可以设置高度
  • width: 300px;
  • height: 300px;
• HTML的编写规则
  • 不要在p元素中放div元素
  • 行内元素中不要放块级元素
• 元素的隐藏方法
  • 方法一. display设置为none：元素不可见，不占任何空间
  • 方法二. visibility设置为hidden：元素不可见，会占据空间
  • 方法三. rgba设置颜色，将a的值设置为0
    • rgba的a设置的时alpha的值，可以设置透明度，不影响子元素
    • rgba（r：red 0-255，g：green 0-255，b：blue 0-255，a：alpha 0透明-1不透明）
    • alpha：只是设置当前color/bgc其中的颜色透明度为一个值，不会影响子元素
    • opacity：设置透明度，子元素有一定的透明度
    • 示例：

      

• CSS样式不生效技巧
  • 不生效原因：
  • 选择器优先级太低
  • 选择器没选中对应的元素
  • 元素、浏览器不支持CSS属性，eg：span默认不支持width，height
  • 被同类的CSS属性覆盖