css三种选择器

最新推荐文章于 2025-02-28 17:35:43 发布

原创最新推荐文章于 2025-02-28 17:35:43 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中的不同选择器类型及其用法，包括HTML标签选择器、ID选择器、类选择器以及它们如何通过派生选择器组合使用。通过具体的HTML示例展示了各种选择器的实际效果。

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