展会信息港展会大全

CSS命中目标:子选择器、相邻同胞选择器与属性选择器等
来源:互联网   发布日期:2016-03-25 16:33:29   浏览:1753次  

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

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

代码如下

复制代码

* {

margin:0;

padding:0;

}

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

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

子选择器

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

CSS:

代码如下

复制代码

#links a {color:red;}

#links > a {color:blue;}

HTML:

<p id="links">

<a href="http://www.111cn.net/">Div+CSS教程</a>>

<a href="http://www.111cn.net/">CSS布局实例</a>

<a href="http://www.111cn.net/">CSS2.0教程</a>

</p>

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

相邻同胞选择器

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

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港