css 選擇器

1、標簽選擇器

p{
font-size: 12px;
background: #900;
color: 090;
}

2、ID選擇器

  <style>
      #one{
          font-size: 12px;
          background: #900;
          color: 090;
      }
  </style>

<div id="one">Id選擇器</div>

3、類選擇器

 .one
      {
          font-size: 26px;
          background: #900;
          color: 090;
      }
<div class="one">類選擇器</div>

4、通用選擇器

*{
          font-size: 26px;
          background: #900;
          color: 090;
      }

通用選擇器對網頁中所有標簽進行定義。還有作用就是：保證頁面兼容所有瀏覽器要對頁面左右HTML標簽進行重置可以是用他。如果我們想讓做出的頁面在不同瀏覽器下顯示都一樣，就可以是用通用選擇器。這樣也有不好的地方，因為它會在頁面加載時對所有HTML（HTML4.01共89個標簽）都加上樣式設定。HTML4.01共89個標簽我們用到的其實比較少，只需要對需要設置的標簽進行設置。如：

 body,p,a,li {font-size: 12px}

補充：一個標簽可以有多個類選擇器，不同值之間用空格隔開。也可將Id和class用于同一個標簽中

<div class="one two three">類選擇器</div>

<div id="selector" class="one two three">類選擇器</div>

5、屬性選擇器

h1[class] {
                color: silver;
            }
<h1 class="aa">aaa</h1> 
<!--只要有h1 標簽帶有class都會起作用->

也可以讓所有帶有alt的圖像應用某種樣式，如:

img[alt]{bolder:3px solid red;}

6、根據多個屬性進行選擇如：

a[href][title]{background:red;color:red;}
<a href="#" title="tip">鏈接</a>

7、根據具體屬性值進行選擇如：

a[href="www.baidu.com"] {font-size:12px;}

這種要求必須與屬性值完全匹配

8、部分屬性選擇器：

 p[class~=warning] {
                font-weight: bold;
            }
<p class="warning urgent">段落  </p>

p.warning=p[class~=warning] 這兩者是等價的。注意，如果p[class~=warning] 沒有~，則需要完全匹配，完全匹配的時屬性的順序也必須完全一致

HTML 中有~=不僅僅可以用于標簽的class屬性中（如上樣例），也可直接應用在標簽的屬性上如：

img[alt~="lang"]{ border: 2px solid red;}
<img src="/images/T_CHINESE.png" alt="lang"/>

9、子串匹配選擇器（IE支持有問題）

如：

span[class^="bar"] {
                color: yellowgreen;
            }
            span[class$="y"] {
                font-style: italic;
            }
            span[class*="bearing"] {
                font-size: 120px;
            }
<span class="barren rocky">文本</span>
<span class="barren cloudy">文本2</span>
<span class="cloudy life-bearing">文本3</span>

10、特定屬性選擇器

*[lang|="en"] {
                color: wheat;
            }
<h1 lang="en">aaa</h1>

一般[att|="val"]可用于任何屬性及值，通常應用在匹配語言值

11、選擇子元素

h1 >strong {
                color: red;
            }
<h1>very <strong> good</strong></h1> <!-- 起作用 -->
<h1>very <em><strong> good</strong></em></h1><!-- 無作用 -->

12、選擇后代元素

 h1 strong {
                color: red;
            }
<h1>very <strong> good</strong></h1>  <!-- 起作用 -->

<h1>very <em><strong> good</strong></em></h1><!-- 起作用 -->

13、相鄰兄弟選擇器，如下h1標簽后所有p標簽h1與P同一父元素。

h1+p {
                color: red;
            }
<h1>very  good</></h1>
        <p>!</p>

節選自：KwooJan的《2天駕馭DIV+CSS》

　　　　《CSS權威指南第三版》

posted @ 2014-12-17 10:16 tyb1222 閱讀(220) 評論(0) 收藏舉報

刷新頁面返回頂部

css 選擇器

公告