本篇文章同时收录在我的 github【前端知识点】中，链接直达
HTML选择器
目录
①标签选择器
格式：标签名称{
属性：值；
}
<title>标签选择器</title>
<style>
p{
color: red;
}
h1{
color: blue;
}
</style>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>我是标题</h1>
②ID选择器
格式：#标签名称{
属性：值；
}
<title>id选择器</title>
<style>
#identity1{
color: red;
}
</style>
<p id="identity1">我是段落</p>
③类选择器
格式：.标签名称{
属性：值；
}
<title>类选择器</title>
<style>
.ppp{
color: red;
}
</style>
<p class="ppp">我是段落</p>
④后代选择器
格式：标签名称1 标签名称2{
属性：值；
}
注意点：两个标签名称中间有一个空格；标签的范围是选中标签的所有子元素标签
<title>12-后代选择器</title>
<style>
/*
div p{
color: red;
}
*/
/*
#identity p{
color: red;
}
*/
/*
.para p{
color: blue;
}
*/
/*
#identity #iii{
color: skyblue;
}
*/
/*
#identity .ccc{
color: purple;
}
*/
div ul li p{
color: red;
}
</style>
<p>我是段落</p>
<div id="identity" class="para">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<!--<p id="iii" class="ccc">我是段落</p>-->
<p>我是段落</p>
</li>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<p>我是段落</p>
⑤子元素选择器
格式：标签名称1>标签名称2{
属性：值；
}
注意点：只找儿子不找孙子；子元素选择器可以一直延续下去
<title>子元素选择器</title>
<style>
/*
div>p{
color: red;
}
*/
/*
#identity>p{
color: blue;
}
*/
div>ul>li>p{
color: purple;
}
</style>
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
<p>我是段落</p>
⑥交集选择器
格式：标签名称1标签名称2{
属性：值；
}
<title>交集选择器</title>
<style>
/*
p.para1{
color: red;
}
*/
.para1#identity{
color: blue;
}
</style>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
⑦并集选择器
格式：标签名称1，标签名称2{
属性：值；
}
<title>16-并集选择器</title>
<style>
/*
.ht{
color: red;
}
.para{
color: red;
}
*/
.ht,.para{
color: red;
}
</style>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
⑧兄弟选择器
1、相邻兄弟选择器
格式：标签名称1+标签名称2{
属性：值；
}
注意点：只给指定标签紧跟他的相邻的标签添加语义
2、通用兄弟选择器
格式：标签名称1~标签名称2{
属性：值；
}
注意点：给指定标签后的所有标签添加语义
⑨序选择器
1、同级别序选择器
p:First-child同级别第一个标签
p:nth-child(n)同级别第n个
p:nth-child(odd)同级别奇数个
p:nth-child(even)同级别偶数个
p:only-child选中父元素中有一个级别标签的标签
p:nth-child(xn+y)x和y用户自定义，N为计数器从0开始递增
p:nth-last-child(n)同级别中倒数第n个标签
2、同类型序选择器
p:first-of-type同类型第一个标签
p:nth-of-type(n)同类型第n个
p:nth-of-type(odd)同类型奇数个
p:nth-of-type(even)同类型偶数个
p:only-of-type选中父元素中有唯一类型标签的标签
p:nth-last-of-child(n)同类型中倒数第N个标签
⑩属性选择器
[attribute] eg:p[id]找到标签中含有id的标签
[attribute=value] eg:p[class=aa]找到class值为aa的标签
[attribute^=value]找到以value值开头的标签 CSS3
[attribute|=value]同上 CSS2
[attribute$=value]找到以value值结尾的标签 CSS3
[attribute~=value]找到包含value值的
[attribute*=value]同上 CSS3
⑪通配符选择器
格式*{
属性：值；
}