第四章
一、选择器
1.标签选择器
选择器{
属性名：属性值
}
h1 {
font-size:12px;
color:#F00;
}
直接选择标签，对标签的样式就行修改。
2.类选择器
<div class="yi"></div>
.yi{
width: 300px;
background-color: aliceblue;
}
在css中使用需要与htmlclass值相等才能使用(最常使用)
3.Id选择器
<div id="yi"></div>
#yi{
width: 300px;
background-color: aliceblue;
}
id在使用的过程中要保证id值唯一（不唯一也能用但是不好，id以后要进行参数的传递）
优先级
id>class>标签
二.css引入方式
一、链入式（最常使用）
<link rel="stylesheet" href="../css/shop.css"> rel必须写否则无法识别
二、导入式
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
不经常使用
三、css样式
一、行内样式
<p style="font-size:20px;"> </p> 直接在html标签内进行设置样式（在以后拉代码，无法改变样式时，直接采取行内样式覆盖原样式）
二、内部样式
<style>
.yi{
width: 300px;
background-color: aliceblue;
}
</style>
可以写在html页面任何位置（最好写在body以上）
三、外部样式
<link rel="stylesheet" href="../css/shop.css"> rel必须写否则无法识别 直接引入外部样式
优先级采取就近原则（但内部和外部不绝对，谁离的近，采取谁的样式）
四、层次选择器
一、E F
相当于选择父级元素下所有的F标签
body h2{
font-size: 16px;
}
<body>
<h2 class="er"> 如何做菜？</h2>
<p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
<p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
<h2 >如何经营餐厅？</h2>
</body>
二、E>F
只选择E的儿子，不选择E的孙子
body>h2{
font-size: 16px;
}
<body>
<h2 class="er"> 如何做菜？</h2>
<p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
<ul>
<li>
<h2>
我不会被选择
</h2>
</li>
</ul>
<p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
<h2 >如何经营餐厅？</h2>
</body>
三、相邻兄弟选择器
h2+p{
color:blue;
}
<body>
<h2 class="er"> 如何做菜？</h2>（不会变色）
<p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>(会变色)
<p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>（不会变色）
<h2 >如何经营餐厅？</h2>
</body>
只会选择相邻的下一个兄弟（只选择一个）
四、通用兄弟选择器
h2~h2{
color: blue;
}
<h2 class="er"> 如何做菜？</h2>（不会变色）
<h2 >如何经营餐厅？</h2>(会变色)
<h2 >111？</h2>(会变色)
<h2 >222？</h2>(会变色)
<h2 >333？</h2>(会变色)
自己本身不能选择
五、结构伪类选择器
一、E：first/last-child
p:first-child{
color:red;
}
p:last-child{
color: blue;
}
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<p>444</p>(变蓝色)
</body>
另外一种情况；
p:first-child{
color:red;
}
p:last-child{
color: blue;
}
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<h1>444</h1>(不会变色)
</body>
如果最后一个孩子不是p而是h1那将会不能匹配的p元素，所以h1不会变色，只有第一个p变色。
二、E F:nth-child(n)
<style>
body p:nth-child(1){
color: rgb(226, 154, 28);
}
ul li:nth-child(1){
color: aqua;
}
</style>
<body>
<p>111</p>(会变色)
<p>2222</p>
<ul>
<li>11</li>(会变色)
<li>22</li>
</ul>
<p>444</p>
<h1>444</h1>
</body>
选择父元素下的第几个子元素
三、E:first/last-of-type,E F:nth-of-type(n)
跟上面同理只是，在选择的时候先看标签类型，在看排序第几。
<style>
p:first-of-type{
color:red;
}
p:last-of-type{
color: blue;
}
</style>
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<p>444</p>(变蓝色)
<h1>444</h1>
</body>
六、属性选择器
一、在选择的时候写完标签之后不能有空格要紧跟着写[],否则无法选择
<style>
input[type='text']{
background-color: #d9ed1eea;
}(选择属性input标签下 属性type=text的标签)
input[type^=pass]{
background-color: brown;
} (选择属性input标签下 type以pass字符串开头的标签)
</style>
前三个最常用 