#和之间有什么区别?用CSS?

时间:2009-09-05 13:38:48

标签: css

#.与CSS有什么区别?

#main
{
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}


.main
 {
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
 }

8 个答案:

答案 0 :(得分:8)

''代表 id 。 “”是

所以.. <tagname id="main"><tagname class="main"> ....

希望有所帮助。

答案 1 :(得分:7)

'#'符号表示html元素的id。它适用于:

<div id='main'>...</div>

'' sign表示html元素的类。这是为了:

<div class='main'>...</div>

答案 2 :(得分:6)

来自the HTML 4 spec

  

id属性为元素分配唯一标识符。

     

id属性在HTML中有几个角色:

     
      
  • 作为样式表选择器。
  •   
  • 作为超文本链接的目标主播。
  •   
  • 作为从脚本引用特定元素的方法。
  •   
  • 作为声明的OBJECT元素的名称。
  •   
  • 用于通用处理   用户代理(例如用于识别
      从HTML中提取数据时的字段   页面到数据库,翻译
      HTML文档转换成其他格式,
      等)。
  •   
     

另一方面,class属性为一个元素分配一个或多个类名;该元素可以说属于这些类。类名可以由多个元素实例共享。 class属性在HTML中有几个角色:

     
      
  • 作为样式表选择器(当作者希望分配样式时)   信息到一组元素。)。
  •   
  • 供用户代理进行一般处理。
  •   

答案 3 :(得分:5)

类(.my_class_name)可能在同一页面中多次出现,而id(#my_id_name)是唯一的。

答案 4 :(得分:1)

'#'表示使用id,和。代表一个类。如您所知,您无法在HTML中复制ID,因此如果您希望使用相同的样式来表示多个项目,则可以改为使用类。

答案 5 :(得分:1)

#自动应用于具有相同ID的元素 CSS

#id1 {some style}

HTML

<div id="id1"> <-- automatically applied here...

CSS

.Dot1 {}
DIV.Dot2 {} 

DIV.Dot2只适用于带有“Dot2”类的DIV,如果任何其他元素试图使用Dot2它将无法正常工作

HTML

<div class="Dot1"> <-- only applies when you give class..

。实际上你不必自动应用它,你必须在你想要应用它们的每个元素的“class”属性中使用它。

答案 6 :(得分:1)

#表示ID selector.表示class selectorIDs must be unique in a document(因此只有一个具有一个特定ID的元素),而class 可以包含多个元素,而一个元素可以在多个类中。

因此#main将选择 ID为main元素,而.main将选择所有元素班main。除此之外,两个选择器都有不同的specificity,它们会影响CSS属性应用于元素或覆盖现有属性的顺序。

答案 7 :(得分:0)

#与id名称一起用于在必须唯一的html页面中为其编写css。

.与类名一起用于为其编写css,可以在html页面的任何地方使用。

示例::

 <div id="container"> 
     <div class="container"> 
        <div class="container"> 
             Foo thing
        </div>
     </div>
 </div>

其CSS如下

#container, .container {
   position: relative;
   margin: 20px 50px;
   ......
   .........
}

或分开如下

#container {
    position: relative;
    margin: 20px 50px;
    ......
    .........
}

.container {
    position: relative;
    margin: 20px 50px;
    ......
    .........
}