CSS选择器

CSS 用于控制网页的样式和布局。

CSS三种引用方式

1.行内样式表

格式：

<元素名 style="属性1:属性值1; 属性2:属性值2;">

介绍：写在标签内部，通常用于测试单个属性时使用。

2.内部样式表

格式：

<style type="text/css"(可省略)>
	标签名1{属性1：属性值1；
		   属性2：属性值2；}
	标签名2{属性1：属性值1；
		   属性2：属性值2；}
</style>

介绍：通常放在head中，一般用于页面的测试。

3.外部样式表(常用)

格式：

<link rel="stylesheet" type="text/css" href="css文件路径"> 

介绍：在head中添加，将所有样式存放在一个或多个.CSS为扩展名的文件中。
优点：实现html和css的完全分离、方便复用和维护。

CSS选择器

1.基础选择器

（1）标签选择器

格式：

标签名{
	属性1：属性值1；
	属性2：属性值2；
}

例如:

h1{
	color:deeppink;
	font-size:28px;
}

（2）类选择器(多次调用)

格式：

<标签名 class="x">
多类名<标签名 class="类名1 类名2">	
.x{
	属性1：属性值1；
	属性2：属性值2；
}
		

例如：

html:
	<h1 class="x1 x2">
css: 
	.x1{
		color:red;
	}
	.x2 {
		font-size:28px;
	}

(3)id选择器(只能调用一次，多用于js使用)

格式：

<标签名 id="x">	
#x{
	属性1：属性值1；
	属性2：属性值2；
}

例如：

html：
	<h1 id="x">
css:
	#x{
		color:red;
	}

(4)通配符选择器

格式：*{} 所有标签

2.复合选择器

（1）子元素选择器

格式：div>p{}
选中div下面的p.

（2）后代选择器

格式：.x>h1{}
选中class="x"下面所有的a元素

（3）交集选择器

格式：h1.red{}
选中class="red"的h1标签

（4）并集选择器

格式：h1,p{}
选中h1和p标签

（5）链接伪类选择器

a:link{} 未访问的链接
a:visited{} 已访问的链接 
a:hover{} 鼠标移动到链接上 ☆
a:active{} 鼠标移动到链接并点击不放

书写顺序 link>visited>hover>active(lvha)
个人理解：得到Lv就笑(haha),方便记忆。

（6）伪类选择器

标签:first-chind 选择第一个元素 
标签:last-chind 最后一个元素
标签:nth-chind(n) 选择第n个子元素为a的标签
标签:nth-chind(odd) 奇数子元素 
标签:nth-chind(even) 偶数子元素 
标签:nth-of-type() {} div>a:nth-of-type(n) 只选中a元素第n个
标签:not(:nth-chind(n)) 否定,选中除了第n个div其他的div。

（7）伪元素选择器

标签::before 在元素前面添加内容
标签::after 在元素后面添加内容
.txt::before {
		content:"文本";
}
标签::first-letter 选中首字母
标签::first-line 选中第一行
标签::selection 修饰选中文字 color ，background-color 能改

（8）属性选择器

格式：

标签名[属性名="属性值"] { 声明块 } 选中[属性名="属性值"]的元素
标签名[属性名^="属性值"] { 声明块 } 选中[属性名="属性值"]开头的元素
标签名[属性名$="属性值"] { 声明块 } 选中[属性名="属性值"]结尾的元素
标签名[属性名*="属性值"] { 声明块 } 选中[属性名="属性值"]包含的元素

例如：

input[type="text"]
input[type^="text"]
input[type$="text"]
input[type*="text"]

（9）控件伪类选择器

格式：input:focus{}
input标签被鼠标选中控件的效果

感谢您的观看，如有不足，请留言提示，谢谢。