渡一css2

复杂选择器

1）父子选择器/派生选择器
语法格式：最外面的结构 外面的结构 里面的结构{ }

注意：父子选择器中，每一个层级，都不一定要是标签选择器，写 class 选择器也行， 重要的是表达出来父子关系。而且这种父子关系可以是间接地，也有可以是直接 的

<div class="wrapper">        
<strong class="box">        
<span>1234212</span>    
</strong>    
</div>    
<span>3524421</span>

div span||wrapper .box span {   
background-color: turquoise ;
}

2)子元素选择器

<div>        
<em>131542</em>        
<strong>        
<em>1234212</em>    
</strong>    
</div>

div > em 
{    
background-color: #fdd;
}

注意：浏览器遍历的时候是从右向左找的(先看em,再看 a,再看 li,再看 ul,再看div)， 更快更有效率

3）并列选择器
格式 如下：例如div.demo 在.之前不用写空格

<div>132</div>    
<div class="demo">9721</div>    
<p class="demo">743</p>

div.demo {    
background-color: blueviolet;
}

利用权重比较并列选择器之间的优先权

 <div class="classDiv" id="idDIV">        
 <p class="classP" id="idP">1233</p>    
 </div>

//100+1
#idDiv P {    
background-color: darkorange;
}
//10+10
.classDiv .classP {    
background-color: darkorchid;
}

4)分组选择器（减少代码冗余）

<div class="demo1"></div>    
<div class="demo2"></div>

.demo1 {    
background-color: #f98;}
.demo2 {    
background-color: #f40;}
.demo1,
.demo2 {    
height: 100px;    width: 100px;}

---

css正式内容

1:浏览器默认font-size：16px（字体大小高）
2.<strong> 标签内自带 font-weight:bold;
3.标签内自带 font-style:italic;
4.

 div{
    /*设置字体大小*/
      font-size: 20px;
      /*设置字体粗细*/
      font-weight: bold;
      /*设置字体正常\斜体*/
      font-style:normal;
      /*设置字体*/
      font-family: cursive;
      /*设置字体颜色*/
      color:red;
      /* border:复合属性*/
      border:1px solid red;
    }

设置字体颜色的方法:

1）土鳖式（纯英文）
2）颜色代码
3）颜色函数

颜色代码组成原理：
光学三原色:（R,G,B）红、绿、蓝
R:00–ff
G:00–ff
B:00–ff

---

颜色#ffffff可以简写为 #fff,三个两位数字，如果重复了，可以简写成一位，必须三个颜色都是重复数字才可以简写
例如：
#ff4400----->#f40

#aabbcc---->#abc

---

//颜色函数
div{
color：rgb（0-255，0-255，0-255）
}

---

border:1px solid black
//border-weight  border-style border-color

div {    
font-size: 30px;    
font-weight: bold;    
font-style: normal;    
font-family: cursive;    
color: rgb(0, 255, 255);    
width: 0;    
height: 0;    
border: 100px solid #fbc;    
border-left-color: deeppink;    
border-top-color: gold;   
border-right-color: greenyellow;}

可以通过改变其他边颜色成为直角三角形或者普通三角形