CSS选择器

在头部内使用

<style>
	选择器{
				
	}
</style>

或者采用外链模式，在head中输入下面代码

<link rel="stylesheet" href="地址" />

基本选择器

标签选择器

选择所有的标签，下面是选择所有的div标签。

<style>
	div{
		属性1；
        属性2.....
	}
</style>

类选择器

.class名

<style>
	.box1{
	
	}
</style>

id选择器

<style>
	#box1{
	
	}
</style>

通配符选择器

找到所有标签

<style>
	*{
	
	}
</style>

包含选择器

只可以找到子代。

例如选择下面ul下的第一层li。

		<ul class="ul1">
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<ul>
				<li>我是内嵌</li>
			</ul>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>010</li>
		</ul>

则选择器：

		<style>
			.ul1>li{
				background-color: aqua;
			}
		</style>

后代选择器

可以找到所有后代。

例如选择下面ul下的所有。

		<ul class="ul1">
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<ul>
				<li>我是内嵌</li>
			</ul>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>010</li>
		</ul>

则选择器为：

		<style>
			.ul1 li{
				background-color: aqua;
			}

复合选择器

也叫逗号选择器。

		<style>
			p,div{
				color: blue;
			}
		</style>

也就是说，使用“，”逗号隔开所有的标签名称或者任何标记。

属性选择器

找到type为url的input

		<form action="#">
			<input type="text" />
			<input type="password" name="pwd"/>
			<input type="url" />
		</form>

则选择器为：

		<style>
			input[type="url"]{
				background-color: aqua;
			}
		</style>

找到有name属性的那个input：

		<style>
			input[name]{
				background-color: aqua;
			}
		</style>

找到属性以pa开头的那个input：

			input[type^="pa"]{
				background-color: aqua;
			}
		</style>

找到属性以l结尾的那个input：

		<style>
			input[type$="l"]{
				background-color: aqua;
			}
		</style>

找到包含a的那个input：

		<style>
			input[type*="a"]{
				background-color: aqua;
			}
		</style>

伪类选择器

主要就是超链接点击前、选择后、点击后的样子。

伪类选择器常用状态

:link	超链接点击之前
:visited	连接被访问之后
:hover	悬停时
:active	激活，点击但不松开
:focus	是某个标签获得焦点时的样式

例：选择是变为粉色：

			a:hover{
				color: pink;
			}

当悬停在其上方时，出现另一标签。

其他选择器

 选择下面的第3个li（必须已经排好序了）

		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>

		<style>
			ul li:nth-child(3){
				background-color: pink;
			}
		</style>

选择下面第4个li

		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<p>我是段落</p>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>

		<style>
			ul li:nth-of-type(4){
				background-color: pink;
			}
		</style>

伪元素选择器

		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>

在其前面加上66，后面加上88

		<style>
			ul li::before{
				content: "66"
			}
			ul li::after{
				content: "88"
			}
		</style>

鼠标选中p文字之后改变：

		<style>
			p::selection{
				background-color: pink;
			}
		</style>

选择器权重

标签选择器：0001

class选择器：0010

id选择器：0100

伪类选择器：0010

包含选择器：权重之和

属性选择器：0010

伪元素选择器：0001

内联样式：1000