<!--
作者：offline
时间：2018-03-21
描述：1.全选择器
*{属性1:属性值2；属性2：属性值2；...；}
2.元素（标签）选择器
标签名{属性1:属性值2；属性2：属性值2；...；}
元素（标签）选择器优先与全选择器
3.类（class）选择器
.类名{属性1:属性值2；属性2：属性值2；...；}
类选择器高于全选择器
类选择器高于元素选择器
4.id选择器
#id名{属性1:属性值2；属性2：属性值2；...；}
id的优先级高于类选择器，元素选择器，全选选择器
5.分组(对于标签而言)选择器
标签名1，标签名2{属性1:属性值2；属性2：属性值2；...；}
6.子代选择器
标签名>标签名{属性1:属性值2；属性2：属性值2；...；}
7.后代选择器
标签名 标签名{属性1:属性值2；属性2：属性值2；...；}

-->

 <!DOCTYPE html >

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta  http-equiv="content-type" content="text/html; charset=utf-8">

         <title></title>

         <style type="text/css">

             p,span,h1,h2{

                font-size: x-large;

             }

             .c1{

                 background-color: #7FFF00;

             }

             p{

                 background-color: cadetblue;

             }

             #d1{

                 width: 600px;

                 height: 500px;

                 font-family: "agency fb";

                 border: 1px solid yellow;

             }

             #d2{

                 width: 400px;

                 height: 300px;

                 font-family: "agency fb";

                 border: 1px solid goldenrod;

             }

             #d1>span{

                 color: #DAA520;

             }

             #d1 span,h1,h2{

                 color:chartreuse;

             }

         </style>

     </head>

     <body>

         <p>段落标签</p>

         <span class="c1" >文本标签</span>

         <div id="d1">

             <span>文本标签</span>

             <span></span>

             <div id="d2">

                 <h1>一级标签</h1>

                 <h2>二级标签</h2>

             </div>

         </div>

     </body>

 </html>

Html5与CSS3(选择器)的更多相关文章

  1. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  2. HTML5 与 CSS3 jQuery部分知识总结【转】

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  3. HTML5和CSS3新特性一览

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  4. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  5. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  6. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  8. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  9. HTML5和CSS3的能量究竟是怎样的？

    Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...

随机推荐

  1. spring boot 整合 ehcache

    1. 该说的话 每个人都应当学会独立地去思考.去寻找答案,而不是一味地伸手向他人索取所谓的标准答案. 首先,别成为"拿来主义"者,其次远离"拿来主义"的人. 2 ...

  2. Problem H: 质心算法

    Description 在很多应用中,需要对某个目标进行定位.比如对于一个未知坐标的点A,假定已知A点与N个点相邻,且已知N个相邻点的坐标,则可取N个点的质心作为A点坐标的一个估计值. 所谓质心,就是 ...

  3. SAS X option

    1. SAS X选项就是调用DOS命令. 例子: option noxwait;/*黑窗口执行完命令后自动关闭*/ %let path =.; %let filter=*.lst; X “ dir & ...

  4. 谁来教我渗透测试——VMware工具安装和使用

    今天我们继续渗透测试学习系列了,昨天我们看了基础概念,今天我们来学习一下渗透测试必备的功能VMware安装. 首先我们下载好VMware workstation Pro的安装包.可以在百度上直接百度下 ...

  5. PHP 实例 - AJAX 与 XML-AJAX XML 实例

    PHP 实例 - AJAX 与 XML AJAX 可用来与 XML 文件进行交互式通信. AJAX XML 实例 下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息: 实例   Sele ...

  6. PHP date_interval_format() 函数

    ------------恢复内容开始------------ 计算两个日期间的间隔,然后格式化时间间隔: 实例 <?php $date1=date_create("2013-01-01 ...

  7. PHP mkdir() 函数

    定义和用法 mkdir() 函数创建目录. 如果成功该函数返回 TRUE,如果失败则返回 FALSE. 语法 mkdir(path,mode,recursive,context) 参数 描述 path ...

  8. VMware 虚拟机开机黑屏解决方法

    # 调整VMware硬盘启动优先级 第一步:打开电源时进入固件,也就是BIOS 设置界面. 第二步:找到Main-最下面的Boot-time Diagnostic Screen,敲“Enter”,弹出 ...

  9. Android中的LruCache的原理和使用

    Android中的LruCache的原理和使用 LruCache,虽然很多文章都把LRU翻译成"最近最少使用"缓存策略,但Android中的LruCache真的如此吗? 答案是No ...

  10. 【NOIP2016】组合数问题 题解（组合数学+递推）

    题目链接 题目大意:给定$n,m,k$,求满足$k|C_i^j$的$C_i^j$的个数.$(0\leq i\leq n,1\leq j\leq \min(i,m))$. --------------- ...