<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
    <style type="text/css">
        [title]{
            /*属性选择器*/
            color: brown;
        }
        [title=te]{
            /*属性选择器加值选择器*/
            color: cadetblue;
        }
    </style>
</head>
<body>
<h1>
    应用了样式表
</h1>
<h2>样式2</h2>
<h3>样式3</h3>

<p><strong>这个样式引用strong派生选择器</strong></p>
<ul>
    <li>
        <strong>这个会被li strong派生选择器选择</strong>
    </li>
</ul>
<div id="pid"><p>这个会引用ID选择器</p></div>
<p id="ppd">这个会使用id选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
<p class="pclass">这个会引用类选择器</p>
<p class="pclass">这个会使用类选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
<p title="p">属性选择器引用 为指明值的可以随便写</p>
<p title="te">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
<p title="te1">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
<p id="p1">
    拯救大兵瑞恩
    <span>白蛇传<span>独立宣言</span></span>
</p>

<p>拯救大兵<span>白蛇传<span>肚子大了</span></span></p>
</body>
</html>
h2,h1{
    /*选择器分组*/
    color: blue;
    font-family: 楷体;
    font-size: 50px;
}
body{
    /*没有定义样式的就会引用BODY里的样式（可以理解为继承）*/
    color: aqua;
}
li strong{
    /*派生选择器*/
    color: bisque;
}
strong{
    /*派生选择器*/
    color: #FF00FF;
}
p span span{
    /*派生选择器*/
    font-family:"楷体";
}
#p{
    /*id选择器用#使用*/
    color: aquamarine;
}
#ppd a{
    /*id选择器和派生选择器一起使用*/
    color: blueviolet;
}
.pclass{
    /*类选择器用.使用*/
    color: darkgreen;
}
.pclass a{
    /*类选择器和派生选择器一起使用*/
    color: blue;
}

HTML学习笔记 CSS学习选择器案例 第五节 （原创） 参考使用表的更多相关文章

  1. HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ArcGIS案例学习笔记3_1_地理配准案例_目视找点

    ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...

  3. ArcGIS案例学习笔记3_1_地理配准案例_图面控制点

    ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...

  4. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  5. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  6. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  7. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  8. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  9. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

随机推荐

  1. Gaussian and Truncated Gaussian

    Everybody knows about Gaussian distribution, and Gaussian is very popular in Bayesian world and even ...

  2. python之路第五篇之装饰器:（进阶篇）

    装饰器: 学前必备知识: def f1(): print "f1" f1() #表示函数执行 f1 #表示函数,指向内存地址 f1 = lambda x: x + 1 f1() # ...

  3. uvalive 3135 Argus

    https://vjudge.net/problem/UVALive-3135 题意: 有一个系统有多个指令,每个指令产生一个编号为qnum的时间,每个指令的触发间隔不相同,现在给出若干个指令,现在的 ...

  4. CentOS7 + Nginx1.13.5 + PHP7.1.10 + MySQL5.7.19 源码编译安装

    一.安装Nginx 1.安装依赖扩展 # yum -y install wget openssl* gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng ...

  5. 写一个ORM框架的第一步

    新一次的内部提升开始了,如果您想写一个框架从Apache Commons DbUtils开始学习是一种不错的选择,我们先学习应用这个小“框架”再把源代码理解,然后写一个属于自己的ORM框架不是梦. 一 ...

  6. 结束《Java编程思想》（Thinking in Java）自学的读后感（2017.10.15）

    首先划重点:这是一本Java的入门书. 自学前需要的条件:已经具备基本的计算机基础. 1)已经对一种编程语言比较熟悉: 2)有过四年计算机专业学习,或者三年以上的软件开发经验, 自学的方法: 1)完全 ...

  7. opencv-python：win7下，搭建python2.7.5环境,配置opencv3.1.0准备开工-OpenCV步步精深

    我的个人博客:点这里 搭建python2.7.5环境 下载python2.7.5 64位:https://www.python.org/ftp/python/2.7.5/python-2.7.5.am ...

  8. 全球多个 TOP 网站藏挖矿代码，5 亿 PC 沦为矿工

    据ZDNet报道,现在很多网站都开始在网页脚本中藏匿挖矿代码,在用户访问时偷算力用于挖矿.来自Adguard的报告称也证实,也有5亿台电脑中招. 最新最热的IT技术付费社区 IT帮 itbang.me ...

  9. C语言第一次实验报告————PTA实验1.2.3内容

    一.PTA实验作业 题目1.温度转换 本题要求编写程序,计算华氏温度100°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代 ...

  10. win10 uwp 绑定静态属性

    Jasoon 大神问,如何绑定静态属性. 我们经常有静态属性,那么我们如何绑定 假如我们的ViewModel有一个静态属性 public static string CVTE { set; get; ...