首页 > > 网页制作 > css >

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

2018-06-24 01:11:16来源：未知阅读 ()

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 特殊性

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML 网页<head></head>里的 <m

下一篇：input【type="checkbox"】标签与字体对齐

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签