这是我参与「第四届青训营 」笔记创作活动的第4天
为了简单快速地掌握一些基础知识，结合在其他网站的学习了解，对其进行了一系列的整理

CSS选择器

---

元素选择器

以标签名作为选择添加属性 如：p/a/img/div...

---

类选择器（一般用class)：

(1)、在html标签中添加一个class="属性名"，在css中选择相应属性名来添加效果
(2)、在class名之前必须要添加一个英文圆点.符号，用于标识class名
(3)、一个元素可以有多个class名，多个class名字之间用空格隔开
(4)、元素之间的class名可以重名
例：
HTML文件中：

<div class="attribute1 attribute2 attribute3">...</div>

CSS文件中：

.attribute1{ width:200px; height:300px;}

---

id选择器：

(1)、在html标签中添加一个id="属性"，在css中选择相应的id名来添加效果
(2)、在id名之前必须要添加一个#符号,用于标识id名
(3)、网页的证件号码,具有唯一性(在js中体现)
例：
HTML文件中：

<div id="demo">...</div>

CSS文件中：

#demo{ width:200px;height:300px;}

---

群组选择器：

不同标签想改成相同的效果
例：
HTML文件中：

<span>...</span>
<p class="demo">.....</p>

CSS文件中：

span,.demo{
width:200px;
height:300px;
}

---

包含选择器：（也可以理解为父子关系）

两个标签属于包含关系
如：<ul> <li>文字</li> </ul> 中 ul与li属于包含关系
例1：
HTML文件中：<ul class="list"> <li>文字</li> </ul>
CSS文件中：.list li{ width:200px; height:300px; }
例2：
HTML文件中：<span class="demo1"> <p class="demo2">.....</p> </span>
CSS文件中：.demo1.demo2{ width:200px; height:300px; }

---

伪类选择器-鼠标滑过效果

选择器：hover{属性：属性值；}
注意：冒号后⾯不要加空格否则没有效果
例：
HTML文件中：<a herf="http://www.baidu.com"></a>
CSS文件中：

a:hover{
width:200px;
height:300px;
}

---

通配符：

⻚⾯中所有的标签包含body在内，⼀般都是⽤来重置样式使⽤
*{属性：属性值；属性：属性值；}
例：
CSS文件中：

*{ 
/*清除浏览器自带间距*/
margin:0;padding:0;
}

CSS选择器权重

定义：当两个规则都作⽤到了同⼀个html元素上时，如果定义的属性有冲突，那么应该⽤谁的值的，CSS有⼀套优先级的定义

优先级：
1、元素选择器：0001
2、class选择器：0010
3、id选择器：0100
4、包含选择器：等于每个选择器之和
5、群组选择器：单独计算（个⼈算个⼈的，没有关联）
6、伪类选择器：0010
注意：
当权重相同，谁写在后⾯，谁就先的

优先级关系:（常用的）
内联样式表(行内栏式去)> id选择器> class选择器>元素选择器