您的位置：首页 > Web前端 > CSS

css中选择器(selector)

2018-01-15 15:25 204 查看

常用选择器

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

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,01000
wrapper #content {}0,2,0,0200
content .datePosted {}0,1,1,0110
div#content {}0,1,0,1101
content {}0,1,0,0100
p.content .dateposted{}0,0,2,121
p.content{}0,0,1,111
div p {}0,0,0,22
p {}0,0,0,21
初看上去，上面的特殊性和更高的位指定的基数可能有点让人糊涂。基本上，用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.cs
ac6b
s" 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%，这就可以减少对宽带的占用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航