CSS基础二：选择器、权重

复杂选择器

1. 父子选择器，派生选择器（有空格）
   能够表示派生关系即可，不用必须是标签选择器，能够选中所有的派生标签，包括多级派生

<div>
     <em>123</em>
     <strong>
         <em>234</em>
     </strong>
</div>

/*选中的是123和234*/
div em{
	color: greenyellow;
}

2. 直接子元素选择器
   选择当前标签元素下的子标签，不包含多级派生的子标签

/*选中的是123*/
div > em{
	color: greenyellow;
}

ps：浏览器遍历父子选择器的顺序是自右向左。
3. 并列选择器（无空格）
可以用多个元素确认一个模块并添加样式

<div>1111</div>
<div class="manda">2222</div>
<p class="manda">3333</p>

/*选中的是2222*/
div.manda{
	background-color: darkgrey;
}

示例：选择器练习，对a添加样式

<div class="wrapper">
    <div class="content">
    	<em class="box" id="dot">a</em>
    </div>
</div>

#dot{
	background-color: greenyellow;
}

.content em{
	background-color: yellowgreen;
}

.wrapper > .content > .box {
	background-color: pink;
}

div.wrapper > div[class="conten"] > #dot.box {
	background-color: purple;
}

4. 分组选择器
   避免冗余减少耦合

<em>2222</em>
<span>123</span>
<strong>555</strong>

要同时对以上三个标签添加样式，除了分别用标签选择器添加样式之外，可以直接对以上三个标签添加样式

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

权重计算

写在一行的选择器权重相加即为当前选择器的权重值

<div class="classDiv" id="idDiv">
   <p class="classP" id="idP">1</p>
</div>

/*100 + 1*/
#idDiv p{
	background-color: greenyellow;
}

/*1 +  10 + 100*/
div .classP#idP{
	background-color: purple;
}

结果显示紫色

一样权重大小的选择器，后定义会覆盖先定义的选择器样式

/*100 + 1 + 10*/
#idDiv p.classP{
	background-color: greenyellow;
}

/*1 +  10 + 100*/
div .classP#idP{
	background-color: pink;
}

上述示例显示结果为粉色。

属性

1. 字体样式设置：
   font-size:设置字号高度
   font-weight：设置字号加粗
   font-style：设置斜体
   font-family：设置字体
   color：设置字体颜色
2. border属性
   border:border-width border-style border-color;
   也可以分别设置四条边，border-left:border-top:border-right:

知识和示例来源：渡一