HTML5 CSS选择器

何为选择器？

选择器{
样式;
}
这个就是选择器，选择器用来指定样式用作的对象，也就是说用于明确样式是用来修改哪里的

标签选择器：作用于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>

HTML5 CSS选择器

何为选择器？

类和ID选择器的区别

推荐阅读更多精彩内容