论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}CSS命中目标:子选择器、相邻同胞选择器与属性选择器等

文章类别:div+css布局 | 发表日期:2008-9-26 11:33:50

 在CSS布局网页开发中,我们还会用到一常非常有用的选择器,可以用它来进行整体布局声明,这就是通用选择器。看下面的代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
margin:0;
padding:0;
}

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

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

子选择器

  请注重这个选择器与后代选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择,我们看下面的代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
CSS:
#links a {color:red;}
#links > a {color:blue;}
HTML:
<p id="links">
<a href="http://www.21shipin.com/">Div CSS教程</a>>
<a href="http://www.21shipin.com/">CSS布局实例</a>
<a href="http://www.21shipin.com/">CSS2.0教程</a>
</p>

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

相邻同胞选择器

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
CSS
h1 p {color:blue}
HTML
<h1>21shipin.com是一个非常专业的CSS站点</h1>
<p>在21shipin.com的Div CSS教程中,介绍了很多关于CSS网页布局的知识。</p>
<p>在21shipin.com的CSS布局实例中,有很多与CSS布局有关的案例。</p>

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

属性选择器

  这个选择器也有点复杂,在实际应用中对于新手来说还很遥远,它是根据某个属性是否存在或属性的值来找到目标元素,是一个非常有意思的功能,假如能做到灵活运用,其效果也会非常强大。关于这一块的知识我们以后在21shipin.com的文章中具体说明。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058