本文向大家描述一下CSS中子选择器、相邻同胞选择器与属性选择器的使用，在CSS布局网页开发中，我们还会用到一常非常有用的CSS选择器，可以用它来进行整体布局声明，这就是通用CSS选择器。

专注于为中小企业提供网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业富锦免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

CSS命中目标：子选择器、相邻同胞选择器与属性选择器

在前面的文章中我们讲了《类型选择器与后代选择器等》，通过这两种CSS选择器可以搞定很多东西，为它们找到目标。在CSS布局网页开发中，我们还会用到一常非常有用的CSS选择器，可以用它来进行整体布局声明，这就是通用CSS选择器。看下面的代码：

ExampleSourceCode

 
 
 

  
  
  
*{  
  
  
  
margin:0;  
  
  
  
padding:0;  
  
  
  
}  
  
  
  
 
 
 
 

　　这种形式的代码一般不会多次出现，在页面代码中出现一次而已，但它的功能是非常强大的，在计算机领域中一般情况下都约定“*”为通配符，它的声明将会作用于页面中所有的可用元素，使用它可以定义一些页面中基本的规则，如边距margin、填充padding、字体font-family、文字大小font-size、背景颜色background-color等等。

　　由于某些浏览器不支持或支持的不够好，下面所介绍的三种选择器并不是非常的常用，至少目前的情况是这样的，但随着时间的推移，某些功能还是非常有用的，我们简单了解一下子选择器、相邻同胞选择器与属性选择器。

子选择器

　　请注意这个CSS选择器与后代选择器的区别，子选择器（childselector）仅是指它的直接后代，或者你可以理解为作用于子元素的***个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：

ExampleSourceCode

CSS：

 
 
 

  
  
  
#linksa{color:red;}  
  
  
  
#links>a{color:blue;}  
  
  
  
 
 
 
 

 HTML：

 
 
 

  
  
  
 
  
  
  
Div+CSS教程> 
  
  
  
CSS布局实例 
  
  
  
CSS2.0教程 
  
  
  
 
  
  
  
 
 
 
 

 　　我们将会看到***个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我们在一开始也强调了不太兼容的现状。

相邻同胞CSS选择器

　　我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位***个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码：

ExampleSourceCode

CSS

 
 
 

  
  
  
h1+p{color:blue}  
  
  
  
 
 
 
 

HTML 

 
 
 

  
  
  
52CSS.com是一个非常专业的CSS站点
 
  
  
  
在52CSS.com的Div+CSS教程中，介绍了很多关于CSS网页布局的知识。
 
  
  
  
在52CSS.com的CSS布局实例中，有很多与CSS布局有关的案例。
 
  
  
  
 
 
 
 

　　我们将会看到***个段落“在的Div+CSS教程中，介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而第二段则不受此CSS样式的影响。

属性选择器

　　这个CSS选择器也有点复杂，在实际应用中对于新手来说还很遥远，它是根据某个属性是否存在或属性的值来找到目标元素，是一个非常有意思的功能，如果能做到灵活运用，其效果也会非常强大。关于这一块的知识我们以后在52CSS.com的文章中详细说明。

新闻标题：CSS三大选择器区别
文章源于：http://www.gawzjz.com/qtweb/news29/188629.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联