码迷,mamicode.com
首页 > 其他好文 > 详细

选择符

时间:2017-04-03 11:32:58      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:同时存在   href   under   class   order   群组   bsp   center   标签   

HTML代码:

  <div id="div1"></div>  

  <div id="div2"></div>  id:是唯一的,一个html中只能存在一个,不能有两个id相等的标签,并且一个id只能有一个值。

 

  <div class="div"></div>  

  <div id="divId" class="div"></div>  id class:他们可以同时存在于一个标签。此标签会具有两者的所有css属性(此处先不谈优先级问题)。

  <div class="div1 div2"></div>  class:它是一组属性,可以允许多个标签同时使用同一个class,并且一个标签也可以同时使用多个class值。当拥有两个或者两个以上class值时,它也会同时具有这些class所对应的css属性(此处先不谈优先级问题)。

 

  <p>p1</p>

  <p>p2</p>

 

  <div> 

    <p>div-p</p>

    <p>div-p</p>

    <a href="#">div-a</a>

    <p>

        <span>div-p-span</span>

    </p>

  </div>

CSS代码:

<style>

#div1{width:100px;height:100px;}  #:表示id选择符,即#div1中#表示用id选择,div1为id值。

#div1,#div2{border:1px solid red;}  #div1,#div2:表示为群组选择符,这些标签的样式是相同的。

.div{background:red;}  .:类选择符,即.div中.表示用class选择,div为class的值。

.div1{margin:10px;}

.div2{padding:10px;}

.divId{padding:10px;}

p{text-align:center;}  p:此处p不仅仅代表p标签,可以为所有标签,可以为div、a、img…,此选择方式为类型选择符,即此html中所有的p或者div、a…都有同样的样式。

div p{color:blue;}  div p:包含选择符,即表示在div内的所有的p标签拥有的相同的css样式。

div span{color:green;}  div span:在html中span是在div下的p下的,但是我们在这里是可以这样写的。当然也恶意写为:div p span{color:green;}。这两个的选择取决于准确性和便捷性。

*{border:1px solid grey;}  *:通配符,即给所有的html标签加样式。

</style>

选择符

标签:同时存在   href   under   class   order   群组   bsp   center   标签   

原文地址:http://www.cnblogs.com/AZZCS-0222/p/6661473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!