HTML5 CSS选择器
2017-02-24 本文已影响0人
CoreyJia
何为选择器？
选择器{
样式;
}
这个就是选择器，选择器用来指定样式用作的对象，也就是说用于明确样式是用来修改哪里的
- 标签选择器：作用于html标签，如：
body{font-size:12px;line-height:1.6em;}
这个就是作用于< body>标签
- 类选择器，如：
<style type="text/css">
.main{/*注意以英文.开始*/
color:red;
}
</style>
然后使用class=""为标签设置样式，如：
<p class="main">类选择器</p>
- ID选择器，与类选择器类似，如：
<style type="text/css">
#main{/*注意这里使用#开始*/
color:red;
}
</style>
使用：
<p id="main">ID选择器</p>
- 子选择器，先看代码：
<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>
<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>
上面代码中，.foot>li{} 会对class="foot"的子标签< li>起作用，也就是对水果，蔬菜起作用
-
包含（后代）选择器，语法格式：
.foot li{color:red;}
子选择器使用">"连接，只作用于下一级
包含选择器使用空格符连接，作用于所有子标签
在上面代码中如果使用包含选择器，那么不仅仅是水果，蔬菜，连同他们的子类都将发生变化。 -
通用选择器，语法：
*{color:red;}
通用选择器作用范围最大，会对所有html标签起作用 -
伪类选择符
a:hover{color:red;}
这样的效果是鼠标在移动到< a>标签上，字体颜色会变为红色，伪类选择符还有很多种状态，尤其css3中更多，不过hover是兼容最好的，使用最多的。 -
分组选择符
h1,span{color:red;}
相当于下面两行代码
h1{color:red;}
span{color:red;}
这样写< h1>标签和< span>标签都将发生变化
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的
如下 类选择器可以这么写：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<span class="stress bigsize">类选择器可以同时设置两种css，而id选择器不可以</span>
