一. 基本选择器
1.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 标签选择器 */
p {
color:aqua;
}
/* id选择器 */
#box1{
color:aquamarine;
}
/* 类名选择器 ：给所有box2的加颜色*/
.box2{
color:brown;
}
/* 通配符选择器 */
*{
background-color: burlywood;
}
</style>
</head>
<body>
<p>小辣椒是好人，请务必与她好好相处哦</p>
<div id="box1">我是1</div>
<!-- class是设置标签的类,class属性用于指定元素属于何种样式的类 -->
<div class="box2">我是2</div>
</body>
</html>结果：
1.2 包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 子代选择器 :选中亲生儿子*/
.a>li{
color: aqua;
}
/* 后代选择器 :找到后代所有要找到的元素*/
.a li{
color:brown;
}
</style>
</head>
<body>
<div>
<ul class="a">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</ul>
</div>
</body>
</html>结果：
1.3 复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 将p，span，div中的字体变为红色，选用标签选择器 */
/* p{
color:brown;
}
div{
color:brown;
}
span{
color:brown;
} */
/* 简单写法 */
p,
span,
div{
color:brown;
}
</style>
</head>
<body>
<p>小辣椒是好人，请务必与她好好相处哦</p>
<span>小辣椒是大学生</span>
<div>我是好学生</div>
<ui>
<li>小辣椒</li>
<li>小橙子</li>
<li>小凳子</li>
</ui>
</body>
</html>1.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 若想要修改password这个标签的颜色 */
input[type="password"] {
background-color: red;
}
/* 将有id的div变化一下 */
div[id]{
width:30px;
height:30px;
background-color: aqua;
}
/* 以te开头 */
input[type^="te"]{
background-color: blueviolet;
}
/* 以ch结尾 */
input[type$="ch"]{
background-color: aqua;
}
/* 含e的 */
input[type*="e"]{
background-color: blue;
}
</style>
</head>
<body>
<input type="text"></input><br/>
<input type="password"></input><br/>
<input type="search"></input><br/>
<input type="reach"></input><br/>
<input type="number"></input><br/>
<div id="123">小辣椒</div>
<div>小凳子</div>
<div>小橙子</div>
</body>
</html>1.5 伪类选择器
<!-- 伪类选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 代表当一段文本为链接时的属性。 */
a:link{
color:brown;
}
/* 鼠标悬停 */
a:hover{
/* 当鼠标放在字体上面的时候，字体放大 */
font-size:40px;
/* 鼠标样式 */
cursor:move;
}
a:visited{
color:darkblue;
}
/* 鼠标按下后设置字体大小 */
a:active{
font-size:100px;
}
div{
width:100px;
height:100px;
background-color: blue;
}
</style>
</head>
<body>
<a herf="#">去新政</a>
<div></div>
</body>
</html>1.6 结构伪类选择器
<!-- 结构伪类选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 让第一个孩子变色 */
ul li:first-child{
background-color: aqua;
}
/* 让第三个孩子变成黑色：这也是最常用的写法*/
ul li:nth-child(3){
background-color: black;
}
/* 让第奇数个孩子变红色 */
ul li:nth-child(odd){
background-color: aquamarine;
}
/* 全选 */
ul li:nth-child(n){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>1.7 ul li:nth-child()与ul li:nth-of-type()的不同
<!-- ul li:nth-child()与ul li:nth-of-type()的不同 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 让第四个孩子变蓝色 */
ul li:nth-child(4){
background-color: blue;
}
/* 另一种写法 */
ul li:nth-of-type(4){
background-color:red;
}
</style>
</head>
<body>
<ul>
<p>大家好，我是小辣椒</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
结果显示：
即：前者是先看后面，先找第几个孩子；后者是先看前面，从指定元素的盒子去找相应的孩子编号；
1.8 伪元素选择器
<!-- 伪元素选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 让li里面的前面都加一个"小辣椒" */
ul li::before{
content:"小辣椒";
}
/* 在li里面的内容的后面加一个”好学生“ */
ul li::after{
content:"好学生";
}
/* placeholder表单提示词 */
/* 要注意前面要用input标签了 */
input::placeholder{
color:red;
}
/*：：selection是选中时变得颜色,此时选中的是第三个孩子 */
ul li:nth-child(3)::selection{
color:rosybrown;
}
</style>
</head>
<body>
<input type="text" name="xjf" id="" placeholder="1234567889">
<ul>
<li>123456</li>
<li>123694</li>
<li>795625</li>
<li>156655</li>
<li>234585</li>
</ul>
</body>
</html> 结果显示：
总结： 1.after与before创建一个元素，属于行内元素；
2.新创建的这个元素在文档树中是找不到的，我们称之为伪元素；
3.语法: element::before{ }
4.before和after中必须要用content属性；
5.before在父元素内容的前面创建元素，after在后面创建元素；
6.伪元素选择器和标签选择器一样，权重都为1；
3379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
