CSS id选择器使用秘诀
创始人
2024-07-11 10:40:13
0

本文向大家描述一下CSS id选择器的用法,id选择器可以为标有特定id的HTML元素指定特定的样式,希望本文介绍对你有所帮助。

CSS id选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以"#"来定义。

下面的两个id选择器,***个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: 

  1. #red{color:red;}  
  2. #green{color:green;}  
  3.  

下面的HTML代码中,id属性为red的p元素显示为红色,而id属性为green的p元素显示为绿色。 

  1. 这个段落是红色。

     
  2. 这个段落是绿色。

     
  3.  

注意:id属性只能在每个HTML文档中出现一次。

id选择器和派生选择器

在现代布局中,id选择器常常用于建立派生选择器。

  1. #sidebarp{  
  2.  font-style:italic;  
  3.  text-align:right;  
  4.  margin-top:0.5em;  
  5.  }  

上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如或者,不过这样的用法是非法的,因为不可以在内联元素中嵌入

一个选择器,多种用法

即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被使用很多次:

  1. #sidebarp{  
  2.  font-style:italic;  
  3.  text-align:right;  
  4.  margin-top:0.5em;  
  5.  }  
  6.  
  7. #sidebarh2{  
  8.  font-size:1em;  
  9.  font-weight:normal;  
  10.  font-style:italic;  
  11.  margin:0;  
  12.  line-height:1.5;  
  13.  text-align:right;  
  14.  }  

在这里,与页面中的其他p元素明显不同的是,sidebar内的p元素得到了特殊的处理,同时,与页面中其他所有h2元素明显不同的是,sidebar中的h2元素也得到了不同的特殊处理。

单独的选择器

id选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

  1. #sidebar{  
  2.  border:1pxdotted#000;  
  3.  padding:10px;  
  4.  }  
  5.  

根据这条规则,id为sidebar的元素将拥有一个像素宽的黑色点状边框,同时其周围会有10个像素宽的内边距(padding,内部空白)。老版本的Windows/IE浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素: 

  1. div#sidebar{  
  2.  border:1pxdotted#000;  
  3.  padding:10px;  
  4.  

【编辑推荐】

  1. CSS类选择器class用法探究
  2. IE6.0对padding的解读分析
  3. CSS样式表高效使用八大秘诀
  4. CSS textarea高度自适应问题解决方案
  5. IE6中常见CSS兼容性解决十大技巧

 

 

相关内容

热门资讯

PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候,笔者扑哧笑了,不是笑这款笔记本,而是笑这款产品的颜色...
什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力,更是有效的利用了资源,提高了效率。那么我们现在来说一下网络负载...
如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
30分钟搞定iOS自定义相机 最近公司的项目中用到了相机,由于不用系统的相机,UI给的相机切图,必须自定义才可以。就花时间简单研究...
Intel将Moblin社区控... 本周二,非营利机构Linux基金会宣布,他们将担负起Moblin社区的管理工作,而这之前,Mobli...