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

css中的选择器

2015-12-30 16:53 761 查看
1、类选择器、".名称"

<pre name="code" class="html"><pre name="code" class="html"><head>
<style type="text/css">
.className{
color:blue;
}
</style>
</head>
<body>
<p>css样式中的<span class="className">类选择器</span>的使用</p>
</body>



2、ID选择器、“#名称”

<head>
<style type="text/css">
#idName{
color:blue;
}
</style>
</head>
<body>
<p>css样式中的<span id="idName">ID选择器</span>的使用</p>
</body>3、标签选择器、“标签”
<head>
<style type="text/css">
span{
color:blue;
}
</style>
</head>
<body>
<p>css样式中的<span>ID选择器</span>的使用</p>
</body>


4、类选择器与ID选择器的区别：
相同点：可以应用于任何元素

不同点：

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

b、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

5、子选择器：“.food>li”

下面的代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
</body>
</html>
效果：






6、包含（后代）择器：“.food li”
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>包含(后代)选择符</title>
<style type="text/css">
.food li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
</body>
</html>效果：



7、通用选择器：“*”
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>练习</h1>
<p>通用选择器</p>
</body>
</html>8、伪类选择符：“标签:hover”
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
9、分组选择符：“标签1，标签2”

它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

h1,span{color:red;}
相当于：
h1{color:red;}
span{color:red;}
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                css
                                                选择器
                                                选择符
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航