基本选择器:
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>