基本选择器：
eg：
<head>
<style>
P（标签选择器） {
color: aqua;
}
#box1(id选择器){----#id
color: pink;
}
.box2（类选择器） {---.class名
color: blueviole
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一
<div class="pink">我是盒子一</div>
</body>
包含选择器：
子代选择器（选择亲儿子）：
.a>li {
Backgroud-color: pink;
}
后代选择器（招到后代所有的元素）：
.a li {
color：blueviolet；
}
<body>
<ul class="a">
<li>1<li>
<li>1<li>
<li>1<li>
<li>1<li>
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
</ul>
</body>
逗号选择器（复合选择器）：
div，
P,
Span {
color: red;
}
属性选择器：
Input[type="password"]{
backgroud-color: 颜色
}
Div[id]{
width: 300px;
height: 300px;
background-color: blue;
}
以te开头：
Input[type^="te"]{
backgroud-color: 颜色
}
以l结尾：
Input[type$="l"]{
backgroud-color: 颜色
}
包含e的：
Input[type*="e"]{
backgroud-color: 颜色
}
伪类选择器：
a:link{
color:pink;
}
a:visited{
font-size: red;
}
/*hover 鼠标悬停 */
a:hover{
/* cursor 鼠标样式 */
cursor: col-resize;
font-size: 40px;
}
结构伪类选择器：
<style>
ul li:first-child{
background-color: green;
}
ul li:last-child{
background-color: pink;
}
</style>
nth-of-type与nth-child()区别：
section div:nth-child():会把所有的盒子都排列序号，
执行的时候首先看：nth-child（）之后回头看div
Nth-of-type是在查找对应的，并按需选择
Nth-child是直接按序选择
伪元素选择器：
：：before---在选中的文字之前加
：：after---在选中的文字之后加
：：select---文字选中时触发
<style>
ul li::before {
content: "dada";
}
</style>
3352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
