<!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. java学习——java按值传递和按址传递

    先复制一个面试/笔试的题: 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递? 答案: 是值传递.Java语言的方法调用只支持参 ...

  2. 每周刷题记录--by noble_

    学习hzwer的博客. ----------------------------------------------------------------- 2017.10.3 主要是水题与傻逼dp: ...

  3. Prison Break

    Prison Break 时间限制: 1 Sec  内存限制: 128 MB提交: 105  解决: 16[提交][状态][讨论版] 题目描述 Scofild又要策划一次越狱行动,和上次一样,他已经掌 ...

  4. python常见模块命令(os/sys/platform)

    一.Os Python的标准库中的os模块主要涉及普遍的操作系统功能.可以在Linux和Windows下运行,与平台无关. os.sep 可以取代操作系统特定的路径分割符. os.name字符串指示你 ...

  5. Java面向对象（封装性概论）

     Java面向对象(封装性概论) 知识概要:                   (1)面向对象概念 (2)类与对象的关系 (3)封装 (4)构造函数 (5)this关键字 (6)static关键 ...

  6. C#钩子类 几乎捕获键盘鼠标所有事件

    using System; using System.Text; using System.Runtime.InteropServices; using System.Reflection; usin ...

  7. Spring MVC 页面跳转时传递参数

    页面仍然使用 JSP,在跳转时如果想传递参数则需要用到类 RedirectAttributes. 首先看看如何打开一个普通页面: // 登录页面(每个页面都要独立的 Action 来支持其呈现) @R ...

  8. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  9. Xcode插件失效以后的处理方法

    全在终端执行,依次输入如下命令 //获取DVTPlugInCompatibilityUUID字段 defaults read /Applications/Xcode.app/Contents/Info ...

  10. FastDFS分布式文件系统

    FastDFS分布式文件系统 阅读目录 相关文章 1 分布式文件系统介绍 2 系统架构介绍 3 FastDFS性能方案 4 Linux基本命令操作 5 安装VirtualBox虚拟机并配置Ubuntu ...