css选择器、hover伪类

一.css选择器

使用css选择器基本流程：
1.制作所需的选择器，并在其中写入样式。
2.将选择器绑定到指定的HTML标签上。
1）class选择器
class选择器 ：用 . 来标示自身， 自定义名称(名字符合见名知意即可)。具有重用性，可以给多个标签使用。 使用时 ，使用给对应的标签进行绑定 例如 < div class=".box">< /div > 。 class 的优先级 高于 标签选择器。
命名时： 可以包含字母数字下划线，但是不能以数字开头。

实例

.box{
			width: 500px;
			color: red;
		}

2）id选择器
id选择器：用**#**来标示，自定义名称(名字符合见名知意即可)， id选择器不具有重用性， 具有唯一性。如果多个标签同时使用，会造成不可预知的错误。 id选择器要比class选择器的高。
命名时： 可以包含字母数字下划线，但是不能以数字开头。

实例

#div1{
			width: 100px;
			height: 100px;
			background-color: pink;
			font-size: 30px;
		}

3）群组选择器
群组选择器：只能用于大批量的样式，如果需要给个别标签去写样式，使用Class或id。

实例

p,span,div,li{
			color: blue;
		}

4）子代选择器
子代选择器：**>**前是指定的父级，
> 后是指定的子级。
子代选择器，只对指定的父级，向下一层寻找目标。

实例

.list2>li{
			color: red;
		}

5）后代选择器
后代选择器：空格前是指定的父级，
空格 后是指定的子级。
后代选择器，对指定的父级下所有的层级，寻找目标。

实例

.list2 li{
			color: #ccc;
}

6）标签选择器
标签选择器: 用标签名来定义的。作用, 当前页面中，所有叫这个名字的标签，全部都绑定上样式。

实例

div{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}

7）通用选择器
通用选择器：它的优先级是最低的，慎用，因为它会修改整个页面中，所有标签的样式。包括body,html。 在大型网站中，这个选择器是被禁止使用的，样式容易混乱。

实例

* {
		/*边框： 宽度 样式  颜色*/
		border: 2px solid black;
		background-color: green;
		list-style: none;
	}

css样式存在继承性：
1.父级的样式继承给子级。
2.如果子级不需要，单独调整子级即可。

二.hover伪类

hover: 鼠标伪类 ，冒号（:）后面的hover 是固定的写法,冒号（:）前面是要添加hover伪类的 目标 (目标尽量不要写成标签选择器)，指定的目标： 最好是单一的。
作用： 鼠标移入移出的时候触发指定样式
鼠标移入时； 触发 hover的样式
鼠标移出时： 回到 初始样式。 整个hover中的代码，都不会被加载
使用hover伪类时，将 子代(后代)选择器 写在hover之后会表示：
：前面是触发者
hover之后的是 显示者

实例

.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*边框*/
			border: 2px solid black;
			
			/*过渡：当样式发生改变的样式
			  值1：  所有的属性
			  值2：  改变所用的时间 单位 s 秒
			*/
			transition: all 2s;
		}
       .box:hover>p{
			width: 500px;
			border-radius: 20%;
			background-color: yellow;
		}