在总结之前，先把三种整体的选择器写出来
标签选择器
标签名{ }
如：
div{ }
类选择器
.类名{ }
如：
.username{ }
id选择器
id{ }
如：
#name{ }
<hr> <!--分割线-->
普遍选择器
选中所有：星号
*
选中直接子代：大于号
>
选中所有后代：空格
~~ ~~
嵌套选择
.类名 空格 .类名{ }
如：选中类名为one下所有类名为name的后代
.one .name{ }
组合选择
.类名，.类名{ }
如：同时选中类名为one和two的标签
.one,.two{ }
选中同标签中类名为one的标签
div.one{ }
层次选择器（注：在末尾有可复制试验代码，包含所有情况，代码加截图)
选择某标签之后所有兄弟：波浪号~
选择某标签后下一个兄弟：加号+
属性选择器（注：在末尾无可复制试验代码，有机会再补上，可以用上面的尝试已补上 )
选择拥有某属性的标签
[属性名]{ }
选定有某属性的标签
标签[属性名]{ }
选定有某属性且某属性为某值的标签
标签[属性名=值]{ }
选定有某属性且某属性值的首位以X开头的标签
标签[属性名^=X]{ }
选定有某属性且某属性值的末尾以X结尾的标签
标签[属性名$=X]{ }
选定有某属性且某属性值中模糊匹配包含X的标签
标签[属性名*=X]{ }
选定有某属性且某属性值中精确匹配包含X的标签
标签[属性名~=X]{ }
选择默认选中的单选和复选框
[type=radio][checked]{ }
伪类选择器
选中某类标签中的第一个元素
.类名>*:first-child{ }
选中某类标签中的最后一个元素
.类名>*:last-child{ }
选中某类标签中的第n个元素 odd奇数，even偶数 3n+1
.类名>*:nth-child(n){ }
选中某类标签中的倒数第n个元素
.类名>*:nth-last-child(n){ }
选中某类标签中的每种类型的第一个孩子
.类名>*:first-of-type{ }
选中某类标签中的每种类型的最后一个孩子
.类名>*:last-of-type{ }
选中某类标签中的每种类型的第n个孩子
.类名>*:nth-of-type(n){ }
选中某类标签中的每种类型的倒数第n个孩子
.类名>*:nth-last-of-type(n){ }
选中某类标签中的唯一一个个孩子
.类名>*:only-child{ }
a标签伪类选择器(部分div等也可使用)
未被访问
a:link{ }
已访问过
a:visited{ }
鼠标悬停
a:hover{ }
鼠标点击
a:active{ }
表单伪类选择器
思路：标签[属性名=属性值]:内联样式属性名{ }
权值：
style属性内行内样式 1000
id选择器 100
class选择器,属性选择器,伪类选择器 10
标签选择器,伪元素选择器 1
空格 其他 +~*> 0
如：
选中内联属性为disabled的type为text的input输入框
1 input[type=text]:disabled{ }
或
2 [type=text]:disabled{ }
表单验证
标签[属性名=属性值]:valid{}
标签[属性名=属性值]:invalid{}
选定input中name属性等于username的元素是否通过验证的……
input[name=username]:valid{ }
input[name=username]:invalid{ }
选中所有必填项
:required{ }
选中所有input中type为number的必填项
input[type=number]:required{ }
选中所有可填项
:optional{ }
选中所有input中type为text的选填项
input[type=text]:optional{ }
选中默认选中的radio项
input[type=radio]:checked{ }
对特定选项的范围
[type=number]:in-range{ }
[type=number]:out-of-range{ }
伪元素选择器
选择标签在其前添加：
标签：：before{
content：‘添加值’ }
选择标签在其后添加：
标签：：after{
content：‘添加值’ }
选择标签为其第一个字符添加样式：
注意：该条仅对块级元素起作用
标签：：first-letter{ }
选择标签为其第一行文本添加样式：（行以换行为标准）
标签：：first-line{ }
修改用户选中的文本样式
标签：：selection{ }
初始代码1(for层次选择器&属性选择器&伪类选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
text-align: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
text-align: center;
display:inline-block;
width: 300px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="one" title="one">第一个元素
<div class="one-one" title="one-one">第一个元素一代</div>
</div>
<div class="two" title="two" >第二个元素</div>
<div class="three" title="three">第三个元素
<span class="three-one" title="three-one">第三个元素一代</span>
</div>
<div class="four" title="four">第四个元素</div>
<span class="five" title="five">第五个元素</span>
<div class="six" title="six">第六个元素
<span class="six-one-odd">第六个元素一代哥哥
<span class="six-odd-two" title="six-odd-two">第六个元素二代</span>
</span>
<span class="six-one-you">第六个元素一代弟弟</span>
</div>
<span class="seven">第七个元素</span>
<div class="one">第八个元素</div>
</body>
</html>
层次选择器应用
选择某标签之后所有兄弟：波浪号~
.six-one-odd~*{
/* 选择第六个元素第一代哥哥后所有兄弟 */
background-color: pink;
}
1 .four~*{
2 /* 选择第四个标签后所有兄弟 */
3 background-color: pink;
4 }
选择某标签后下一个兄弟：加号+
.five+*{
/* 选择第五个标签后下一个兄弟 */
background-color: pink;
}
.six-one-odd+*{
/* 选择第六个元素一代哥哥后下一个兄弟 */
background-color: pink;
}
属性选择器应用
为有title属性的标签设置背景颜色
[title]{
background-color: pink;
}
为指定类型标签中有title属性的标签设置背景颜色
span[title]{
background-color: pink;
}
为指定类型标签中有title属性且title属性值为one的标签设置背景颜色
div[title=one]{
background-color: pink;
}
为指定类型标签中有title属性且title属性值以s开头的标签设置背景颜色
span[title^=s]{
background-color: pink;
}
为指定类型标签中有title属性且title属性值以e结尾的设置背景颜色 */
div[title$=e]{
background-color: pink;
}
为指定类型标签中有title属性且title属性值中包含o的标签进行模糊匹配并设置背景颜色
div[title*=o]{
background-color: pink;
}
为指定类型标签中有title属性且title属性值为o的标签进行精确匹配并设置背景颜色
div[title~=o]{
background-color: pink;
}
伪类选择器应用
为指定类的标签中第一个元素设置背景颜色，无子代则无操作
.one>*:first-child{
background-color: pink;
}
为指定类的标签中最后一个元素设置背景颜色，无子代则无操作
.six>*:last-child{
background-color: pink;
}
为指定类的标签中的第n个孩子元素设置背景
参数可以是自然数,也可以是odd,even关键字,odd是奇数,even是偶数 2n+1之类的则是以2递增
.six>*:nth-child(2){
background-color: pink;
}
为指定类的标签中的倒数第n个孩子元素设置背景颜色
与正数差不多，不再重复演示
为指定类的标签中的直接子代中每种类型中的第一个元素设置背景颜色
.six>*:first-of-type{
background-color: pink;
}
为指定类的标签中的直接子代中每种类型中的最后一个元素设置背景颜色
！不再演示
为指定类的标签中的直接子代中每种类型中的第n个元素设置背景颜色
.six>*:nth-of-type(2){
background-color: pink;
}
为指定类的标签中的直接子代中每种类型中的倒数第n个元素设置背景颜色
！不再演示
选择属性class模糊匹配为six的独生子标签为其独生子设置背景颜色
[class*=six]>*:only-child{
background-color: pink;
}
代码2（for a标签伪类选择器&表单伪类选择器&伪元素选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中所有必填项 */
:required{
border:1px solid brown;
}
/* 选中所有选填项 （注意：这里经常引起奇怪的是，除了必填项以外的都是选填项！）*/
:optional{
border: 1px solid teal;
}
/* 在范围内的样式 */
[type=number]:in-range{
border:1px solid green;
}
/* 在范围外的样式 */
[type=number]:out-of-range{
border:1px solid red;
}
/* 不可用的提交按钮 */
input[type=submit]:disabled{
background-color: #ccc;
}
/* 将默认(用户)选中的爱好用蓝色框包裹*/
input[type=checkbox]:default{
outline: 1px solid blue;
}
/* 将用户选中的爱好用绿色包裹 */
input[type=checkbox]:checked{
outline: 1px solid green;
}
/* 未被访问过 */
a:link{
color: red;
}
/* 访问过 */
a:visited{
color: green;
}
/* 鼠标悬停 */
a:hover{
color: gold;
}
/* 点击活动 */
a:active{
color: blue;
font-size: 40px;
}
/* 给form中的h4标签前方新增内容 */
form h4::before{
font-size: 7px;
content: '新加在前面的内容';
}
/* 给form中的h4标签后方新增内容 */
form span::after{
font-size: 7px;
content: '新加在后面的内容';
}
/* 选中form中div里第一个字符设置样式 */
/* 注意，该条只对块级元素起作用，对行内元素不起作用 */
form div::first-letter{
font-size: 30px;
color: aquamarine;
}
/* 选中form中h4的第一行文本设置样式 */
form h4::first-line{
color: cadetblue;
}
/* 选中用户选择的文本设置特殊样式 */
form span::selection{
background-color: red;
color: white;
}
</style>
</head>
<body>
<form action="#">
<h4>用户名：</h4>
<input type="text" required>
<br>
<span>第二个用户名：</span>
<input type="text">
<br>
<i>密码：</i>
<input type="password" title="密码长度不能超过6位！" pattern="\d{1,6}">
<br>
年龄：
<input type="number" min="18" max="60" optional>
<br>
<div>
兴趣爱好：
<input type="checkbox" checked>唱
<input type="checkbox">跳
<input type="checkbox">rap
</div>
<input type="submit" disabled>
<a href="#">哪也去不了</a>
</form>
</body>
</html>
写在最后
要是有什么疑问请疯狂私信或者评论，互相学习与借鉴，共同进步，希望以上内容能对你有所帮助。
扫一扫
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
