首页 > 代码库 > 为样式找到应用目标-CSS选择器

为样式找到应用目标-CSS选择器

1,常用选择器:元素(标签/简单)选择器、ID选择器、类选择器、后代选择器(可以将类或者ID应用于它们的祖先,然后使用后代选择器来定位)

2,伪类:有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态,可以使用伪类选择器来完成:

/*makes all unvisited links blue*/
a:link { color: blue; }

/*makes all visited links green*/
a:visited { color: green; }

/*makes links red when hovered or actived. focus is added for keyboard support*/
a:hover, a:focus, a:active { color: red; }

/*makes table rows red when hovered over*/
tr:hover { background-color: red; }

/*makes input elements yellow when focus is applied*/
input:focus { background-color: yellow; }

:link和:visited成为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素,大多数浏览器都支持这个功能。但是IE6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。如果不需要兼容IE6、IE7,就很好啦。

最后,值得指出的是,通过把伪类链接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

    /*makes all visited links olive on hover*/
    a:visited:hover { color: olive; }

通用选择器:最强大但最少用,在与其他选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者跳过一级后代。

3,高级选择器:

CSS2.1和CSS3有其他许多有用的选择器。不过,虽然现代大多数浏览器支持这些高级选择器,但是IE6或更低版本不支持。好在在创建CSS时考虑到了向后兼容性。如果浏览器不理解某个选择器,那么它会忽略整个规则。因此,可以在现代浏览器中应用样式和易用性方面的改进。同时不必担心它在老式浏览器中造成问题。但是要记住,在对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级浏览器。

3.1 子选择器和相邻同胞选择器

IE7和更高版本都支持子选择器。但是IE7中有一个小bug,如果父元素和子元素之间有HTM注释,就会出问题。

在IE6和更低版本中,可以使用通用选择器模拟子选择器的效果。为此,先在所有后代上应用你希望子元素具有的样式,然后,使用通用选择器覆盖子元素的后代上的样式。请看下面的例子:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a>
        <ul>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul> 
    #nav li {
        background: url(folder.png) no-repeat left top;
        padding-left: 20px;
    }
    
    #nav li * {
        background-image: none;
        padding-left: 0;
    }
    #nav > li {
        background: url(folder.png) no-repeat left top;
        padding-left: 20px;
    }

上面2中CSS的写法,效果是一样的。

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。与子选择器一样,如果在目标元素之间有注释,这在IE7中也会出现问题。

3.2 属性选择器

属性选择器可以根据某个属性是否存在或属性的值来寻找元素,因此能够实现某些非常有意思和强大的效果。

例如,当鼠标悬停在具有title属性的元素上时,大多数浏览器会显示一个工具提示。可以使用这种特性来解释某些内容(比如首字母缩拼词和缩写词)的含义:

<p>The term<acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as
a word
</p>
 但是,如果不把鼠标悬停在这个元素上,那么没有任何迹象能够表明存在这一额外信息。为了解决这个问题,可以使用属性选择器对具有title属性的acronym元素应用与其他元素不同的样式——在下面的例子中,在它们下面加上点,还可以在鼠标悬停在这个元素上时将鼠标指针改成问号,表示这个元素与众不同,从而提供更多的上下文相关信息。
    acronym[title] {
        border-bottom: 1px dotted #999;
    }
    
    acronym[title]:hover,
    acronym[title]:focus {
        cursor: help;
    }

 除了根据某个属性是否存在对元素应用样式之外,还可以根据属性值应用样式。例如,使用rel属性值nofollow链接的站点无法从Google获得评级收益(ranking benefit)。以下规则在这种链接旁边显示一个图像,以此表示不推荐这个站点:

a[rel=‘nofollow‘] {
        background: url(nofollow.gif) no-repeat right center;
        padding-right: 20px;
    }

 包括IE7的现代浏览器都支持这些选择器,然而,由于IE6不支持属性选择器,可以利用它对IE6应用一种样式,对更符合标准的浏览器应用另一种样式。例如,AndyClarke利用这种技术为IE6提供网站的黑白版本,为其他浏览器提供彩色版本。

    #header {
        background: url(branding-bw.png) repeat-y left top;
    }
    
    [id=‘header‘] {
        background: url(branding-color.png) repeat-y left top;
    }

 一些属性可以有多个值,值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如,XFN微格式允许在锚链接的rel属性中添加关键字来定义你与站点的关系。假设某个站点属于我的同事,我就可以在博客上的链接中添加co-worker关键字来表示这一关系。然后可以在这位同事的姓名旁边显示一个特殊的图标,以此表明我和这个人一起工作。

.blogroll a[rel~="co-worker"] {
    color: #fff;
    background: blue;
}
    <ul class="blogroll">
        <li><a href="http:adactio.com/" rel="friend met colleague co-worker">Jeremy Keith</a></li>
    </ul>

3.3 层叠和特殊性

CSS层叠(cascade)的重要度次序如下:

a,标有!important的用户样式

b,标有!important的作者样式

c,作者样式

d,用户样式

e,浏览器/用户代理应用的样式

具有更加特殊性选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。(可以通过将任何规则指定为!important来提高它的重要度,让它优先于任何规则,甚至优先于作者加上的!important标志的规则。)

3.3.1 特殊性

 

 

为样式找到应用目标-CSS选择器