通过网页设计师的大量经验，我们会记住所有种代码语法，兼容性和片段。有一些特定的CSS，可以真正帮助改变你的网站设计改变较旧的技术规则和声明，使用更少的代码写出同样的效果是我们一直不断追求的目标

以下是5 个CSS选择器将帮助您保持您的XHTML页面更加干净

这些文章可能你也喜欢

1。匹配子类

在设计菜单有时你需要选择具有多个类的元素，如选择“item”和“active”的所有元素：

  
     
    
      
item 1
    
      
active item 2
    
      
item 3
  
     

典型的解决方案是使用父元素，例如：

.list .item {color: #ccc;} / *所有的元素'item'类* / .list .active {text-decoration: underline;} /* *所有的元素“item”和“active”类**/

 

但是，如果你需要排除“active”类的元素，但离开“item“，该怎么办呢？这里是子集匹配选择器代码：

  
     
    
      
.item CSS selector applied
    
      
.item and .item.active CSS selectors applied 
    
      
.item and .item.active CSS selectors applied too
    
      
no CSS selectors applied
  
     

浏览器支持：火狐，Chrome，Safari浏览器，IE 7及以上

2. 属性选择

有时，你可能需要匹配元素的特定属性值. 对我来说最常见的情况是form表单的提交, 例如. 所有文本输入元素一个应用样式，提交按钮另一种样式风格遇到这种问题我见到最多的就是给inputs定义一个不同的样式，像下面的例子：

  
     
    
      Login    
          
      Password    
          
      
    
        
     

上面写的确实是对的, 但我有一个解决方案，无需额外定义类， 对于这个问题，我将使用属性选择器:

/* 匹配任何一个元素的“name”属性集（任何值） */a[name] {
    ... styles ..}/* 匹配任何INPUT元素为“type”为属性值“text */input[type="text"] {
    ... styles ..}/* 匹配任何DIV元素，其的“myattribute”属性值是一个空格分隔的值列表, 其中一个是完全等于“value3”.    e.g. 
     
       */div[myattribute~="value3"] {
    ... styles ..}/* 匹配任何DIV元素，其“myattribute”属性有一个连字符分隔的值.   e.g. 
      
        */div[myattribute~="value2"] {
    ... styles ..}
      
     

所以使用这些规则可以把代码写成这样的样式

     
  
      Login  
        
      Password  
        
      
  
      
     

浏览器支持：火狐，Chrome，Safari浏览器，IE 7及以上.

3. 相邻的选择器

你可能会面临的另一个问题是元素在同一水平上 应用样式的(像 将鼠标指针放在项目上看菜单效果):

/* 匹配在同级元素一个“active”类之前任何一个元素* */a.active + a/* 匹配在同级元素一个“active”类之后的任何一个元素**/a + a.active/* ... and some useful tips ... *//* 匹配除最后一个外的所有li元素*/li + li {
    .. style .. }/* 匹配 A:hover 的第一个元素 */a:hover { /* 第一个样式： 悬停元素 */ }/* 除了第一个悬停元素的样式*/a + a:hover {
    .. styles .. }

它可以被用于例如​​菜单上的样式等。

下面是利用相邻选择器更容易的方式：

  
     
    
      Item 1    
      Item 2    
      Item 3    
      Item 4    
      
   
     

浏览器支持：火狐，Chrome，Safari浏览器，IE 7及以上

4. 子选择器

子选择器匹配元素是一些其他元素的子元素。

子选择器组成是隔开的两个或多个选择器">"。

/* 匹配 DIV 元素内的所有 P 元素 */div > p { .. slyles .. }div ol>li p { .. styles ..}

如果您想要段落内一些具有内容的 div 中的所有图像左对齐，下面的代码是能有帮助的:

     
  
      
Lorem lorem lorem 
  
      
Lorem lorem lorem  Lorem lorem lorem 
  
      
     

您可以执行以下操作:

div.content p > img {float: left;}

浏览器支持：火狐，Chrome，Safari浏览器，IE 7及以上.

5. 通用选择技巧

 

最后，一​​些有用的技巧。正如你所知道的通用选择（“*”）可以匹配任何元素，如果结合其他选择，在一些地方也能是有用的。

例如:

/ *匹配所有元素的“href”属性* / *[href] { .. styles ..}/ *匹配的所有元素'alt'为空的属性* / *[alt=""]/* Matches all P elements which are grandchild (not direct child) of DIV element */div * p { .. styles ..}

浏览器支持：火狐，Chrome，Safari浏览器，IE 7及以上.