DAY FOUR

目录

css选择器

ID选择器及注意事项

class选择器

标签群组通配选择器

层次选择器

属性选择器

hover等伪选择器

after等伪选择器

结构伪类选择器

css样式的继承

单一样式的优先级

important群组等优先级

层次的优先级

权重比较

---

css选择器

ID选择器及注意事项

ID值唯一、第一位不能是数字

快捷键：div#1+tab

css：#elem{}

html：id="elem"

		<style type="text/css">
			#div1{background-color: aliceblue;}
			#div2{background-color: aqua;}
		</style>


		<div id="div1">
			siri
		</div>
		<div id="div2">
			小爱
		</div>

class选择器

可以复用、可以添加多个class、多个样式优先级根据css决定、

css：.elem{}

html：class="elem"

			p.box{background-color: aliceblue;}
			.box{background-color: aliceblue;}
			.content{font-size: 30px;}



		<div class="box">
			aaa
		</div>
		<div class="box">
			bbb
		</div>
		<div class="box content">
			ccc
		</div>
		<p class="box">aaa</p>

标签群组通配选择器

标签选择器

使用的场景：去掉某些标签的默认样式时、复杂的选择器中，层次选择器

css：div{}

html：<div>

群组选择器（通过逗号给多个选择器添加同一css）

css：div，p，span{}

			
			div,#text,.title{background-color: aliceblue;}




		<div>aa</div>
		<p class="text">bb</p>
		<h2 id="title">cc</h2>

通配选择器（包含所有标签）

css：*{}

			*{background-color: #F0F8FF;}

层次选择器

后代：M N{}

父子：M>N{}

兄弟：M~N{}（当前M下的所有N）

相邻：M+N{}

			ul li{border: 1px red solid;}
			ul>li{background-color: aliceblue;}
			div+h2{background-color: aliceblue;}
			div~h2{border: #F0F8FF;}
			

属性选择器

			div[class]{ background-color: aliceblue;}
			div[class*=box]{border: #F0F8FF;}




		<div>aaa</div>
		<div class="box">aaa</div>
		<div class="box1">aaa</div>
		<div class="search">aaa</div>
		<div>aaa</div>

hover等伪选择器

一般网站都只设置a{}、a：hover{}

:link（访问前样式）a标签

:visited（访问后样式）a标签

:hover（鼠标移入时样式）

:active（鼠标按下时样式）

			div:hower{background-color: aliceblue;}
			a:link{color: #F0F8FF;}
			a:visited{color: antiquewhite;}





		<div id=""></div>
		<a href="">123</a>

after等伪选择器

：after、：before通过伪类的方式在元素前后添加一段文本，content属性

：checked（当元素具备点击条件才会拥有样式）、：disabled（当元素未操作拥有样式）、：focus（获取光标时拥有样式）针对表单元素

			:checked{width: 100px;}
			:focus{background-color: aliceblue;}
			:disabled{width: 100px;}




		<input type="checkbox" checked>
		<input type="checkbox" disabled>
		<input type="checkbox" >

结构伪类选择器

 type表示整个的第n个、child表示同类第二个

nth-of-type()、nth-child()角标从1开始，1表示第一项，n表示从0到无穷大

:first-of-type：第一个

:last-of-type：最后一个

:only-of-type：只有一个的时候

			li:nth-of-type(2n){background-color: aqua;}
			li:only-of-type{border: #00FFFF;}





		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

css样式的继承

文字相关的样式可以被继承

布局相关的样式不能被继承（默认不能，设置继承属性inhert）

			div{width: 300px;border: aqua 1px solid;color: red;
			font-size: 30px;}
			p{border: inhert;}/* 继承 */




		<div>
			<p>ioaudo</p>
		</div>

单一样式的优先级

相同样式优先级：当设置相同样式时，后面的优先级高

内部样式与外部样式：内部样式与外部样式相同，如果都设置相同样式，后引入的优先级高

单一样式优先级：style>id>class>tag>*>继承

important群组等优先级

！important：提升样式优先级（不能针对继承）

标签+类与单类：标签+类>类（div.box>.box）

群组优先级：群组选择器与单一选择器优先级相同，后面的高

层次的优先级

权重比较

style行间：1000

id：100

class：10

tag：1

约分比较（相同等级消去）