第二章--选择器
来源：互联网 发布：淘宝我的回答能删除么 编辑：程序博客网 时间：2024/05/17 02:38
第二章：为样式找到应用目标（其实说的就是选择器（selector））
2.1.常用的选择器
类型选择器： 又称为元素选择器或简单选择器
p{color:black;}
h1{font-weight:bold;}
后代选择器：用来寻找特定元素或者元素组的后代
只是缩进块应用的后代段落元素，其他所有段落不受影响。
blackquote p {padding-left:2em;}
这两种选择器，适合于范围广的一般性样式。
要想用更特定的元素，可以使用ID 选择器或者 类选择器。（这两种选择器本人表示比较首席所以在此不在赘述）
一种简单多的的方法是结合使用类型、后代、ID和类这几种选择器：
#main-content h2{font-size:1.8em;}
#secondly-content h2{font-size:1.2em;}
作者说的意思是，为了避免滥用类和ID 要综合的使用它们（前面的4中选择器），用一个类或者ID应用于它的祖先，然后再用子选择器去定位他们。
2.2通用选择器： 是在所有选择其中功能最强大但是用的是最少的。 就是通配符 统配所有的元素，对页面所有的元素应用样式。
*{padding:0;
margin:0;
}
2.3.高级选择器
CSS2.1和CSS3有其他许多用用的选择器， 现在大多数的浏览器都支持高级选择器，但是IE 6和更低的版本不会支持， 所以在创建的时候就考虑到CSS的向后兼容性。我们用的时候既不必担心它在老师浏览器中造成的问题。 但是对于站点功能和布局上的很重要的任何元素都要避免使用高级选择器。
书上没有高级选择器应用的例子所以我看了半天还是不知道高级选择器怎么用呢。。。
所以我们接着往下看通报选择器
3.1 子选择器和相邻同胞选择器
第一个高级选择器是子选择器。 后代选择器选择一个元素的所有后代 ， 而子选择器之选择元素的直接后代，即子元素。
#nav>li{
background: url(xxx.png) no-repeat left top;
padding-left:20px;
}
<ul id="nav">/*子选择器指定列表子元素的样式， 但是不影响他的孙元素*/
<li><a herf="#">Home</a></li> /*外层列表中有一个制定的图标*/
<li><a herf="#">Services</a>
<ul> /*嵌套在列表中的列表不受影响*/
<li><a herf="#">Design</a></li>
<li><a herf="#">Delevelopment</a></li>
<ul>
</li>
<li><a herf="#">Contact Us</a></li>
<ul>
IE7 或者更高的版本里面支持子选择器。 但是IE7 有个小bug，父元素和子元素之间如果出现HTML注释就会有问题。
在IE6 和更低的版本的浏览器中可以使用通用的选择器来实现相同的效果。思路是现在所有的后代中应用你需要的样式，然后用通用选择器覆盖子元素的后代上的样式。
#nav li{
backgroung: url(xxxx,png) no-repeat left top;
padding-left:20px;
}
#nav li *{
background-image:none;
padding-left:0;
}
相邻同胞选择器： 定位同一个父元素下某一个父元素之后的元素。
下面例子可以是有相邻同胞选择器让顶级标题后面的第一个段落显示成粗体，灰色，并且字号比后续段落稍大一点。这样就不需要使用多余的类。
eg:
h2 + p {
font-size:1.4em;
font-weight:bold;
color:#777;}
<h2>Peru Celebrarts Guinea Pig Festival</h2>
<p>The guinea festival in Peru is a one day event to celebrate cult local animals </p>
<p>Guina pig can be fried,roasted, or...</p>
与子选择器一样，如果目标元素之间有注释，这在IE7中也会出现问题。
3.2属性选择器
根据某个属性元素是否存在或者属性值来寻找元素，能够实现某些非常有意思和强大的效果。
例如：使用title属性元素解释某些内容
如果不把鼠标停在上面，就不能知道这里存在着一份额外信息。 为了解决这个问题，可以用属性选择器对具有title属性的acronym元素应用其他不同的样式。 可以吧鼠标停在上面的样式变为问号， 显示与众不同的效果。
<p>The term<acronym title="selt-contained underwater breathing apparatus ">SCUBA</acronym>is an acronym rather than abbreviation as it is pronounced as a word.</p>
<style type="css/html">
acronym[title]{
border-bottom:ipx dotted #999;
}
asronym[title]:hover,acronym[title]:focus{
cursor:help
}
<style>
比如使用属性值： rel="nofollow"
代码：
a[rel="nofollow"]{
background:url() no-repeat top left;
padding-left:20px;
}
目前的现代浏览器都支持这些属性，但是IE6还不支持属性选择器，属性值允许有多个值，值之间用空格分开。 随性选择器允许根据属性值之一寻找元素。
.blogroll a[rel~="co-worker"]{
background:url(co-worker.gif) no-repeat left center;
}
<ul class="blogroll">
<li>
<a herf="http://adactio.com/" rel="friend met at collge co-worker">/*让他显示一个特殊标记的图片*/
Jeremy Keith</a>
</li>
<li>
<a herf="http://adactio.com/" rel="friend met at collge">
Join hicks</a>
</li>
</ul>
3.3 层叠和特殊性
1 特殊性
即使在一个不太复杂的样式表中，要寻找同一个元素也可能有两种或者更多的规则，CSS通过一个叫层叠(cascade)的过程处理这种冲突。 层叠给每一个规则分配一个重要度。浏览器默认样式表或者用户默认样式表的重要度是最低的，你总是可以覆盖他们。
为了用户的更多的控制能力，可以通过将任何规则指定为!important， 让他优先于任何规则。
层叠采用以下重要度次序。
◆标有！important的用户样式
◆标有！important的作者样式
◆作者样式
◆用户样式
◆浏览器、用户代理应用的样式
如果两个规则的特殊性相同，这要后定义的规则优先
作者在这里用数值计算特殊性，列了一个表给出了一系列选择器和相应的特殊性。
这个表中未指定的技术可能有点让人无奈， 糊涂， 所以再解释一下， 用style编写的规则总比其他的任何规则特殊。具有ID选择器的会比没有ID选择器的特殊，具有类选择器的比只有类型选择器的特殊。 最后如果两个规则的特殊性相同，那么后面定义的规则优先。
page28有个例子让你根据特殊性判断<h2></h2>标签里面标题的颜色，这看起来很复杂；总之
如果遇到了似乎没有起作用的CSS规则，很可能出现了特殊性的冲突。 那么就要在选择器中添加一个父元素的ID，从而提高它的特殊性。 如果能解决该问题就说明样式表中其他地方可能有更特殊的规则覆盖掉了你想要的规则，这种情况就需要检查你的代码，解决特殊性冲突，让代码更简洁。
2在样式表中使用特殊性
p{lolor:grey;}
p.intro{color:black;}
尽量保持一般样式非常一般，特殊样式尽可能地特殊，这样就不需要覆盖样式了。如果你发现不得不多次的覆盖一般样式，那么就删掉这个一般样式的声明， 并将它显示的应用于每一个元素，这样会比较简单。
3在主体标签上添加类或者ID
一种有意思的用法是在主体上用类或者ID。这样做之后可以在站点或者页面内覆盖样式：
body.news{
/*do some stuff*/ }
<body class="news">
<p>My dear, what a lovely body you have!</p>
</body>
又是需要覆盖掉这些样式，在这种情况下，可以在主体标签上添加ID来表示这个页面。
body.news{
/*do some stuff*/}
body#archive{
/*do some different stuff*/}
<body id="archive" class="news">
<p>My dear, what a lovely body you have!</p>
</body>
利用类标示页面类型，利用ID标示特定页面，就可以非常灵活的控制站点的设计和布局。作者 Andy Budd 非常喜欢用这种方法编写代码。
3.4继承
继承我早就理解透透的，不会和层叠混为一谈的。 所以此处略过。
继承这一性质非常有用，所以开发人员不必在每个元素后面添加相同的样式。
如：
p,div,h1,h2,h3,ul,ol,li{color:black;}
更简单的写法：
body{color:black;}
正如，恰当地使用层叠可简化CSS，恰当的使用继承也可以减少代码中选择器的数量和复杂性。
2.4规划组织和维护样式表
站点越大，图形越丰富，CSS就越难管理。本节讨论管理代码的方法，包括对代码添加分组和注释。
4.1对文档应用样式
作者不提倡只把样式写在style标签之间，应为在另一个页面上用的话必须不断地复制， 一旦要修改的话就很麻烦，。 因此可以通过连接或者导入他们来完成。
但是在使用多个CSS文件的时候要考虑到速度相关的问题。 对于老式的浏览器只能支持两个，现代的浏览提升到了8个。 由于这些原因 单一的结构良好的CSS文件会显著提高下 载速度。
当然，分割CSS文件还是相当麻烦的事情，有时候分不清楚那些式布局那些是排版。 所以作者现在比较倾向于单一的CSS文件而不是多个小文件。
当然 还需要根据实际情况作出决定，这方面没有硬性规定。
再要说的就是注释，防止你几个月以后回来看不懂你自己写的代码。
若CSS文件很长，就需要在注释头中添加一个标志， 这是一种很有用的改进方法，标志就是文本前面的一个额外字符。
1设计代码结构：
为了便于维护， 常常把样式表分为几大块
▲一般性样式
主题样式
recet样式
连接
标题
其他元素
▲辅助样式
表单
错误的通知
一致的条目
▲页面结构
标题，页脚 导航
布局
其他页面布局元素
▲页面组件
各个页面
▲覆盖
使用统一格式的大块分隔每个部分
/*@group generoul styles-------------------------------------------------------------------------------------------------------------------------------*/
……
分隔要求细致 ，合理，容易理解。
2自我提示
开发复杂项目，加入临时的注释常常对开发有帮助，这些注释提醒你在启动前要完成哪些工作， 或提供常用值得查询表。比如颜色， 好多种十六进制的颜色，宽度等。
用todo记住要改的事情等等。
3删除注释和优化样式表
css的注释会让文件显著增大，可以删除注释。 或者用网上提供的CSS优化器（www.cssoptimister.com上提供的优化器）， 如果要删除注释，一定要COPY保留注释版本。
还可以用服务器端压缩，从而减少文加大小。 现代浏览器都可以对压缩文件进行即时解压。若使用Apache服务器就安装mod_gzip或者mod_deflate. Apache服务器会自动探测浏览器会不会处理压缩的，如果可以就发送压缩的文件。 服务器端压缩可以使HTML和css文件大小减少80%, 节省宽带，大大加快页面下载速度。
还可以用http://tinyurl.com/8w9rp上面的教程对文件进行压缩。
3.建立样式指南
大多数web用多个开发人员，有程序员，内容管理员，和前端开发人员， 需要了解代码的元素是如何让工作的，所以就需要有建立样式指南。
：可以是文档，网页或是小站点
：解释代码和站点视觉设计是如何组织在一起的
：描述一般性的设计原则
：以及其他的 比如 html css的版本 访问级别，浏览器支持等
样式指南是帮助维护和实现站点的好方法，防止样式因时间推移变得散乱，也有助于新职员熟悉系统。
但是更新样式指南要花费巨大时间和精力， 所以有一种动态样式指南的形式 名叫“模式组合”。
<--！------------本章完-------------->
2.1.常用的选择器
类型选择器： 又称为元素选择器或简单选择器
p{color:black;}
h1{font-weight:bold;}
后代选择器：用来寻找特定元素或者元素组的后代
只是缩进块应用的后代段落元素，其他所有段落不受影响。
blackquote p {padding-left:2em;}
这两种选择器，适合于范围广的一般性样式。
要想用更特定的元素，可以使用ID 选择器或者 类选择器。（这两种选择器本人表示比较首席所以在此不在赘述）
一种简单多的的方法是结合使用类型、后代、ID和类这几种选择器：
#main-content h2{font-size:1.8em;}
#secondly-content h2{font-size:1.2em;}
作者说的意思是，为了避免滥用类和ID 要综合的使用它们（前面的4中选择器），用一个类或者ID应用于它的祖先，然后再用子选择器去定位他们。
2.2通用选择器： 是在所有选择其中功能最强大但是用的是最少的。 就是通配符 统配所有的元素，对页面所有的元素应用样式。
*{padding:0;
margin:0;
}
2.3.高级选择器
CSS2.1和CSS3有其他许多用用的选择器， 现在大多数的浏览器都支持高级选择器，但是IE 6和更低的版本不会支持， 所以在创建的时候就考虑到CSS的向后兼容性。我们用的时候既不必担心它在老师浏览器中造成的问题。 但是对于站点功能和布局上的很重要的任何元素都要避免使用高级选择器。
书上没有高级选择器应用的例子所以我看了半天还是不知道高级选择器怎么用呢。。。
所以我们接着往下看通报选择器
3.1 子选择器和相邻同胞选择器
第一个高级选择器是子选择器。 后代选择器选择一个元素的所有后代 ， 而子选择器之选择元素的直接后代，即子元素。
#nav>li{
background: url(xxx.png) no-repeat left top;
padding-left:20px;
}
<ul id="nav">/*子选择器指定列表子元素的样式， 但是不影响他的孙元素*/
<li><a herf="#">Home</a></li> /*外层列表中有一个制定的图标*/
<li><a herf="#">Services</a>
<ul> /*嵌套在列表中的列表不受影响*/
<li><a herf="#">Design</a></li>
<li><a herf="#">Delevelopment</a></li>
<ul>
</li>
<li><a herf="#">Contact Us</a></li>
<ul>
IE7 或者更高的版本里面支持子选择器。 但是IE7 有个小bug，父元素和子元素之间如果出现HTML注释就会有问题。
在IE6 和更低的版本的浏览器中可以使用通用的选择器来实现相同的效果。思路是现在所有的后代中应用你需要的样式，然后用通用选择器覆盖子元素的后代上的样式。
#nav li{
backgroung: url(xxxx,png) no-repeat left top;
padding-left:20px;
}
#nav li *{
background-image:none;
padding-left:0;
}
相邻同胞选择器： 定位同一个父元素下某一个父元素之后的元素。
下面例子可以是有相邻同胞选择器让顶级标题后面的第一个段落显示成粗体，灰色，并且字号比后续段落稍大一点。这样就不需要使用多余的类。
eg:
h2 + p {
font-size:1.4em;
font-weight:bold;
color:#777;}
<h2>Peru Celebrarts Guinea Pig Festival</h2>
<p>The guinea festival in Peru is a one day event to celebrate cult local animals </p>
<p>Guina pig can be fried,roasted, or...</p>
与子选择器一样，如果目标元素之间有注释，这在IE7中也会出现问题。
3.2属性选择器
根据某个属性元素是否存在或者属性值来寻找元素，能够实现某些非常有意思和强大的效果。
例如：使用title属性元素解释某些内容
如果不把鼠标停在上面，就不能知道这里存在着一份额外信息。 为了解决这个问题，可以用属性选择器对具有title属性的acronym元素应用其他不同的样式。 可以吧鼠标停在上面的样式变为问号， 显示与众不同的效果。
<p>The term<acronym title="selt-contained underwater breathing apparatus ">SCUBA</acronym>is an acronym rather than abbreviation as it is pronounced as a word.</p>
<style type="css/html">
acronym[title]{
border-bottom:ipx dotted #999;
}
asronym[title]:hover,acronym[title]:focus{
cursor:help
}
<style>
比如使用属性值： rel="nofollow"
代码：
a[rel="nofollow"]{
background:url() no-repeat top left;
padding-left:20px;
}
目前的现代浏览器都支持这些属性，但是IE6还不支持属性选择器，属性值允许有多个值，值之间用空格分开。 随性选择器允许根据属性值之一寻找元素。
.blogroll a[rel~="co-worker"]{
background:url(co-worker.gif) no-repeat left center;
}
<ul class="blogroll">
<li>
<a herf="http://adactio.com/" rel="friend met at collge co-worker">/*让他显示一个特殊标记的图片*/
Jeremy Keith</a>
</li>
<li>
<a herf="http://adactio.com/" rel="friend met at collge">
Join hicks</a>
</li>
</ul>
3.3 层叠和特殊性
1 特殊性
即使在一个不太复杂的样式表中，要寻找同一个元素也可能有两种或者更多的规则，CSS通过一个叫层叠(cascade)的过程处理这种冲突。 层叠给每一个规则分配一个重要度。浏览器默认样式表或者用户默认样式表的重要度是最低的，你总是可以覆盖他们。
为了用户的更多的控制能力，可以通过将任何规则指定为!important， 让他优先于任何规则。
层叠采用以下重要度次序。
◆标有！important的用户样式
◆标有！important的作者样式
◆作者样式
◆用户样式
◆浏览器、用户代理应用的样式
如果两个规则的特殊性相同，这要后定义的规则优先
作者在这里用数值计算特殊性，列了一个表给出了一系列选择器和相应的特殊性。
这个表中未指定的技术可能有点让人无奈， 糊涂， 所以再解释一下， 用style编写的规则总比其他的任何规则特殊。具有ID选择器的会比没有ID选择器的特殊，具有类选择器的比只有类型选择器的特殊。 最后如果两个规则的特殊性相同，那么后面定义的规则优先。
page28有个例子让你根据特殊性判断<h2></h2>标签里面标题的颜色，这看起来很复杂；总之
如果遇到了似乎没有起作用的CSS规则，很可能出现了特殊性的冲突。 那么就要在选择器中添加一个父元素的ID，从而提高它的特殊性。 如果能解决该问题就说明样式表中其他地方可能有更特殊的规则覆盖掉了你想要的规则，这种情况就需要检查你的代码，解决特殊性冲突，让代码更简洁。
2在样式表中使用特殊性
p{lolor:grey;}
p.intro{color:black;}
尽量保持一般样式非常一般，特殊样式尽可能地特殊，这样就不需要覆盖样式了。如果你发现不得不多次的覆盖一般样式，那么就删掉这个一般样式的声明， 并将它显示的应用于每一个元素，这样会比较简单。
3在主体标签上添加类或者ID
一种有意思的用法是在主体上用类或者ID。这样做之后可以在站点或者页面内覆盖样式：
body.news{
/*do some stuff*/ }
<body class="news">
<p>My dear, what a lovely body you have!</p>
</body>
又是需要覆盖掉这些样式，在这种情况下，可以在主体标签上添加ID来表示这个页面。
body.news{
/*do some stuff*/}
body#archive{
/*do some different stuff*/}
<body id="archive" class="news">
<p>My dear, what a lovely body you have!</p>
</body>
利用类标示页面类型，利用ID标示特定页面，就可以非常灵活的控制站点的设计和布局。作者 Andy Budd 非常喜欢用这种方法编写代码。
3.4继承
继承我早就理解透透的，不会和层叠混为一谈的。 所以此处略过。
继承这一性质非常有用，所以开发人员不必在每个元素后面添加相同的样式。
如：
p,div,h1,h2,h3,ul,ol,li{color:black;}
更简单的写法：
body{color:black;}
正如，恰当地使用层叠可简化CSS，恰当的使用继承也可以减少代码中选择器的数量和复杂性。
2.4规划组织和维护样式表
站点越大，图形越丰富，CSS就越难管理。本节讨论管理代码的方法，包括对代码添加分组和注释。
4.1对文档应用样式
作者不提倡只把样式写在style标签之间，应为在另一个页面上用的话必须不断地复制， 一旦要修改的话就很麻烦，。 因此可以通过连接或者导入他们来完成。
但是在使用多个CSS文件的时候要考虑到速度相关的问题。 对于老式的浏览器只能支持两个，现代的浏览提升到了8个。 由于这些原因 单一的结构良好的CSS文件会显著提高下 载速度。
当然，分割CSS文件还是相当麻烦的事情，有时候分不清楚那些式布局那些是排版。 所以作者现在比较倾向于单一的CSS文件而不是多个小文件。
当然 还需要根据实际情况作出决定，这方面没有硬性规定。
再要说的就是注释，防止你几个月以后回来看不懂你自己写的代码。
若CSS文件很长，就需要在注释头中添加一个标志， 这是一种很有用的改进方法，标志就是文本前面的一个额外字符。
1设计代码结构：
为了便于维护， 常常把样式表分为几大块
▲一般性样式
主题样式
recet样式
连接
标题
其他元素
▲辅助样式
表单
错误的通知
一致的条目
▲页面结构
标题，页脚 导航
布局
其他页面布局元素
▲页面组件
各个页面
▲覆盖
使用统一格式的大块分隔每个部分
/*@group generoul styles-------------------------------------------------------------------------------------------------------------------------------*/
……
分隔要求细致 ，合理，容易理解。
2自我提示
开发复杂项目，加入临时的注释常常对开发有帮助，这些注释提醒你在启动前要完成哪些工作， 或提供常用值得查询表。比如颜色， 好多种十六进制的颜色，宽度等。
用todo记住要改的事情等等。
3删除注释和优化样式表
css的注释会让文件显著增大，可以删除注释。 或者用网上提供的CSS优化器（www.cssoptimister.com上提供的优化器）， 如果要删除注释，一定要COPY保留注释版本。
还可以用服务器端压缩，从而减少文加大小。 现代浏览器都可以对压缩文件进行即时解压。若使用Apache服务器就安装mod_gzip或者mod_deflate. Apache服务器会自动探测浏览器会不会处理压缩的，如果可以就发送压缩的文件。 服务器端压缩可以使HTML和css文件大小减少80%, 节省宽带，大大加快页面下载速度。
还可以用http://tinyurl.com/8w9rp上面的教程对文件进行压缩。
3.建立样式指南
大多数web用多个开发人员，有程序员，内容管理员，和前端开发人员， 需要了解代码的元素是如何让工作的，所以就需要有建立样式指南。
：可以是文档，网页或是小站点
：解释代码和站点视觉设计是如何组织在一起的
：描述一般性的设计原则
：以及其他的 比如 html css的版本 访问级别，浏览器支持等
样式指南是帮助维护和实现站点的好方法，防止样式因时间推移变得散乱，也有助于新职员熟悉系统。
但是更新样式指南要花费巨大时间和精力， 所以有一种动态样式指南的形式 名叫“模式组合”。
<--！------------本章完-------------->
- JQuery-第二章 选择器
- 第二章.jquery选择器
- 第二章--选择器
- 第二章 选择器
- 第二章 选择器
- jQuery第二章选择器
- jQuery选择器(jQuery in action 第二章)
- 锋利jquery---内容过滤选择器(第二章)
- 《锋利的jQuery》第二章、jQuery选择器
- 第二部分 jQuery选择器
- 第二节：CSS选择器
- 第二章 吸取jQuery之选择器和包装集
- 《锋利的JQuery》读书笔记——第二章 JQuery选择器
- 锋利的Jquery【读书笔记】 -- 第二章 jQuery选择器
- jQuery入门学习笔记----第二章 jQuery选择器
- 《锋利的jQuery》读书笔记第二章（jQuery选择器）
- jQuery选择器---第二十三天
- jQuery学习心得----第二集：层次选择器和过滤选择器
- android应用程序如何设置样式
- UVa 10303 How Many Trees? (卡特兰数&高精度)
- Round #203 (Div. 2)B------Resort
- 分享一例iptables 防火墙配置
- Linux的五个查找命令
- 第二章--选择器
- pku3461 Oulipo (KMP)
- C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区
- 第三章--可视化格式模型
- md5算法的C程序
- 第四章--背景图像效果
- 第五章--对连接应用样式
- oracle view视图update
- HttpClient_4 用法 由HttpClient_3 升级到 HttpClient_4 必看
