前端基础知识学习---CSS3学习（一）基本选择器

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