扼要解读CSS中的种类挑选器、ID挑选器、类挑选器

2021-01-20 06:43 jianzhan

种类挑选器
种类挑选器，是以html元素种类做为挑选标准。
网页页面元素：在CSS实例教程中，针对如“<p></p>”、“<h3></h3>”这些已不叫法为标识，而统1叫法为网页页面元素。
在网页页面元素中，都可以以按种类开展区别，其种类能够做为CSS的挑选符，如“<a></a>”、“<ul></ul>”、“<div></div>”等，对应的挑选器各自为“a”、“ul”、“div”。
事例：

CSS Code拷贝內容到剪贴板
  1. a{   
  2.     text-decoration: none;   
  3. }  

该事例表明网页页面上全部的超连接撤销下划线。

ID挑选器
CSS ID挑选器容许挑选网页页面元素的ID开展款式表运用。
ID挑选器以“#”标志，后边紧跟html元素id名字。
html编码以下：

XML/HTML Code拷贝內容到剪贴板
  1. <div id="nav"><!--nav start-->  
  2.   <h2><a href="index.html">主页</a></h2>  
  3.   <h2><a href="blog.html">blog</a></h2>  
  4.   <h2><a href="guestbook.html">留言板</a></h2>  
  5. </div><!--nav end-->  

在该html编码如中，有1个id="nav"的DIV网页页面元素。应用ID挑选器对该元素开展款式表运用：

CSS Code拷贝內容到剪贴板
  1. #nav {   
  2.     font-size: 14px;   
  3.     width: 500px;   
  4. }  

该CSS款式表明id为nav的网页页面元素，其宽度为500px，其内文本尺寸为14px。

类(class)挑选器
CSS 类挑选器容许挑选网页页面元素的类开展款式表运用。
类挑选器以 . 标记标志，后边紧跟类名字。
1个类挑选器事例：

CSS Code拷贝內容到剪贴板
  1. .catlist {   
  2.     color: #d51300;   
  3. }  

该 CSS 款式表明网页页面中 class="catlist" 的网页页面元素，其文本色调为 #d51300 。
在 html 中运用类挑选器
要在 html 编码中运用1个类(class)款式，只需在标识内应用 class 特性，赋值为类名。
html 编码事例：

XML/HTML Code拷贝內容到剪贴板
  1. <h3>文章内容归类</h3>  
  2. <ul class="catlist">  
  3.   <li>感情全球</li>  
  4.   <li>技术性文章内容</li>  
  5.   <li>互联网文摘</li>  
  6.   <li>别的</li>  
  7. </ul>  

在该 html 编码如中，<ul></ul>内包括的文本色调都被3D渲染为 #d51300 色调。自然，还可以再为在其中的1个或1些 <li></li> 元素独立界定此外的款式。
提醒
如上例所示，要是网页页面元素类名为 catlist ，都将遭受该款式表的危害，而无论它实际是何类型型的网页页面元素。
类挑选器会功效于全部类名同样的网页页面元素，有复用实际效果，这个是和 ID 挑选器的差别。
类名的第1个标识符不可以应用数据，它没法在 Mozilla 或 Firefox 访问器中起功效。

为您推荐