首页 » CSS » css中选择器(selector)

css中选择器(selector)

原文 http://blog.csdn.net/JiangJunDriver/article/details/79065060

2018-01-16 02:00:11阅读(322)

常用选择器

最常用的选择器类型时类型选择器和后代选择器。类型选择器用来寻找特定类型的元素,比如段落或标题元素,只需指定希望特定类型的元素,比如段落或标题元素,只需要指定希望应用样式的额元素的名称。来兴选择器有时候也称为元素选择器或者简单选择器。

p{color : black;}
h1{font-weight:bold;}

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中。值缩进是块引用的后代的段落元素,其他所有段落不收影响。

blockquote p {padding-left:2em}

想要寻找特定的元素,可以使用ID选择器和类选择器。

#intro {font-size:bold}
.date-posted{color:#ccc}
<p id="intro">Happy Birthday Andy</p>
<p class="date-posted">24/3/2009</p>

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

a:link{color:blue};
a:visited{color:green};
a:hover,a:focus,a:active{color:red}
tr:hover{background-color:red}
input:focus{background-color:yellow}

: link和:visited称为链接伪类,只能用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素。大多数浏览器都支持这个功能。但是IE6只注意应用于锚链接的 : active和:hover,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focusz。

通用选择器

通用选择器的作用就像是通配符,它匹配所有可用元素。

*{padding:0,margin:0}
高级选择器 子选择器和相邻同胞选择器

第一个高级选择器是子选择器。后代选择器选择一个元素的所有后代,而子选择器值选择元素的直接后代,即子元素。在下面的例子中,外层列表项显示一个定制的图标,而嵌套列表中的列表不受影响。

#nav>li{
    background:url(folder.png) no-repeat left top;
    padding-left:20px;
}
<ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li>
        <a href="/Services/">Services</a>
        <ul>
            <li><a href="/service/design">Design</a></li>
            <li><a href="/service/development">Development</a></li>
            <li><a href="/service/consultancy">Consultancy</a>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>

有时,你可能需要根据一个元素与另外一个元素的相邻关系对应它的样式。相邻同胞选择器可以同于定位同一个父元素下某个元素之后的元素。

h2 + p {
    font-size:1.4em;
    font-weight:bold;
    color:#777;
}
<h2>Peru</h2>
<p>The first  paragraph ...</p>
<p>The second paragraph...</p>
属性选择器

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

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

<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbrevitaion as it is pronounced as a word.</p>
arconym[title] {
    border-bottom : 1px dotted #999;
}
arconym[title]:hover,acronym[title]:focus{
    cursor : helper;
}
层叠和特殊性

即使在不太复杂的样式表中,要寻找同一个元素可能有两个或更多规则。css通过一个称为层叠(cascade)的过程处理这种冲突。层叠给每个规则分配一个重要度。作者的样式是由站点开发者编写的,被认为是最重要的样式开发表。用户可以通过浏览器应用自己的样式,这些样式的重要度低一级。最后是浏览器或者用户代理使用的默认样式表,它们的重要度是最低的。

因此,层叠采用以下重要度次序。

标有!important的用户样式
标有!important的作者样式表
作者样式
用户样式
浏览器/用户代理应用的样式

然后,根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优于具有一般选择器的规则。如果两个规则的特殊性相同,那么后定义的规则优先。

特殊性

为了计算规则的特殊性,给某种选择器都分配一个数字值。然后,将规则的每个选择器的值加在一起,计算出规则的特殊性。可惜特殊性的计算不是以10位基数的,而是采用一个更高的未指定的基数。这能确保非常特殊的选择器(比如ID选择器)不会被大量一般选择器(比如类选择器所超越)。但是为了简化,如果在一个特定选择其中的选择器数量少于10个,可以以10位基数计算特殊性。

选择器的特殊性分为4个成分等级:a、b、c和d。

如果样式是行内样式,那么a=1
b等于ID选择器的总数
c等于类、伪类和属性选择器的数量
d等于类型选择器和伪元素选择器的数量

选择器 特殊性 以10位基数的特殊性 Style=”“ 1,0,0,0 1000 wrapper #content {} 0,2,0,0 200 content .datePosted {} 0,1,1,0 110 div#content {} 0,1,0,1 101 content {} 0,1,0,0 100 p.content .dateposted{} 0,0,2,1 21 p.content{} 0,0,1,1 11 div p {} 0,0,0,2 2 p {} 0,0,0,2 1

初看上去,上面的特殊性和更高的位指定的基数可能有点让人糊涂。基本上,用style属性编写的规则总比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择的规则比只有类选择器的规则特殊。最后,如果两个规则的特殊性相同,那么后定义的规则优先。

#content div#main-content h2{
    color:gray;
}
#content #main-content>h2{
    color:blue;
}
body #content div[id="main-content"] h2{
    color: green;
}
#main-content div.news-story h2{
    color:orange;
}
#main-content [class="new-story"] h2{
    color:yellow;
}
div#main-content div.news-story h2.first{
    color:red;
}
<div id="content">
    <div id="main-content">
        <h2>......</h2>
        <p>......</p>
        <div class="new-story">
            <h2 class="first">......</h2>
            <p>......</p>
        </div>
    </div>
</div>

令人吃惊的是,两个标题都是灰色的。第一个选择器是由两个ID选择器组成,因此它具有最高特殊性。后面一些选择器看起来更负责,但是因为它们只包含一个ID,所以特殊性总是低于第一个选择器。

在样式表中使用特殊性

例如,如果你希望站点上大多数文本是黑色的,但介绍说明文本是灰色的,这一这样做:

