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

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

2024-09-14 04:54:13   220人阅读

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选择器


联系
我们