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

CSS学习笔记（二）选择器

2016-04-05 16:12 701 查看
css样式声明（定义）由两部分组成：

选择器{

样式;

}

标签选择器：

标签选择器：利用html代码中的标签。如：
p{css样式代码;}

类选择器：

.类选器名称{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{
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>


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


后代选择器([b]包含选择器)： [/b]

                                   .选择器名称   后代元素标签{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>我是 <em>一个大大</em> 标题</h2>

<p>我是<span>一个小小</span>段落。</p>

以上只有作为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标签中<span>标签内的strong标签不受影响。而后代选择器作用于所有元素后代，无论嵌套了多少层次，因此，h3标签内的所有strong都被应用了样式。

例子图示：





通用选择器：


*{color:blue}


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

分组选择器：[/b]


标签元素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>


例子图示：



伪类例子参见w3cSchool     伪类
伪元素例子参见w3cSchool      伪元素
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航