CSS选择器（一）

常用的选择器：

1，类型选择器（元素选择器、简单选择器）：

p{ color: black ;}

h1{font-weight: bold;}

2，ID选择器——#字符表示

#info ｛foot-weight:bold;｝

3，类选择器——.字符表示

.date-posted{ color:#ccc; }

4，后代选择器:

blockquote    p    ｛padding-left:2em;｝

不要过度的依赖类选择器和ID选择器。

可以结合使用类型、后代、ID和类这几种选择器:

#main-content   h2  {font-size: 1.8em;}
#secondary-content h2  {font-size:1.2em;}

<div id=”main-content”>
      <h2>Articles</h2>
            …
</div>
<div     id=”secondary-content”>
      <h2>Latest news</h2>
            …
</div>

5，伪类选择器：

a:link{color:blue;}

 

通用选择器：

6，通用选择器——一般用来对页面上所有元素应用样式：
以下表示删除每个元素上默认的浏览器内边距和外边距

*｛
    padding:0;
    margin:0;

｝

高级选择器：

7，子选择器——选择元素的直接后代，即子元素。

子选择器指定列表的子元素的样式，但是不影响它的孙元素

#nav>li{
     background: url (folder.png) no-repeat left top;
     padding-left: 20px;
}

<ul  id=”nav”>
    <li><a href=”/home/”>Home</a></li>
    <li><a href=”/service/”>service</a></li>
          <ul>
                 <li><a  href=”service/design/”>Design</a></li>
                 <li><a  href=”service/development/”> Development </a></li>
                 <li><a  href=”service/consultancy/”> Consultancy </a></li>

                    </ul>
</li>
</li><a href=”/contact/”>Contact Us</a></li>

</ul>

 

转载于:https://my.oschina.net/u/3286642/blog/856899