2.1 选择器
2.1.1 选择器的优先级:
!important; > 内联 > ID选择器 > (伪)类/属性选择器 > (伪)元素/关系选择器 > 通配符选择器
1、标签选择器
h1 {
/*颜色*/
color: red;
/*背景色*/
background: #38d185;
/*圆角*/
border-radius: 10px;
/*字体大小*/
font-size: 20px;
}
2、类选择器
.b {}
3、id选择器
#a {}
4、层级选择器
/*后代选择器,后代所有p标签*/
body p {}
/*子选择器*/
body>p {}
/*兄弟选择器 向下寻找一个*/
.a + p {}
/*通用兄弟选择器 向下寻找所有*/
.a ~ p {}
5、伪类选择器
/*ul标签下的所有li标签中的第一个*/
ul li:first-child{}
/*同理*/
ul li:last-child{}
/*选中当前p标签的父标签下的第一个标签,必须是p标签才生效*/
p: nth-child(1) {}
/*选中当前p标签的父标签下的第二个p标签*/
p: nth-of-type(2) {}
/*鼠标移动上去才有的效果*/
a:hover {}
/*鼠标点击才有的效果*/
a:focus {}
6、属性选择器
/*所有a标签里有id的标签*/
a[id]{}
/*所有a标签里有id且为first的标签*/
a[id = first]{}
/*所有a标签里有class且包含first的标签*/
a[class *= "first"]{}
/*所有a标签里有href且以http开头的标签 同理$符号表示结尾*/
a[href ^= http]{}
a[href $= http]{}
二、样式
1、常用样式
height: 50px //高度
width: 50px //宽度
color: red //颜色
background: #38d185 //背景颜色
float: left //浮动(靠左)
display: block //展示
border-radius: 10px //圆角
text-align:center //文字居中
text-decoration:none //去除下划线
margin-left:5px //左外边距
font: bold 20px/50px Arial //字体:粗体,大小,行高,字体
font-family:宋体 //字体
2、字体样式
/*字体样式*/
font-family:宋体 /*字体*/
font-size: 20px; /*字体大小*/
font-weight:cold /*字体粗细*/