<!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. maven详解之结构

    maven 父子关系 父项目中打包方式必须是pom  如 <packaging>pom</packaging>,父项目中使用<modules><module& ...

  2. linux free命令解读

    $ free -m total used free shared buffers cached Mem: 1002 769 232 0 62 421 -/+ buffers/cache: 286 71 ...

  3. android-蓝牙通信

    一:简介 由于项目曾经想用蓝牙通信,但由于蓝牙传输速度比较慢,最终还是没有使用蓝牙,不过还是在空闲之余研究了蓝牙通信,鉴于目前网上蓝牙这块教程并不多,尤其是从蓝牙扫描,蓝牙配对,蓝牙通信等完整的教程更 ...

  4. 用mp3stego来加密与解密文件的几次尝试

    用法来自实验吧的"Canon"隐写题目的灵感. 先来简单的聊一下这道题目,打开题目后发现了一个mp3文件,除此之外还有一枚压缩包.然而压缩包是加密的,看来我们需要通过解出来mp3里 ...

  5. javascript中DOM集锦（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Quartz.NET实现作业调度

    一.Quartz.NET介绍 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp ...

  7. 使用jquery.form.js文件进行文件上传

    本想着文件上传是一件挺简单的事,不过是获取文件地址保存到服务器而已,然而事实并非如此. 我信心满满的写下input type="file",alert input 的value,打 ...

  8. LinearGradientBrush,RadialGradientBrush的样式说明

    LinearGradientBrush 使用线性渐变绘制区域.线性渐变沿直线定义渐变.该直线的终点由线性渐变的 StartPoint 和 EndPoint 属性定义.LinearGradientBru ...

  9. 第八章 关于SQL查询出错的一些问题

    问题一:在使用MySQL使用传参查询并返回结果集时,没错,小伙伴们都知道少不了Statement接口和PreparedStatement对象.问题来了,有时竟然查询不了,Debug进去,发现执行的SQ ...

  10. 通信技术：SSE设计方案（一）--- 前端Server-Sent Events概念讲解和基础类库完善发布

    好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻. 之前几篇博客,研究前端通信技术的第一层ajax技术,从最基 ...