<!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. VC++:创建，调用Win32动态链接库

    VC++:创建,调用Win32动态链接库 概述 DLL(Dynamic Linkable Library)动态链接库,Dll可以看作一种仓库,仓库中包含了可以直接使用的变量,函数或类.仓库的发展史经历 ...

  2. PE文件格式详解,第一讲,DOS头文件格式

    PE文件格式详解,第一讲,DOS头文件格式 今天讲解PE文件格式的DOS头文件格式 首先我们要理解,什么是文件格式,我们常说的EXE可执行程序,就是一个文件格式,那么我们要了解它里面到底存了什么内容 ...

  3. JS使用默认图片代替页面上无法显示的图片

    1.js方法: function replaceErrorImg(obj) { obj.src="images/common/error.bmp"; } 2.jquery绑定 $( ...

  4. java 虚拟机与并发处理几个问题简要（一）

    一.   处理任务时,应该将代码分成不同的部分,每一部分由一个线程进行,但是会因为任务负载不平衡导致有闲有忙.最好是应分成不同的部分,分配不同的线程,尽量让处理器不停的处理,不要闲下来.如何分配线程数 ...

  5. webpack 的使用2

    实际项目中的配置 要加__dirname 不然会报错 注意path  /dist 前不要加点 结果 将两个文件打包在一起 结果 传入对象 并且单独打包 name为key 加上本次打包的hash has ...

  6. SQL SERVER 查看日志大小及日志已满的处理方法 (转)

    --解决方法 --日志文件满而造成SQL数据库无法写入文件时,可用两种方法: --查看数据库日志大小 dbcc sqlperf(logspace) --清空日志. --1．打开查询分析器,输入命令 D ...

  7. 关于java的自动拆装箱若干细节问题

    一.首先需要了解的几个前提: 1.自动装箱过程是通过调用valueOf方法实现的(如Integer.valueOf(10)),而拆箱过程是通过调用包装器的 xxxValue方法实现的(如Integer ...

  8. Scala类型系统(sudden thought)

    http://docs.scala-lang.org/tour/lower-type-bounds.html中有一段代码 trait Node[+B] { def prepend(elem: B): ...

  9. Django Cookie 和 Sessions 应用

    在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的 ...

  10. 结对编程之<GoldPointGame>

    我们结对项目的名称是GoldPointGame,这是一个非常经典的老游戏,其规则大致是:N个同学每个人依次报一个(1-100)的有理数,交给裁判算出其平均值,然后乘以黄金点数0.618,最后得到G值. ...