CSS学习笔记（二）选择器

来源：互联网发布：psp游戏数据已损坏编辑：程序博客网时间：2024/05/29 17:48

css样式声明（定义）由两部分组成：

选择器{
样式;
}

选择器作用：可以选出当前文档中的一个或多个标签，然后使用css属性对这些标签设置样式。

标签选择器：

标签选择器：利用html代码中的标签。如：

p{css样式代码;}

类（class）选择器：

.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（避免中文）

小栗子：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">.mark{    color:red;}</style></head><body>    <p>枯藤老树昏鸦，<span class="mark">小桥流水人家。</span>古道西风瘦马。<span class="mark">夕阳西下，</span>断肠人在天涯。</p></body></html>

可重用。

ID选择器：（优先级最高）

#ID名称{css样式代码}

小栗子：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">  #mark{    color:red;  }</style></head><body>  <p>枯藤老树昏鸦，<span id="mark">小桥流水人家。</span>古道西风瘦马。<span id="mark">夕阳西下，</span>断肠人在天涯。</p></body></html>

ID选择器与类选择器直观上有许多相似点，但是它们的用法还是有区别的。

--ID选择器与类选择器的不同点：

1、当需要为一个元素同时设多个样式时，可以通过使用类选择器词列表方法来为一个元素同时设置多个样式。而不能用ID选择器（不能使用 ID 词列表）。

例如以下：同时应用了两种样式 mark 与 size

.mark{    color:blue; }.size{    font-size:18px;}<p>枯藤老树昏鸦<span class="mark size">小桥流水人家</span>古道西风瘦马...</p>

若将以上替换成id选择器，则错误。

2、ID选择器只能在文档中使用一次，而类选择器可以使用多次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次。

 <p>枯藤老树昏鸦<span class="mark">小桥流水人家</span>古道西风瘦马<span class="mark">夕阳西下...</span></p>

错误形式：

 <p>枯藤老树昏鸦<span id="mark">小桥流水人家</span>古道西风瘦马<span id="mark">夕阳西下...</span></p>

以上同一个id选择器使用了两次，因此错误。

子选择器：

.选择器名称>子元素标签{css样式代码}

eg： .ci_poetry>span{......}

小栗子：

<!DOCTYPE HTML><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">    .ci_poetry>span{color:blue}  </style></head><body>  <h2>我是<span>一首</span>小小词</h2></span></span>  <p class="ci_poetry">枯藤老树昏鸦，<span>小桥流水<span>人家</span>古道西风</span><strong><span>瘦马</span></strong>，夕阳西下...</p></body></html>

元素标签定义的子元素标签{css样式代码}

eg： p >span{......}

小栗子：

<!DOCTYPE HTML><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">     p>span{color:blue}  </style></head><body>  <h2>我是<span>一首</span>小小词</h2>  <p>枯藤老树昏鸦，<span>小桥流水<span>人家</span>古道西风</span><strong><span>瘦马</span></strong>，夕阳西下...</p></body></html>

标签内的标签嵌套的标签字体颜色没有与其他标签内直接子标签字体颜色一样被应用了样式（蓝色），这是因为子选择器仅仅作用于元素的第一代后代。

后代选择器(包含选择器)：

.选择器名称后代元素标签{css样式代码}

eg： .ci_poetry span{......}

小栗子：

<!DOCTYPE HTML><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">    .ci_poetry span{border:2px solid blue;}  </style></head><body>  <h2>我是<span>一首</span>小小词</h2>  <p class="ci_poetry">枯藤老树昏鸦，<span>小桥流水<span>人家</span>古道西风</span><span>瘦马</span>，夕阳西下...</p></body></html></span>

元素标签定义的后代元素标签{css样式代码}

eg： p span{......}

小栗子：

<span style="font-family:Courier New;font-size:12px;"><!DOCTYPE HTML><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">    p span{border:2px solid blue;}  </style></head><body>  <h2>我是<span>一首</span>小小词</h2> <p>枯藤老树昏鸦，<span>小桥流水<span>人家</span>古道西风</span><span>瘦马</span>，夕阳西下...</p></body></html>

可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

eg：
p span{color : blue}
 ......
 <h2>我是 一个大大 标题</h2>
 我是一个小小段落。

以上只有作为p标签后代的em才有相应样式，因为仅仅定义了p后代的样式。而h2标签中的em并未定义样式。

直观上，子代与后代选择器同样有相似之处。但子选择器作用于元素的第一代后代，后代选择器作用于元素的所有后代。

二者区别小栗子：

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">    h2>strong{color:blue;}    h3 strong{color:green;}  </style></head><body>  <h4>子代选择器：</h4>  <h2>我是一个<strong>大大</strong>标题</h2>  <h2>我是<span>一个<strong>大大</strong></span>标题</h2>  <br/>  <h4>后代选择器：</h4>  <h3>我是一个<strong>小小</strong>标题</h3>  <h3>我是<span>一个<strong>小小</strong></span>标题</h3></body></html>

以上，h2定义了子代选择器strong，h3定义了后代选择器strong。子代选择器仅仅对于直接自带产生影响，因此，h2标签中标签内的strong标签不受影响。而后代选择器作用于所有元素后代，无论嵌套了多少层次，因此，h3标签内的所有strong都被应用了样式。

例子图示：

通配符选择器：

* {color:blue}

使用一个（*）号指定，作用：匹配html中所有标签元素。

分组选择器：

标签元素1,标签元素2,...,{css样式代码}

当想为html中多个标签元素设置同一个样式时，可以使用分组选择器。

结合其他选择器的分组选择器小栗子：

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <style type="text/css">    h3 strong,.mark>span,.stress strong,#stress2{color:green;}      div,.stress>span{color:blue}  </style></head><body>  <h3>我是一首<strong>小小</strong>词!</h3>  <h4 class="mark">天净沙 <span>秋思</span></h4>  <p class="stress">枯藤老树<span>昏鸦</span>,小桥流水人家，古道西风<strong><span>瘦马</span></strong>，夕阳西下,断肠人在<strong>天涯</strong>。</p>  <p id="stress2">完。</p>  <div>真的完了。。。</div></body></html>

例子图示：

0 0