zoukankan      html  css  js  c++  java
  • CSS后代选择器可能的错误认识

    一、关于类选择器的一个问题

        CSS代码:

    .red { color: red; }
    .green { color: green; }

    HTML代码:
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是 绿 红
    原因:DOM越深的类名权重越高

    二、类选择器→后代选择器

    .red p { color: red; }
    .green p { color: green; }
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是  绿 绿
    原因:祖先选择器对应DOM无论多深多浅都是同一级别的,而最终起作用的是选择器声明在CSS样式中的顺序,即优先显示后面的CSS声明

    三、not选择器→后代选择器

    :not(.green)  p { color: red; }
    .green p { color: green; }
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是  绿 绿
     
  • 相关阅读:
    mac 安装Windows系统
    各种镜像源
    应用官方下载地址汇总
    centos7 升级openssh
    ubuntu16.04升级openssh
    腾讯云
    msdeploy 远程发布到lls
    Java Script 什么是闭包?
    JavaScript我的怀疑
    HTML 之 js是干什么的
  • 原文地址:https://www.cnblogs.com/shierfen/p/5333957.html
Copyright © 2011-2022 走看看