前端（2）CSS

<div style="width: 100px;height: 100px;background: bisque"></div>

<style>
div{
　　width: 100px;
　　height: 100px;
　　background: red;
}
</style>

<link rel="stylesheet" href="index.css">

<style>
/* *通配符选择器 匹配任何元素 */
*{
　　margin: 0;
　　padding: 0;
}
/*元素选择器 选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/
div{
　　width: 100px;
　　height: 100px;
　　background: red;
}
/* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */
#box{
　　width: 150px;
　　height: 150px;
　　background: bisque;
}
/* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class */
.box{
　　width: 120px;
　　height: 120px;
　　background: blueviolet;
}
</style>

<style>
/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/
div,p{
　　width: 120px;
　　height: 120px;
　　background: bisque;
}
/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/
div ~ p{
　　width: 100px;
　　height: 100px;
　　background: blueviolet;
}

/* > 子代选择器 选择某个元素下面的子元素*/
div > div{
　　width: 50px;
　　height: 50px;
　　background: blue;
}

/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/
div + p{
　　width: 100px;
　　background: blueviolet;
　　height: 100px;
}
</style>

<style>
li{
/*去掉li标签前面的东西*/
/*list-style: none;*/
　　width: 50px;
　　height: 50px;
　　background: bisque;
}
div ol li{
　　list-style: none;
}
</style>    

<style>
/*LoVe HAte*/
a:link{/*link 未被点击的链接*/
　　color: red;
}
a:visited{/*已被点击的链接*/
　　color: blueviolet;
}
a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/
　　color: yellowgreen;
}
a:active{/*鼠标已经再其上按下但是还没有释放的元素*/
　　color: aqua;
}
div{
　　width: 100px;
　　height: 100px;
　　background: bisque;
}
div:hover{ /*改变的是div本身*/
　　background: blueviolet;
　　cursor: pointer;/*手指*/
　　cursor: help;/*帮助*/
　　cursor: wait;/*等待*/
　　cursor: default;/*默认*/
}
div:hover p{ !*改变的是p*!
　　width: 50px;
　　height: 50px;
　　background: blue;
}
a:link,a:visited,a:hover,a:active{
　　color: blue;
　　cursor: pointer;
　　/*去掉下划线*/
　　text-decoration: none;
}
</style>