1
2
3
4
5
如上所示，一个大的盒子包裹着五个小的盒子，在类名相同的情况下，给他设置不同的样式
css样式
.box {
width: 100%;
height: 100%;
.box-list{
padding-left: 50%;
margin-top: 10px;
.box-list:first-child{
color: red;
font-size: 24px;
.box-list:nth-child(2){
font-size: 24px;
color: blue;
.box-list:nth-child(3){
font-size: 24px;
color: rgb(109, 172, 13);
.box-list:nth-child(4){
font-size: 24px;
color: rgb(20, 152, 172);
.box-list:last-child{
font-size: 24px;
color: rgb(172, 20, 94);
我的css样式是在less文件中写的，所示使用了样式嵌套，如果是css文件，就正常写样式即可
first-child：选择第一个元素
nth-child(2)：（）括号中的数字写我们对应的值
last-child：最后一个元素
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
生成标签，直接输入标签名按tab健即可，比如 div 然后 tab键 就可以生成<div></div>。
如果想要生成多个相同标签，加上*，比如 div*3 就可以快速生成3个div。
如果有父子关系的标签，可以用>，比如 ul>li 就可以了。
如果有兄弟关系的标签，用+就可以了，比如 div+p。
如果生成带有类名或者id名字的，直接写.类名 或者 #id名 tab键就可以了。
如果生成的div类名是有顺序的，可以用自增符号$。.
样式控制时，利用标签下包含子标签的方式，会导致只要父标签下的能找到的子标签的话，样式都会生效，可能是孙子或者重孙级别，怎样只控制只是儿子级别的样式控制呢？这时候就需要子选择器，标签之间用> 分割
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。可以设置h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。vertical-align属性对inline元素、inline-block元素、table-cell有效，对block元素无效。x-offset参数：阴影水平偏移距离，单位可以是px、em、百分比。
