1、基本选择器
1.标签选择器
p{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
效果图:
2、id选择器
#box1{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* id选择器 */
#box1 {
color: pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
效果图:
3.类选择器:
.box2{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 类选择器 */
.box2 {
color: blueviolet;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
效果图:
4.通配符选择器(选中所有的内容)
*{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 通配符选择器 */
*{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
效果图:
2.包含选择器
1.子代选择器
.a>li{
}
<!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>
/* 子代选择器 选中亲生儿子*/
.a>li {
background-color: pink;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>
效果图:
2.后代选择器
<!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>
/* 后代选择器 找到后代所有要找的元素*/
.a li {
background-color: blueviolet ;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>
效果图:
3.复合选择器
<!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 {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
</style>
</head>
<body>
<div>小菜</div>
<p>坤坤</p>
<span>鸡哥</span>
<ul>
<li>nb</li>
</ul>
</body>
</html>
效果图:
4.属性选择器
type^="te" 以te开头
type$="l" 以l结尾
type*="e" type值里边包含e
<!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>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
/* type$="l"以l结尾 */
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</style>
</head>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
<div>2</div>
</body>
</html>
效果图:
5.伪类选择器
link : 表示鼠标点击之前,也称为原始状态
hover : 表示鼠标悬停状态
active : 表示鼠标点击状态
visited : 表示鼠标点击之后状态
<注>这四个选择器有先后之分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
a:link {
color: aqua;}
a:hover{
font-size: 40px;
}
a:active{
background-color: blue;
font: 80px;
}
a:visited{
color: brown;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
6.结构伪类选择器
E:first-child : 匹配父元素中的第一个元素E
E:last-child : 匹配父元素中的最后一个元素E
E:nth-child(n) : 匹配父元素中的第n个元素E(odd是单数,even:偶数)
E:nth-last-child(n) : 匹配父元素中倒数第n个元素EE:first-of-type : 指定类型E中的第一个
E:last-of-type : 指定类型E中的最后一个
<!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>
ul li:first-child {background-color: aqua;
}
ul li:nth-child(4)
{
font-size: 30px;
}
ul li:nth-child(odd)
{
font-family: 'Courier New', Courier, monospace;
}
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>ads</li>
<li>xzc</li>
<li>qwe</li>
<li>rtu</li>
</ul>
<h6>1</h6>
<p>2</p>
<h6>3</h6>
<p>4</p>
</body>
</html>
效果图:
<注>
e:nth-child(n)选择e元素的第n个子元素,无论它是什么类型。
e:nth-of-type(n)选择e元素的第n个同类型兄弟元素,即与e元素同类型的元素中的第n个。
如下图所示:
<!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>
ul li:nth-child(2) {
background-color: pink;
}
ul li:nth-of-type(4) {
background-color: rgb(215, 30, 61);
}
div span:nth-child(2) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<p>我是文字</p>
<li>1</li>
<li>2</li>
</ul>
<div>
<span>1</span>
<span>kjdscnkdscn</span>
</div>
</body>
</html>
效果图
7.伪元素选择器
<!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>
ul li::before {
content: ">";
}
ul li::after {
content: url();
}
/* input::placeholder 表单提示词 */
input::placeholder {
color: rgb(62, 226, 56);
}
/* ::selection 选中时 */
ul li:nth-child(4)::selection {
color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="" placeholder="jdhcndsk">
<ul>
<li>caixvkun</li>
<li>penghan</li>
<li>zhangjie</li>
<li>tangxiaofeng</li>
</ul>
</body>
</html>
效果图: