在static下新建一个css，并写入内容

/*标签选择器，label标签的颜色为红色*/
label {
color: red;
}

/*.代表类选择器，绿色*/
.test {
color: green;
}

/*#代表id选择器，黄色*/
#test {
color: yellow;
}

/*div标签下的魔偶写标签下的lable标签（相对关系），内容的颜色为蓝色*/
div label {
color: blue;
}

/*div标签下的直接的lable标签（父子关系），，灰色*/
div > label {
color: gray;
}

/*属性选择器，href属性，橙色*/
[href] {
color: orange;
}

在templates下建一个html文件，并引入刚刚创建的css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel= "stylesheet"  href= "/static/selector.css">
</head>
<body>
    <label>这里是标签选择器（应该为红色）</label>
    <label class= "test">这里是类选择器（应该为绿色）</label>
    <label id= "test">这里是ID选择器（应该为黄色）</label>
    <div>
        <a href= "http://www.baidu.cn">
            <label>1（蓝色）</label>
        </a>
        <label>2（灰色）</label>
    </div>
</body>
</html>

在工程下创建路由

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route('/calc')
def calc():
    return render_template('calc.html')

if __name__ == '__main__':
    app.run(
        host='0.0.0.0',
        port=8888,
        debug=True,
    )

访问：

测开之路三十六：常用的css选择器的更多相关文章

  1. 测开之路三十四：html常用标签

    网页的结构: HTML:超文本标记语言是迄今为止网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...

  2. 测开之路七十六：性能测试蓝图之html

    <!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...

  3. 测开之路三十八：css布局之定位

    常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...

  4. 测开之路八十六：python操作sqlite

    创建sqlite数据库,并创建表和数据 python自带sqlite3库可以创建数据库文件 导入库:import sqlite3 创建游标,指定数据库名字:con = sqlite3.connect( ...

  5. 测开之路七十六：linux变量和环境变量

    变量 赋值 variable=0,访问 $var或${var} 参数 $n 用``引住的会先执行(~键) 位置参数 环境变量/etc/profile:全局的环境变量 . bash_profile:用户 ...

  6. 测开之路五十六：实现类似unittest的断言

    import inspect class Case(object): """ 实现断言 """ def __init__(self): se ...

  7. 测开之路三十九：js基础

    js的两种使用方式 第一种使用方式:单独写js文件 在static下新建一个js文件并写入内容 alert('这是一个弹窗'); 在html文件里面,用script标签引入 <script sr ...

  8. 测开之路三十五：css引入

    CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型 ...

  9. 测开之路三十二：Flask基础之错误与重定向

    错误处理,框架默认的错误为:not Found 可以捕获,并自定义 准备一张自定义图片,放在static文件夹下,并在template下创建一个html文件,引用该图片 捕获404状态,返回自定义页面 ...

随机推荐

  1. app自动化appium使用内置adb命令

    一.Appium-server使用 1.登陆页面 高级设置:可以设置Android 和 IOS 日志级别:dabug非常详尽的日志 记录python代码向他发送的请求以及他在收到请求后做的一系列处理 ...

  2. Linux：VIM简单入手

    现在的Linux系统一般都会默认安装VIM编辑器,如果没有安装VIM编辑器,也默认一定会有VI编辑器,VI编辑器产生的时间比鼠标来的更早,虽然功能很强大,但我建议安装VIM工具,安装了VIM之后,VI ...

  3. [eclipse相关] 001 - 启动+运行优化

    本随笔参考了其他博客内容,且在验证有效之下才或誊抄或摘录或加上自己经验组合而成. 参考博客: 1,http://zwd596257180.gitee.io/blog/2019/04/17/eclips ...

  4. git常用命令总结 git常用命令总结

    git常用命令总结:https://www.cnblogs.com/jackchensir/p/8306448.html 利用git提交代码 一.首先需要下载git 查看电脑是否安装git,打开终端, ...

  5. jvm性能监控（3）-jdk自带工具 jps jstack jmap

    一.概要: jps -l 查看现有的java进程 jps -l 显示所有正在运行的java进程id   jstack 查看Java线程      jstack -l pid; 做thread dump ...

  6. 2019 Multi-University Training Contest 1 - 1004 - Vacation - 二分 - 思维

    http://acm.hdu.edu.cn/showproblem.php?pid=6581 一开始想了好几个假算法.但是启发了一下潘哥,假如时间知道的话就可以从头开始确定各个车的位置.那么直接 \( ...

  7. java Activiti6.0 后台 框架 spring5 SSM 工作流引擎 审批流程

    1.模型管理 :web在线流程设计器.预览流程xml.导出xml.部署流程 2.流程管理 :导入导出流程资源文件.查看流程图.根据流程实例反射出流程模型.激活挂起 3.运行中流程:查看流程信息.当前任 ...

  8. 20191114PHP图像绘制

    <?phpob_clean();$img=imagecreate(400,400);$back=imagecolorallocate($img,200,200,100); $blue=image ...

  9. Python元类之由浅入深

    前言 ​ 元类属于python面向对象编程的深层次的魔法,非常重要,它使我们可以更好的掌控类从创建到消亡的整个生命周期过程.很多框架的源码中都使用到了元类.例如 Django Framework 中的 ...

  10. java Arrays工具类的操作

    package java08; /* java.util.Arrays是一个与数组相关的工具类,里面提供了大量的静态方法,用来实现数组常见的操作 public static String toStri ...