父子选择器、派生选择器
css选择器可以有层级关系，如
<!-- 在html文件中 -->
<div>
<span>123</span>
</div>
<span>234</span>
<!-- 在css文件中 -->
<!-- 如果这里想选择<span>123</span>显然用标签是不行的，可以这样 -->
div span{
background-color:red;
}
<!-- div标签下的所有span标签 -->父子选择器并不一定要求都是标签选择器，用class加标签组合或反过来也是可以的
直接子元素选择器
父子选择器会选择修饰条件下所有元素（无论嵌套多少层）直接子元素只会选中修饰条件下的元素，不会往下再查找，如
<!-- 在html文件中 -->
<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
<!-- 在css文件中 -->
div > em{
background-color:red;
}
<!-- 这样1就会被选中，2则不会 -->并列选择器
用多个限制条件，并不加空格选择
<!-- 要求是只改变2背景色 -->
<div>1</div>
<div class="demo">2</div>
<p class="demo">2</p>
<!-- 在css文件中 -->
div.demo{
background-color:red;
}
<!-- 用以往的选择器不太好使，这里用并列选择器,其意思为，选中既有div又有clss为demo的元素-->
<!-- div.demo开头的时候，中间没有空格-->css代码
/** css文件 **/
/** css代码是css属性名+上属性值构成的，前面是属性名，：隔开以;结束 **/
div {
font-size:12px;
/** 设置字体大小其实是设置字体高 **/
/** 浏览器默认字体大小是：16px **/
font-weight:normal;
/** font-weight默认值是normal,加上bold就是字体加粗 其实就是等于<strong>标签 **/
/** font-weight的值可以选择，lighter细字体、normal正常、bold加粗、bolder更粗，或者以数字100至900来从细到粗 **/
/** 字体能不能被加的更粗和字体包有关，可能选择更粗的字体但浏览器不会显示 **/
font-style:italic;
/** 斜体设置，等于<em>标签 **/
font-family:arial;
/** 设置字体，arial是常用的 **/
color:red;
/** 设置字体颜色 **/
/** 设置字体颜色有三种方法：
1. 纯英文单词：red、green、blue等；
2. 颜色代码，如#ff4400,以#开头，每两位是一个颜色，但如果两个是一样的可以省略，所以可以直接写#f40,0至-f代表颜色饱合；
3. 颜色函数，格式为color:rgb(0-255,0-255,0-255),0至255之间选择颜色；
**/
border:1px solid black；
/** border是给容器加一个外边框 **/
/** 上面border是一个复合属性，参数意思是，给容器加一个1px的边框，实心的，黑色的 **/
/** 也可以拆解开，如下所示
border-width:1px;
border-style:solid; 这个style可以填不同的值如，dotted是点状虚线，dashed是条状虚线
border-color:black;
**/
/** border设置的1px是边框，这里是四个边的框，每个边都可以单独设置，如
border-left:100px solid black;其他三条边也可以这样设置
**/
}Andrew's Web