1.基本CSS选择器

　　（1）标记选择器

　　　　<style>
                       h1{ color:red; font-size:25px;}
           </style>

　　　　例：

 <html>

     <head>

         <title>标记选择器</title>

         <style type="text/css">

             h2{background-color:red;color:blue;text-align:center;}

             p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}

         </style>

     </head>

     <body>

         <h2>这是标记选择器</h2>

         <p>标记选择器的段落</p>

     </body>

 </html>

　　（2）类别选择器

　　　　<style type="text/css">

　　　　　　　　.p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}

　　　　</style>

　　　　例：

 <html>

     <head>

         <title>类别选择器</title>

         <style type="text/css">

             h2{background-color:red;color:blue;text-align:center;}

             .p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}

             .p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}

         </style>

     </head>

     <body>

         <h2>这是类别选择器</h2>

         <p class="p1">类别选择器的段落！</p>

         <p class="p2">段落！</p>

     </body>

 </html>

　　（3）ID选择器

　　　　<style type="text/css">

　　　　　　　　#p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}

　　　　</style>

　　　　例：

 <html>

     <head>

         <title>id选择器</title>

         <style type="text/css">

             h2{background-color:red;color:blue;text-align:center;}

             #p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}

             #p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}

         </style>

     </head>

     <body>

         <h2>这是id选择器</h2>

         <p id="p1">段落</p>

         <p id="p2">这是一个段落</p>

     </body>

 </html>

2.复合CSS选择器

　　（1）“交集”选择器

　　　　　　h3.class{color:red;font-size:25px;}

　　　　例：

 <html>

     <head>

         <title>交集选择器</title>

         <style type="text/css">

             p.p1{color:yellow;}

             p{color:green;font-size:10px;}

             .p1{color:blue;}

             h2{color:red;font-size:14px;}

         </style>

     </head>

     <body>

         <h2>这是标题</h2>

         <p class="p1">段落1</p>

         <p>段落2</p>

     </body>

 </html>

　　（2）“并集”选择器

　　　　　　.class,h3{color:red;fon-size:25px;}

　　　　例：

 <html>

     <head>

         <title>并集选择器</title>

         <style type="text/css">

             h3{color:yellow;font-size:30px;}

             p{color:blue;font-size:20px;}

             .p1,h3{color:red;font-size:16px;}

         </style>

     </head>

     <body>

         <h3>这是并集选择器</h3>

         <p class="p1">这是段落</p>

         <p>段落</p>

     </body>

 </html>

　　（3）“后代”选择器

　　　　　　.class h3{color:red;fon-size:25px;}

　　　　例：

 <html>

     <head>

         <title>后代选择器</title>

         <style type="text/css">

             p strong{color:red;}

             ul .li1{color:red;font-size:16px;}

             ul li ul #li2{color:green;}

         </style>

     </head>

     <body>

         <p>

             <strong>加粗</strong>

         </p>

         <ul>

             <li>a</li>

             <li class="li1">b</li>

             <li>

                 <ul>

                     <li>c</li>

                     <li id="li2">d</li>

                 </ul>

             </li>

         </ul>

     </body>

 </html>

　　3.CSS继承性

　　　　例：

 <html>

     <!--

         1. 给整个页面填一个一个背景

         2. 给em添加一个样式样倾斜效果消失

         3. 改变第一层UL的样式为蓝色，16px

         4. 改变第二层的UL的样式为红色 14px

         5. 改变body下面的ul下面的li下面的ol下面的li为#f8f8f8

     -->

     <head>

         <title>css继承结构</title>

         <style type="text/css">

             body{background-color:#89C869;}

             ul{color:blue;font-size:16px;}

             ul ul{color:red;font-size:14px;}

             ul li ol li{color:#f8f8f8;}

             h2 em{font-style:normal;}

             ul li ul li ul{color:black;;}

         </style>

     </head>

     <body>

         <h2><em>网页设计课程</em></h2>

         欢迎大家学习网页设计课程

         <ul>

             <li>在这里,你可以学到:

                 <ul>

                     <li>HTML</li>

                     <li>CSS

                         <ul>

                             <li>CSS初级</li>

                             <li>CSS中级</li>

                             <li>CSS高级</li>

                         </ul>

                     </li>

                     <li>JavaScript</li>

                 </ul>

             </li>

             <li>你还可以学习到:

                 <ol>

                     <li>fireworks</li>

                     <li>flash</li>

                     <li>dreamweaver</li>

                 </ol>

             </li>

         </ul>

         如果您有任何问题及时提问

     </body>

 </html>

HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性的更多相关文章

  1. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  2. 后端码农谈前端（CSS篇）第三课：选择器

    一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...

  3. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  4. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  5. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  6. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  7. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  8. CSS选择器，CSS3选择器

    CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器( ...

  9. 精通CSS高级Web标准解决方案（1-1选择器）

    设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...

随机推荐

  1. CSS3秘笈复习：第九章&第十章

    第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...

  2. Animate.css让添加CSS动画像喝水一样容易

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. JavaEE 配置文件 应用首选项存储

    JavaEE 配置文件 应用首选项存储 @author ixenos 什么是首选项? 首选项Preferences 指配置信息 首选项存储就是指对配置信息的存储   有什么方式存储? 有两种,一种存于 ...

  4. 调用短信接口,先var_dump()看数据类型是object需要json_decode(json_encode( $resp),true)转换成array

    返回的数据.先看类型,如果是object类型 先json_encode, 再json_decode,加true 转换成数组 $resp = $c->execute($req); var_dump ...

  5. Gentoo:Xorg:Failed to load module "……" 问题

    错误描述: 安装完xorg-server后,startx启动桌面环境,出现缺少模块错误. Xorg:Failed to load module "--" 查看log: cat /v ...

  6. 理解 Objective-C 的 ARC

    英文原文:Understanding Automatic Reference Counting in Objective-C 自动引用计数(Automatic Reference Counting, ...

  7. 【Machine Learning in Action --5】逻辑回归（LogisticRegression）

    1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...

  8. ADO.NET基础、数据增删改查

    ADO.NET:数据访问技术,就是将C#和MSSQL连接起来的一个纽带.我们可以通过ADO.NET将内存中的临时数据写入到数据库中,也可以将数据库中的数据提取到内存中供程序调用. 数据库数据的增.删. ...

  9. windows禅道环境搭建

    zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html   搭建环境需要下载两个文件 1) ...

  10. java代理的深入浅出(三)-JavaAssist，ASM

    简介 类似字节码操作方法还有ASM.几种动态编程方法相比较,在性能上Javassist高于反射,但低于ASM,因为Javassist增加了一层抽象.在实现成本上Javassist和反射都很低,而ASM ...