CSS选择符_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&100W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
阅读已结束，下载本文需要
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩1页未读，
定制HR最喜欢的简历
你可能喜欢作用：为html中多个标签元素设置同一个样式
语法：h1,span{font-size:20px}
相当于下面两行代码
h1{font-size:20px}
span{font-size:20px}
&!DOCTYPE&
&meta http-equiv="content-type' content-type="text/html" charest="utf-8"&
&title&分组选择器&/title&
&style type="text/css"&
.frist,#second span{color:}
&h1&CSS选择器&/h1&
&pclass="first"&使用css对HTML页面中的元素实现&span&一对一，一对多或者多对一&/span&的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。&/p&
&pid="second"&每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于&span&网页&/span&中的哪些元素&/p&
上述代码运行的效果：第一段文字和第二段中的“网页”字体颜色将会变成红色。
注：1.“.frist”对应的是class=“first”，“#second”对应的是id=“second”；
2.为什么first前面要加英文圆点，而h1不用？答：因为first是选择器定义问题，即选择器起名；
3.至于first和second后面与span之间是一个空格，这就是后代选择器的内容了；
4.如果是这样写：h1,span{color:}
.first&span{color:},#second span{color:}
显示的性格效果为标题“CSS选择器”和第二段中的“网页”字体颜色变为蓝色，而第一段中&span&&/span&中的内容字体颜色变为红色。原因：标签选择器的权重要比后代
选择器的权重值大，而第一段中&span&&/span&中的内容字体颜色之所以变为红色而不是蓝色，是因为就近原则。
5.如果要想让第二段整体颜色变为红色，而“网页”颜色为绿色:
h1,span{color:}
.first&span{color:}
#second{color:}
#second span{color:}
CSS选择器分组的三种方法
CSS选择器分组
分组选择符
var a = (1,2,3)alert(a); //3
编写高效的css选择符
今天我学习了css优化，了解到css选择符是从右到左匹配的。要编写高效的css选择符需要注意一下几点：
1.避免使用通用选择符:除了传统意义上的通配选择符之外，相邻兄弟选择符、子选择符、后代选择符和...
CSS:伪类选择符与分组选择符
伪类选择符
CSS 选择符
选择符，顾名思义，用于从XHTML文档中选择元素。选择符有很多种，各有其不同的具体性（specificity），可以确定一大批元素或者仅仅几个元素。具体性是度量选择符的作用范围的手段。所谓作用范围，换...
CSS组合选择符
CSS组合选择符1. 通配选择符：*适配文档中所有html对象用于定义html文档中所有对象的基础样式（消除浏览器默认设置的基础样式）根据就近原则，要放在css代码的首行最常用的用法：* {margi...
没有更多推荐了，为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
30个你必须记住的CSS选择符
所以你学会了基础的id，类和后代选择符，然后你就一直用它们了吗？如果是这样，你丢失了（css的）巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分，因此，只有在现代浏览器中才可使用。
margin: 0;
padding: 0;
对于初学者，在学习更多高级选择器之前，最先了解的选择器。
星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用，但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。
* 也能作为子选择符使用。
#container * {
这将匹配#container div的每一个后代元素。再次强调，尽量不要使用这种技术。
#container {
width: 960
井号前缀允许我们选择id。这是最常见的用法，不过应该慎重使用ID选择器。
反复问自己：我一定需要id来匹配要选择的元素吗？
id选择符是唯一的，不允许重复使用。如果可能的话，先尝试使用一个标签名称，一个新的HTML5元素，甚至是一个伪类。
现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外，当你紧想给特殊元素应用样式的时候才使用id。
text-decoration:
下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如，如果你只想匹配无序列表下的锚元素？此时后代选择符派上用场。
小贴士——如果你的选择符看起来像这样 X Y Z A B.error，那你就错了。时刻问自己使用这高的权重是否有必要。
a { color: }
ul { margin-left: 0; }
如果你想匹配页面上的所有的元素，根据他们的类型，而不是id或类名？显而易见，使用类型选择符。如果你需要选择所有的无序列表，请使用ul {}。
6.X:visited and X:link
a:link { color: }
a:visted { color: }
我们使用:link 伪类选择符选择所有已经被点击过的锚标签。
此外，我们也有:visited伪类选择符，正如你期望的，允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。
这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子，仅每一个ul之后的第一个段落元素的文本为红色。
div#container & ul {
X Y和X & Y之间的不同点是后者只选择直接子代。例如，考虑如下的标记。
&div id="container"&
&li& List Item
&li& Child &/li&
&li& List Item &/li&
&li& List Item &/li&
&li& List Item &/li&
选择符#container & ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。
因此，使用子代选择符有性能上的优势。事实上，这同样适用于基于css选择器的javascript引擎。
这是兄弟选择符和X + Y一样，然而，它没有约束。与相邻选择符（ul + li）仅选择前一个选择符后面的第一个元素比起来，兄弟选择符更宽泛。它会选择，我们上面例子中更在ul后面的任何p元素。
10.X[title]
a[title] {
被称为属性选择器，在我们上面的例子里，这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢？呵呵……
11.X[href=”foo”]
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
上面的代码段将给所有href属性为http://net.tutsplus.com的锚标签添加样式；他们将会显示为我们的品牌绿色。所有其他的锚标签将不受影响。
注意我们将href值用引号包裹。记住，当使用javascript的css选择符引擎时也这么做。如果可能的话，尽可能使用css3选择符代替非官方的方法。
这工作的很好，但有点不够灵活。如果链接确实直接连接到Nettus+还好，但是，也许路径是到nettust的相对路径呢？在这种情况下，我们可以使用一点正则表达式语法。
12.X[href*=”nettuts”]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说，这句代码包含了href值为 nettuts.com，net.tutsplus.com或者tutsplus.com。
记住这个描述过于宽泛，如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站（tutsplus属于Envato旗下网站）呢？因此你需要更多特性来限制，分别使用^和&来限定字符串的开始和结束。
13.X[href^=”http”]
a[href^="http"] {
background: url(path/to/external/icon.png) no-
padding-left: 10
有没有想过某些网站是如何定义一个图标的链接的？我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。
使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以”http”开头的”href”属性的锚点的话，我们就可以使用类似于上面的那段代码啦。
注意啦，我们不需要搜索http://,完全没必要，因为我们还要包含以https://开头的链接呢。
如果我们想为所有链接到图片的链接定义样式咋办？这种情况下，我们得搜索字符串的结束了不是。
14.X[href$=”.jpg”]
a[href$=".jpg"] {
又来了，我们还是使用正则表达式符号，$(dolor)，来作为字符串的结束标记。这种情况下，我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。
15.X[data-*=”foo”]
a[data-filetype="image"] {
回顾最近一条，我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到，我们能通过多个选择器来不是，像这样：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
不过，这样很蛋疼，效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢？
&a href="path/to/image.jpg" data-filetype="image"& Image Link &/a&
这样关联后，我们就能使用标准的属性选择器来指定这些链接啦。看下面：
a[data-filetype="image"] {
16.X[foo~=”bar”]
a[data-info~="external"] {
a[data-info~="image"] {
这儿有个鲜为人知的特殊技巧，绝对让你印象时刻。~(tilda)符，它可以帮助我们指向那些以空格隔开多个值的属性的元素（真拗口，这翻译我自己都看不懂，水平问题）
以我们第15条的自定义属性为例，上面的代码中我们创建了 data-info属性，这个属性可以定义以空格分隔的多个值。这样，这个链接本身就是个icon，并且指向的也是一个图片链接，像下面这样。
&a href="path/to/image.jpg" data-info="external image"& Click Me, Fool &/a&
有了这样适当的标记，通过使用 ~ 属性选择器的技巧，我们就可以指向任何具有着两种属性的任何一种啦。
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
/* And which contain the value "image" */
a[data-info~="image"] {
很棒，不是吗？
17.X:checked
input[type=radio]:checked {
这种伪类只会匹配已经被选中的单选元素。就是这么简单。
18.X:after
before 和 after 伪元素也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。
很多第一次使用是因为他们需要对clear-fix进行改进。
.clearfix:after {
content: "";
visibility:
font-size: 0;
height: 0;
.clearfix {
*display: inline-
_height: 1%;
这个改进使用了:after伪类元素来在元素后增加一个空间，然后清除它。这个牛X的技巧你应该收藏到工具包里，特别是当overflow:hidden方法无能为力的时候。
想看看其他创造性的用法：
通过Css3选择器的标准说明书，你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容，浏览器会接受一个双引号。
19.X:hover
div:hover {
background: #e3e3e3;
我去，这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑，不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式？这个属性就是做这个的。
记住啦，较old版本的IE，只能在锚点标签后使用这个hover。
这个选择器你用得最多的情况，估计可能就是在锚点的悬停时加个border-bottom啦。
border-bottom: 1
小贴士： border-bottom:1比
text-decoration:好看一点哦。（真的？我去）
IE6+ (In IE6, :hover must be applied to an anchor element)
20.X:not(selector)
div:not(#container) {
not伪类灰常有用。例如我要选择所有的div，除了有id为container的。上面那个代码片段就能完美的实现。
如果我想选择除了p以外的所有元素，我可以这么做：
*:not(p) {
21.X::pseudoElement
p::first-line {
font-weight:
font-size: 1.2
我们可以使用伪元素（以::为表示）来定义元素的样式。例如第一行，第一个字符，记住啦，这种方法只能应用于同级元素才有效。
伪元素由两个冒号组成：::
指定p的第一个字符的样式
p::first-letter {
font-size: 2
font-weight:
font-family:
padding-right: 2
这段代码会找到所有段落，然后再从中定义这些段落的第一个字符。
这常常使用在仿报纸的文章首字母样式。
指定p的首行样式
p::first-line {
font-weight:
font-size: 1.2
同样，这个::first-line伪元素会像我们期望的那样，只定义段落的第一行的样式。
22.X:nth-child(n)
li:nth-child(3) {
想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。
请注意 nth-child接收整数和变量，不过不是从0开始的，如果你想选定第二个li，使用 li:nth-child(2).
我们甚至使用这个办法来选择任意的子元素。例如，我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。
Firefox 3.5+
23.X:nth-last-child(n)
li:nth-last-child(2) {
如果我有灰常多的li在ul里面，我只想要最后3个li怎么办？不必使用li:nth-child(397),你可以使用nth-last-child伪类。
这种技巧和第六条几乎一样有效，不过两者的不同之处在于它从结束开始收集，用回溯的方式进行。
Firefox 3.5+
24.X:nth-of-type(n)
ul:nth-of-type(3) {
你应该有很多时候想要元素类型来选择元素而不是通过孩子。
想象一下标记5个无序列表（UL）。如果你想定义第三个ul，并且没有一个唯一的id来找到它，你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中，只有第三个ul才会有黑色的边框。
Firefox 3.5+
25.X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
没错，我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器，来找到我们想要的元素
Firefox 3.5+
26.X:first-child
ul li:first-child {
border-top:
这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。
例如，你有一系列的rows，每一个都有border-top 和border-bottom。这种情况下，第一行和最后一行看起来会灰常怪。
很多设计师会使用first和last类来弥补这个缺陷。相反，你可以使用这些伪类来解决这些问题。
27.X:last-child
ul & li:last-child {
与first-child相反，last-child会选择父节点的最后一个子节点。
我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。
&li& List Item &/li&
&li& List Item &/li&
&li& List Item &/li&
没啥特别的，就是一个简单的序列。
width: 200
background: #292929;
list-style:
padding-left: 0;
padding: 10
border-bottom: 1
border-top: 1px solid #3c3c3c;
这个样式会设置一个背景，删除浏览器默认的ul的padding值，并定义边框给每一个li来提供一点深度。
如上图所示，唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。
li:first-child {
border-top:
li:last-child {
border-bottom:
看上图，解决了不是。
是滴，IE8支持 first-child 不过不支持last-child。
28.X:only-child
div p:only-child {
实话说，你很可能会发现你不会经常使用 only-child伪类。尽管如此，它确实有用，你应该需要它。
它可以帮助你选择是父节点的独生子（没别的孩子啦）的元素。例如，使用上面的代码，只有是div的唯一子孩子的p段落才会定义其颜色为red。
让我们来假定下面的标记。
&div&&p& My paragraph here. &/p&&/div&
&p& Two paragraphs total. &/p&
&p& Two paragraphs total. &/p&
这样，第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。
29.X:only-of-type
li:only-of-type {
font-weight:
这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如，我们可以选择只有一个li作为其子孩子的ul。
首先，取决于你想怎样完成这一目标。你可以使用 ul li，不过，这回选择所有li元素。唯一的办法是使用only-of-type。
ul & li:only-of-type {
font-weight:
Firefox 3.5+
30.X:first-of-type
first-of-type 伪类可以让你选择该类型的第一个兄弟节点。
为了更好地理解它，让我们来测试一下啊。拷贝下面的标记到你的编辑器。
&p& My paragraph here. &/p&
&li& List Item 1 &/li&
&li& List Item 2 &/li&
&li& List Item 3 &/li&
&li& List Item 4 &/li&
现在，别急着往下读，试试看如何能只选择’LIST ITEM 2’?如果你搞定了（或者放弃了），继续读。
有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。
ul:first-of-type & li:nth-child(2) {
font-weight:
这个代码段本质上表示，“找到第一个无序列表，然后找到这里面的li，然后，继续使用过滤器直到找到第二个li。
另一个可行的办法是毗邻选择器。
p + ul li:last-child {
font-weight:
在这个方案中，我们找到p的临近节点ul，然后找到ul的li的最后一个孩子。
我们可以随心所欲滴选择这些选择器。
ul:first-of-type li:nth-last-child(1) {
font-weight:
这次，我们取到第一个ul，然后找到第一个元素，不过是从最后一个开始数。哈哈。
Firefox 3.5+
如果你仍在为解决old浏览器的缺陷而纠结，如IE6。在使用这些新的选择器方面，你仍然需要非常小心。不过，别因为这个阻碍了你对这些新玩意儿的学习。别虐待自己。确保关注这里的兼容性列表。应一方面，你可以使用 Dean Edward’s excellent IE9.js script 来为旧浏览器提供新的选择器支持。（我去。cool）
其次，当使用javascript库时，如流行的jQuery，最好尽可能使用这些css3本身的选择器而不是使用库的自定义方法/选择器。这能让你的代码更快哦，因为这些选择器引擎本身就能被浏览器解析，而不是用这些库选择器。
感谢阅读，希望你能学到一两个技巧。
本文问翻译文章，原文为“”
作者：颜海镜
原文地址：
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
页面重构设计
作者相关文章下次自动登录
现在的位置:
& 综合 & 正文
基本的选择符包括通用选择符、类型选择符、属性选择符、ID选择符和伪类选择符等
（1）类型选择符
类型就是指HTML语言定义的各个元素，每一种元素名就是一个类型选择符名，通过为每一种元素名定义样式，HTML文档中的该元素都会应用该样式。
如 p {color: #FF0000;}
（2）通用选择符
通用选择符是用型号(*)来表示
(3) 派生选择符
由两个或者多个类型选择符组成，并以空白相分隔，例如派生选择符的形式如下：
div p *[href]：在这个选择符中，通用选择符结合了派生选择符和属性选择符，它匹配任何元素，该元素必须设置href属性，且包含在一个p元素内，而p
元素又包含在一个div元素内
（4）子选择符
由两个或者多个选择符构成，并以大于号(&)分割，大于号两端空白可以被省略。
如 body & em {}：如果em元素直接位于body元素下，那么该规则就作用于该em元素；
（5）相邻同级选择符
如果E1和E2在文档树中的父元素相同，且E1紧接在E2之前，则选择符匹配的元素是E2
如：h1 + p {} ：当一个p元素紧跟在一个h1元素之后时，该规则应用与p元素
（6）相邻同级连续选择符
表示匹配E之后的F元素，直到出现另一个E元素。
（7）属性选择符
属性选择符
匹配任何的元素E，该元素必须有一个名为att的属性，而不论属性值是什么
E[att=”val”]
匹配任何的元素E，该元素必须有一个名为att的属性，并且该属性的值恰等于val
E[att~=”val”]
匹配任何的元素E，该元素必须有一个名为att的属性，该属性的值可以包含空白的字符串，单字符串中两个空白之间必须有一个值是恰好等于val.
E[att|=”en”]
匹配任何的元素E，该元素必须有一个名为att的属性，该属性的值可以是包含连字符的字符串，但左边开始的字符串必须是en。
E[att^=”val”]
匹配具有att属性且值以字符串val开头的E元素
E[att$=”val”]
匹配具有att属性且值以字符串val结尾的E元素
E[att*=”val”]
匹配具有att属性且值中含有字符串val的E元素
h1[title] {}
h1[class="example"] {}
span[title="note"][lang="zh-CN"]
a[rel~="copyright"]
*[lang="fr"] {}
（8）类选择符
.myclass {}
（9）ID选择符
h1#chapter1 { text-aligh:center}
(10）伪元素和伪类
在CSS中，样式和元素的匹配关系一般是基于元素在文档树中的位置，这一简化的模型对于大部分情况是足够的， 但是，由于文档
树结构的限制，一些常用的印刷效果可能无法达到，例如，在HTML中，没有元素可以来引用一个段落的第一行，因此也没有一个简单的CSS选择符
可以引用它.
CSS引入了伪元素和伪类的概念，允许对文档树之外的信息进行格式化。
（11）使用CSS命名空间
@namespace book "http://book.zhang-yafei.com";
@namespace note "http://note.zhang-yafei.com";
p {backgournd-color: red:}
book | p {background-color:}
note | p {background-color:}
【上篇】【下篇】css选择符详解之关系选择符篇_觉唯设计
相信大家都对CSS选择符都不陌生，选择符包含:元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符。在众多的选择符中，可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写，达到最大的质量和效率。
今天就为大家介绍下选择符中的关系选择符，“关系”这可是一等一的大事啊，我们得理清楚，这样做事情才能更加的有效率。不然在CSS中有你受的，哈哈。关系选择符有四个类别:包含选择符、子选择符、相邻选择符、兄弟选择符。接下来为大家一一介绍。在这里特别的说明一下，我们平常中最常用的的是包含选择符，为什么我们都习惯用这个呢?因为在IE6浏览器中，只支持包含选择符，其他的均不支持。在以往(现在有点改观了)IE6是浏览器市场的主角，用户覆盖率极高，所以对于那些IE6所不支持的，也必然造成我们很少用到甚至根本不用的现象。但是记得在一篇文章看到，现在HTML5/CSS3是未来的一个趋势，而HTML5/CSS3将会重视起以前那些被我们误认为没有什么用的标签的运用。也许在某一天，IE6真正的功成身退了，不再折腾考验我们了，那些我们误以为没有用的标签语法将会掀起一次CSS效率大革命。哈哈，纯属个人幻想。请勿当成珍珠一样真。
包含选择符(E F)
E F{ sRules }
选择所有被E元素包含的F元素。
&meta charset="utf-8" /&
ul li{color:#f00;}
&li&项目列表1&/li&
&li&项目列表2&/li&
&li&项目列表3&/li&
&li&项目列表4&/li&
输出结果图片:
输出结果说明:ul li表示在ul下面所有的li都会有作用，只要是属于ul的li都会起作用。
子选择符(E&F)
E&F{ sRules }
选择所有作为E元素的子元素F。
&meta charset="utf-8" /&
.test&li&a{color:#f00;}
&ul class="test"&
&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &列表项目1&/a&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &项目列表1.1&/a&&/li&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &项目列表1.2&/a&&/li&
&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &列表项目2&/a&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &项目列表2.1&/a&&/li&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &项目列表2.2&/a&&/li&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &列表项目3&/a&&/li&
&li&&a href="http://www.jiawin.com" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &列表项目4&/a&&/li&
输出结果图片:
输出结果说明: .test & li & a 表示对在选择器test下面的 li 标签下面 a 标签起作用。只有属于这个关系的才会起作用，大家可以从上面的例子看到，有些 li 元素的下面还有 ul& li 的选择符，但是却不会起到作用。由此可见，子选择符比包含选择符提供了更精细的控制。结合上面的两个例子我们也可以得出:包含选择符的深度和广度超过子对象选择符；而子对象选择符的针对性和唯一性比包含选择符强。这也就是包含选择符和子选择符的区别，这是一个比较容易混淆的地方。
相邻选择符(E+F)
E+F{ sRules }
选择紧贴在E元素之后F元素。
&meta charset="utf-8" /&
p+p{color:#f00;}
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
输出结果图片:
输出结果说明:p+p表示只有在 p元素之后紧连接着另一个p元素，才会对第二个p元素开始起到作用。也就是只有在结构中的后面两个p元素起到作用，而假如在&p&&/p&&h3&&/h3&&p&&/p&结构中，却不会对任何标签取到作用，因为p标签没有形成两个以上(包括两个)的连续。
兄弟选择符(E~F)
E~F{ sRules }
选择E元素后面的所有兄弟元素F。
&meta charset="utf-8" /&
p~p{color:#f00;}
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&h3&标题:觉唯前端&/h3&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
&p&副标题:享受web前端开发和用户体验设计的乐趣&/p&
输出结果图片:
输出结果说明:p~p表示只要出现第一个p元素之后，接下来只要有p元素都会起到作用的(也就是在一个结构中，第二次出现p元素就会起到作用)。假如选择符设置成 p~p~p 那么同理，会在第三个(包含第三个)p元素开始签到作用。
&注:建议大家可以对以上的示例随意的更改&style&&/style&里面的样式选择符，然后去测试看看输出的结果。只有自己动手去实验了，才能记的更加的牢固。
通过上面的举例说明，大家都已经了解了各种关系选择符的用法。那么我们在日常中，怎么去运用这些选择符呢?那就得看大家的聪明才智了。或许在以后会写一些利用这些选择符来制作的一些效果，和大家一起来研究探讨。合理的有效利用，不但可以提高我们的代码质量而且还大大的提高我们的效率。
记住我的登录
您也可以使用第三方帐号登录
您也可以使用第三方帐号快捷注册}