<!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. RAID及热备盘详解

    RAID,为Redundant Arrays of Independent Disks的简称,中文为廉价冗余磁盘阵列. 一．出现的原因(RAID的优点): 它的用途主要是面向服务器,但现在的个人电脑由 ...

  2. Python s12 Day2 笔记及作业

    1. 元组的元素不可修改,但元组的元素的元素可以被修改. 2. name="eric" print(name.center(20, "*") 3. list=[ ...

  3. Linux修改hostname的几种方法

    修改hostname有几种方式 1:  hostname DB-Server                            --运行后立即生效(新会话生效),但是在系统重启后会丢失所做的修改 ...

  4. Elixir游戏服设计三

    玩家进程用gen_server来建模,我不直接使用 use GenServer, 而是使用exactor,该库可以去掉反锁的接口定义. 我们新建一个 player_server_manager app ...

  5. cookie存储中文

    写cookie         Cookie   chineseCookie   =   new   Cookie( "chineseCookie ",   URLEncoder. ...

  6. haproxy + keepalived 实现网站高可靠

    haproxy 1的配置文件,包括 keepalived 和 haproxy 的配置,分别如下: [haproxy 1的keepalived 配置文件]  /etc/keepalived/keepal ...

  7. Spring MVC Ajax 嵌套表单数据的提交

    概述 在一些场景里,某个大表单里常常嵌套着一个或若干个小逻辑块,比如以下表单里"设计预审"中包括了一个子模块表单"拟定款项". 在这种情况下该怎么去设计实体类以 ...

  8. ABAP 选择屏幕创建标签页

    *&---------------------------------------------------------------------* *& Report ZTEST_TAB ...

  9. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  10. 前端笔记----jquery入门知识点总结

    一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...