CSS3学习笔记
前言
- css的全称是什么?——
casccading style sheets
- 样式表的组成?——
选择器+声明块
- 浏览器杜宇编译css的顺序?——
div ul li #test从右往左
选择器
基本选择器
- 通配符选择器——
* {margin:0;}
- 元素选择器——
body {background: #eee}
- 类选择器——
.list {list-style: square}
- ID选择器——
#list {width: 500ox}
- 后代选择器——
.list li {margin-top: 10px}
子元素选择器
也可以叫后代直接选择器,此类选择器只能匹配到直接后代
,不能匹配到深层次的后代元素
#wrap > .inner {color: pink;}
Html实例
<div id="wrap">
<div>1
<div>1-1</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS实例
#wrap > div{
color: brown;
border: 5px solid;
}
注意:选择的是#wrap下的所有直接后代div,但是color是可继承的,所以1-1颜色也会改变,border却不会。
相邻兄弟选择器
它只会匹配紧跟
着的兄弟元素
#wrap > #first + .inner{color: #A52A2A;}
Html实例
<div id="wrap">
<div class="inner">1</div>
<div id="first">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
</div>
注意:改变的只是3号div,如果3号之前存在一个
<div></div>
,那么将不会改变
通用兄弟选择器
它会匹配所有的兄弟元素(不需要紧跟)
#wrap #first ~div{border: 1px solid cornflowerblue;}
注意:HTML结构和相邻兄弟选择器一样,改变的是3,4,5号div