<html> <head> <title>testCSS</title> <style type="text/css"> /*1.1定义多个HTML标签的CSS,即h1和h2,h3使用同一个CSS*/ h1,h2,h3 { color:red; } /*1.2派生选择器:依据元素的上下文来定义CSS,即只有li下的strong 元素才会使用此CSS*/ li strong { font-style: italic; font-weight: normal; } /*2.1 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,使用#来定义id选择器**/ #red {color:red;} /*2.2 多个id选择器使用一个CSS定义,注意中间用逗号*/ #aid,#bid{color:green;} /*2.3 id 选择器用于建立派生选择器,以下选择器需要外层元素id为cid,内层元素是p才符合;一个id为“cid”的<p>元素是不符合条件的**/ #cid p{color:yellow;} /*3.1 类选择器 使用.来定义**/ .divcss{padding:20px;color:yellow;} /*3.2 多个类选择器的定义,不起作用**/ .aclass,.bclass{color:red;} /*3.3 类选择器用于建立派生选择器,注意:用于css为redColorCss的元素且子元素为p的元素,而不是用于<p>且其class为redColorCss的**/ .redColorCss p{color:red;} div .greenColorCss {color:green;} /** *总结: 1 三种选择器:html标签选择器 id选择器(#) 类选择器(.) 2 使用逗号可以定义多个html标签选择器与id选择器(#),但不能定义多个类选择器 3 派生选择器:一般用三种选择器 与HTML标签选择器组合,注意是上下级的关系,而不是且的关系 */ </style> </head> <body> 1.选择器<br> <h1>h1的内容 </h1> <h2>h2的内容 </h2> <h3>h3的内容 </h3> 2.派生选择器<br> <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol> 3.id选择器<br> <span id="red">我的id是red,使用id选择器</span> <span id="aid">AAAA</span> <span id="bid">bbbb</span> 4.id 选择器用于建立派生选择器<br> <span id="cid">我只符合id选择器,所以是黑色</span> <p id="cid">我很特殊,请注意</p> <span id="cid"><p>我符合id选择器建立的派生选择器,所以是黄色</p></span> 5.类选择器<br> <span class="divcss">我应用了类选择器</span><br> <span id="aclass">多个类选择器一块定义,不起作用</span><br> <span id="bclass">多个类选择器一块定义,不起作用</span><br> <span id="aclass">使用多个类选择器 <span id="bclass">使用多个类选择器</span></span><br> 6.类选择器用于建立派生选择器<br> <p class="redColorCss">我不应该是红色的</p> <span class="redColorCss">我不应该是红色的</span> <span class="redColorCss"><p>我应该是红色的</p></span> 6.1 类选择器用于建立派生选择器<br> <div class="greenColorCss">我不应该是绿色的</div> <div><span class="greenColorCss">我应该是绿色的</span></div> <div><h5 class="greenColorCss">我应该是绿色的</h5></div> </body> </html>
相关推荐
选择器在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中...
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
使用HTML+css3写的城市选择器。实现了城市多选了单选功能。支持最多选择三个城市。 适合下载下来作为一个参考的demo。
30个最常用css选择器解析 CSS
React组件的css选择器
通过css、javascritp实现一个日期选择器的源代码 实用方便
CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值,并显示最近使用的颜色的列表。 默认情况下,颜色选取器将输入...
理解css属性选择器
CSS基础-派生选择器,CSS入门必备资料
CSS属性选择器详解.pdf
css选择器里面有css的几十种选择、获取、什么都有.
Dean Edwards 编写了一个 ie7.js 可以使您的IE6支持支持CSS2的选择器,以及CSS3的许多标签。您只需要在<head></head>添加以下语句即可 <br><!--[if lt IE 7]><script src="IE7.js" type="text/javascript"></...
前端必须掌握的css选择器方法
CSS选择器-.pdf
在定义CSS时,需要知道其书写语法和影响范围,此文档给你说明
CSS3选择器教辅.pdf
里面不仅包含了css3的所有选择器,还有css2的各种版本以及对比。
包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况