css选择器

css选择器

id选择器

语法： 
	<h1  id="city">
		hello
	</h1>
样式表中：
	<style>
	#city{
		color: red;
	}
	</style>

注：
1） id名命名要语义化，不能是汉字、纯数字，不能以数字开头
2） 常用的命名方式：驼峰命名法(favCity)、下划线或中划线连接命名法(fav-city、fay_city)
3） id名是唯一的，不能出现同名的id

class选择器

语法：
	<h1 class="city">
		hello
	</h1>
样式表中：
	<style>
	.city{
		color: red;
	}
	</style>

注：
1） class名命名也要语义化（命名方式与id命名方式相同）
2） 我们跨域给具有相同样式的元素添加相同的class名
3） 当一些元素既有一些相同的样式，又有某些样式不相同时，就可以用类名词列表的用法。

语法：
	<h1 class="tit  tit1">
		hello
	</h1>

标签选择器（元素选择器）

语法： 标记名称{ 属性： 属性值； }

	img{
		border: 5px solid red;
	}

后代选择器

语法： 父选择器 子选择器 { 属性：属性值；}

	.ul li{
		border: 5px solid red;
	}

群组选择器

语法：
	h1,h2,h3,h4,h5,h6{
		font-weight: normal;
	}

通配符

语法：
	*{
		margin: 0;
		padding: 0;
	}

注： *匹配所有的html元素

伪类选择器

语法：选择符:hover { 属性：属性值； }

注：超链接的四个状态按照顺序依次为
a:link 超链接的初始状态（链接没有访问过）
a:visted 超链接访问过后的状态
a:hover 鼠标滑过时的状态（鼠标悬停的状态）
a:active 鼠标按下（链接被激活）时的状态
(必须按照顺序，不能互换顺序)
以上四种状态有一种记忆方法爱恨原则-----LoVe HAte
即L->link；V->visited；H->hover；A->active
实际应用中我们会简写a的四个状态：

		a	{	color: black;	}
		a:hover	{	color: blue;	}

css选择器的权重

当有两个选择器匹配到同一个元素时，设置相同的样式会产生冲突，我们通常以权重较高的为准。因此，我们将选择器的权重分为以下四个等级：

1. 内联 1000
2. id选择器 100
3. class选择器，伪类选择器 10
4. 标签选择器，伪元素 1

1. 后代选择器权重：所有选择器权重之和
2. 群组选择器权重：每个选择器自身的权重
3. 当权重相同时，后写的会覆盖先写的

扩展：继承的css属性的权重为0，只要给子元素单独设置后均能覆盖