一段巧妙的css debug代码

想法很简单，代码很简洁，效果也不错，蛮有用（这种高级东东 IE 自然又是不认识的）。

代码如下:

* { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

很容易理解，用不同颜色不同线型的 outline 来标注层级关系。

赞 (0)

相关推荐

  • 一段巧妙的css debug代码

    想法很简单,代码很简洁,效果也不错,蛮有用(这种高级东东 IE 自然又是不认识的). 复制代码 代码如下: * { outline: 2px dotted red }   * * { outline: 2px dotted green }   * * * { outline: 2px dotted orange }   * * * * { outline: 2px dotted blue }   * * * * * { outline: 1px solid red }   * * * * * *

  • 手机开发必备技巧：javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 复制代码 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewpor

  • Vscode编辑器的巧妙用法(快速格式化代码的方法)

    Vscode编辑器的巧妙用法(快速格式化代码的方法)

    相信不少人,写代码忘我的时候,都会忘记层级之间的缩进,导致代码,看着非常不清晰,这个时候,你是否还在手动一点点缩进,这个时候,我们需要利用编辑器的强大功能啦 笔者使用Vscode,一个很好用的编辑器.有许多优秀的插件等待大家的发现 这里笔者推荐 一个格式化神器 看这安装量就知道不错了吧, 相信不少人代码都可能写这样 结构没有层级 安装插件后只需要执行 ctrl + sahift + p 输入 Beautify file 插件将会自动识别帮你进行格式化 但是有些小伙伴,在vue,react等框架页

  • 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

    既判断分辨率,也判断浏览器 重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码. 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=""; var IE800=""; var IE1152=""

  • 用Python写一段用户登录的程序代码

    如下所示: #!/usr/bin/env python #coding: utf8 import getpass db = {} def newUser(): username = raw_input('username: ') if username in db: #添加打印颜色 print "\033[32;1m%s already exists![0m" % username else: #屏幕不显示密码,调用getpass.getpass() password = getpas

  • vue操作动画的记录animate.css实例代码

    transition动画 //使用动画库animate.css <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'> //其中duration是绑定动画的时间 统一设置进入与出去的时间 <h3 v-if='flag'>这里是动画的内容</h3> </transition > //也可以这样使用 &l

  • 推荐一个好看Table表格的css样式代码详解

    推荐一个好看Table表格的css样式代码详解

    漂亮的table表格样式css源码漂亮的table表格样式 源码 <head> <title></title> <style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; color: #666; height:

  • 3段Python图像处理的实用代码的分享

    3段Python图像处理的实用代码的分享

    目录 前言 边缘检测 将照片变成素描风格 判断形状 前言 今天给大家分析3个计算机视觉方向的Python实用代码,主要用到的库有: opencv-python numpy pillow 要是大家所配置的环境当中没有这几个模块的话,可先用pip命令下载安装: pip install opencv-python numpy pillow 边缘检测 边缘检测的基本思想就是简化图像信息,使用边缘线代表图像所携带信息,而这次我们要用到的则是Canny边缘检测算子,在Opencv当中需要调用的是cv.can

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • js实现单一html页面两套css切换代码

    今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下: 第一步:在连接样式表的元素里定义一个id,例如 复制代码 代码如下: <link href="1.css" rel="stylesheet" type="text/css" id="css"> 我定义的id是css. 第二步:写一个js函数,代码如下: 复制代码 代码如下: <script type="t

随机推荐