网络编程
位置:首页>> 网络编程>> 网页设计>> 30个最常用css选择器解析(2)

30个最常用css选择器解析(2)

作者:iiduce  发布时间:2011-06-16 20:36:37 

标签:css选择器,css,浏览器

5. X

a { color: red; }  
ul { margin-left: 0; }

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。

兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera

6. X:visited和X:link

a:link { color: red; }  
a:visted { color: purple; }

使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

ul + p {
      color: red;
   }

相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素)

兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

div#container > ul {
     border: 1px solid black;
   }

<div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul> 
  </div>

子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。在上面的css和html例子中,div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

9. X ~ Y


ul ~ p {
      color: red;
   }


相邻选择器,与前面提到的X+Y不同的是,X~Y匹配与X相同级别的所有Y元素,而X+Y只匹配第一个。

兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com