css中的几种选择器

css中选择器有很多种，最常用的有元素选择器，类选择器，id选择器，群组选择器，通用选择器，组合选择器（包括后代选择器，子选择器，相邻兄弟选择器，普通兄弟选择器）。

一、元素选择器。对html文档中某元素进行样式设定，调用css文件后，页面关于设定的这个元素都继承此样式，不需要逐行去html中调用代码。eg：

body
｛
font-size:15px;
background-color:#000000;
color:white;
｝
p
{
text-indent:0;
}
a
{
text-decoration:none;
}

二.类选择器。以“.”开头定义，选择一类元素。命名规范推荐用“-”连接，例如：solution-title；类选择器写法如下：

css文档中：
.left
{
width:600px;
}
.right
{
width:300px;
}
html中调用：
<div class="left">左边部分</div>
<div class="right">y右边部分</div>

三.id选择器。每个html文档的id选择器都是唯一的，不可能出现两个一样的id选择器。id选择器写法如下：

css文档中：
#paral
｛
text-align:center;
color:red;
｝
html中调用：
<p id="paral">文本居中，字体为红色</p>

四.群组选择器。多个选择器下有相同的属性，可以写成一个群组属性。要根据实际情况考虑怎么使用，太频繁也可能造成结构混乱。写法如下：

h1,h2,h3,h4,h5,h6,p,body,html
{
margin:0;
padding:0;
}
/*一般对一组元素设定样式，同元素选择器一样也不需要在html中调用*/
.left
{
float:left;
}
.clear
{
cleat:both
}
/*用的比较多的浮动、清除浮动等可以专门定义个简单好记的类选择器，调用起来方便。这种要在html中调用。*/

五、通用选择器。用“*（通配符）”代表所有元素。eg:

*
{
font-size:14px;
}
/*表示文档中所有字体大小均为14像素*/
*
｛
margin：0；
padding:0;
｝
/*表示文档中所有元素外边距和内边距均设置为0*/

六、组合选择器可表示两个选择器之间的关系，它包括了4中组合方式：

后代选择器（以空格分隔’ ‘）；
子元素选择器（以大于号分隔’>’）;
相邻兄弟选择器（以加号分隔’+’）；
普通兄弟选择器（以破折号分隔’~’）。

（1）后代选择器。文档中有元素a和b，b元素如果包含在a元素中，那么它继承a的所有属性。只要b在a中不管是几级嵌套b都有a的属性。写法如下：

<html>
<head>
<meta charset="utf-8">
<title>css组合选择器之后代选择器</title>
<style>
div p
{
color:blue;
}

</style>
</head>
<body>
<div>
<p>我的老家在陕西1</p>
<span><p>我的老家在陕西2</p><span>
我的老家在陕西3
</div>
<p>我的老家在陕西4</p>
<p>我的老家在陕西5</p>
</body>
</html>

后代选择器运行结果：

后代选择器结果