复杂选择器、权重计算、CSS基本属性

记录今日所学的三个知识点

（知识点均已经在代码注释中标明，目前贴出来的只有CSS文件，若要测试网页的话还需要再写一个简单的html文件，这里就不再贴出来了）

@charset "utf-8";
/* CSS Document */

/*知识点一：复杂选择器：1.父子选择器（派生选择器） 2.直接子元素选择器  3.并列选择器  4.分组选择器*/

/*1. 父子选择器或者是派生选择器：父子关系存在即可*/

div span
{
	background-color:red;	
}

div strong em
{
	background-color:red;	
}

div em /*div下所用的em的背景颜色都会变 */
{
	background-color:red;	
}


/*2.直接子元素选择器 */
div > em
{
	background-color:green;
}


section div ul li a em  /*代码是从左向右快还是从右向左快？回答：从右向左快 浏览器遍历父子选择器的顺序是从右向左的 */
{
	background-color:red;
}


/*3.并列选择器 */
div.demo{
	background-color:red;	
}


/*4.分组选择器 */
em,
strong,
span
{
	background-color:red;	
}



.demo1
{
	width:100px;
	height:100px;
	background-color:red;	
}


.demo2
{
	width:100px;
	height:100px;
	background-color:green;	
}


/*将以上的两个代码简化*/
.demo1
,demo2
{
	width:100px;
	height:100px;	
}

/*******************************************/


/*知识点二：权重计算问题
以下的两种方法会是文字部分变为什么颜色 */

#idDiv p  /*权重计算：100+1 */
{
	background-color:red;	
}
    
.classDiv .classP/*权重计算：10+10 */
{
	background-color:green;	
}



/************************************************/


/*CSS基础属性： 
1.font-size:
	字体大小(默认字体大小16px，一般浏览器大小是12px)
	font-size设置是字体的高
2.font-weight:(normal)
 	  bold相当于strong
 	  bolder
3.font-style:italic  斜体  （类似于斜体）
4.font-family:arial  字体 
5.color:颜色
6.border:1px（brorder-width）  solid(border-style)  black(border-color:dashed);



/*

/*
1.土鳖式（英文单词）
2.颜色代码
3.颜色函数


颜色代码：光学三原色：
r      g       b
00-ff  00-ff    00-ff

#000000
#ff0000  红色
#00ff00  绿色
#0000ff  蓝色
#ffffff(#fff)：白色



颜色函数：rgb(0-255,0-255,0-255);

*/


/*div
{
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	font-family:arial;
	color:rgb(0,255,255);
	width:10px;
	height:10px;
	border:100px solid black;
	border-left-color:#f00;
	border-top-color:#0f0;
	border-right-color:#00f;
	
}*/
 

/****** 如何用border画出一个直角三角形    *********/ 
div
{
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	font-family:arial;
	color:rgb(0,255,255);
	width:0px;
	height:0px;
	border:100px solid black;
	border-left-color:black;
	border-top-color:transparent;
	border-right-color:transparent;
	
}*/