p{color:black;}
p.intro{color:grey}

对于小网站,这很好。但是,在大型站点上,你会发现例外的情况越来越多。就会过分的混乱。尽量保持一般样式非常一般,特殊样式尽可能特殊。

在主体上添加类或ID

一种有意思的特殊用法是在主体(body)标签上应用类或者ID。这样做之后,就可以根据页面或者站点范围内覆盖样式。例如,如果希望新的页面具有特殊的布局,那么可以在主页的主体元素上添加一个类名,并且使用它覆盖样式。

body.news{
    /*do some stuff*/
}
<body class="news">
    <p>......</p>
</body>

有时候,在特殊页面上需要覆盖这些样式,比如在新闻存档页面上。在这种情况下,可以在主体标签上添加ID来标识这个页面。

body.news{
    /*do some stuff*/
}
<body>
    <p>......</p>
</body>

有时候,在特殊页面上需要覆盖这样的样式,比如在新闻存档页面上。在这种情况下,可以在主体标签上添加ID来表示这个页面。

body.news{
    /*do some stuff*/
}
body#archive{
    /* do some different stuff*/
}
<body id="archive" class="news">
    <p>......</p>
</body>

使用类标识页面类型,使用ID表示特定页面,就可以非常灵活地控制站点的设计和布局。

继承

人们常常将继承和层叠混为一谈。尽管他们初看上去有点儿相似,但是这两个概念实际上是很不一样的。好在,继承是一个非常容易理解的概念。应用样式的元素的后代会继承样式的某些属性,比如颜色和字号。例如,如果将主体元素的文本颜色设置成黑色,那么主体元素的所有后代也显示黑色文本。对于字号,也是这样的。如果将主体的字号设置为1.4em,那么页面上的所有内容都会继承这个字号。

如果主体设置字号。你会注意到页面上的任何标题都没有采用这个样式。你可能会认为标题没有继承文本字号。但是,实际上是浏览器的默认样式表设置了标题字号。直接用于元素的任何样式总会覆盖继承而来的样式,这是因为继承未来的样式的特殊性为空。

继承这一样式非诚有用,因为它使开发人员不必在每个后代上添加相同的样式。如果打算设置的属性是继承而来的属性,那么也可以将它应用于父元素。

规划、组织和维护样式表

站点越大、越复杂,图形越丰富,CSS就越难管理。

对文档应用样式

将外部的样式表附加到网页上有两种方法。可以链接它们,也可以导入它们:

<link href="/css/basic.css" rel="stylesheet" type="text/css">
<style type="text/css">
    <!--
    @import url("/css/advanced.css");
    -->
</style>

除了导入到HTML文档之外,还可以从另一个样式表中导入样式表。因此,你可以从HTML页面链接基本样式表,然后将复杂的样式表导入这个样式表。

@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);

在CSS中添加注释非常简单。添加代码注释是非常好的习惯。

如果CSS文件非常长,那么寻找特定的样式会非常困难。一种改进的方法是在每个注释头中添加一个标志。这个标志仅仅是头部文本前面添加一个额外字符,一般不会出现在CSS文件中。

设计代码的结构

为了便于维护,最好把样式划分为几大块。显然,常常把最一般的规则放在最前面。这包括应用于body标记的、应该由站点上所有元素继承的样式。接下来是可能需要的所有全局reset样式,然后是链接、标题和其他元素。

完成一般样式之后,开始处理更特殊的样式和辅助样式。这些是在整个站点中使用的一般类,包括表单错误信息等方面。然后,处理布局和导航等结构性元素。

随着在样式表中的移动,我们在一层样式上构建另一层样式,处理的样式越来越特殊,处理完页面结构元素之后,我们把注意力转到特定页面相关的组件上。最后,在文档底部处理覆盖和例外情况。整个文档的结构像下面这样:

一般性样式

主体样式 reset样式 链接 标题 其他元素

辅助样式

表单 通知和错误 一致的条目

页面结构

标题、页脚和导航 布局 其他页面结构元素

页面组件

各个页面

这里使用一种风格统一的大注释块分隔每个部分。

/* @group general styles
----------------------------------------------------------------------------------*/
/* @group helper styles
----------------------------------------------------------------------------------*/
/* @group page structure
----------------------------------------------------------------------------------*/
/* @group page components
----------------------------------------------------------------------------------*/
/* @group overrides
----------------------------------------------------------------------------------*/
自我提示

对于负责的大型项目,在css文件中添加临时的注释常常对开发有帮助。这些注释可以提醒你在启动前需要完成哪些工作,或者提醒你列宽度等常用值得查询表。

删除注释和优化样式表

注释会使CSS文件显著增大。因此,你可能需要从样式中去掉一些注释。许多HTML/CSS和文本编辑器都有搜索和替换选项,因此从代码中删除注释很容易。另外,还可以使用几种在线CSS优化器。优化器不但能够删除注释,还可以删除空白,还可以从代码中去掉额外的字节。如果要从当前使用的样式表中删除注释,一定要保留带注释的版本。管理这个过程中最好的方法是创建一个部署脚本,当你修改的内容在生产环境中生效时,他会自动删除注释。但是因为这是一种高级技术,可能只适用于很大的复杂站点。

减小文件大小的最好方法是启用服务器端压缩。如果使用Apache服务器,那么应该安装mod_gzip或mod_deflate。所有现代浏览器都可以处理用GZIP压缩的文件并进行解压。这些apache模块探测浏览器是否能够处理这种文件,如果可以,接发送压缩的版本。服务器端压缩能够将这个HTML和CSS文件减少80%,这就可以减少对宽带的占用。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