<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>