1.基础选择器
<!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>
/* (1) 标签选择器:选中当前页面中所有符合标签 */
h1 {
color: rgb(32, 27, 28);
}
/* (2) id选择器 #id*/
#box1 {
color: rgb(6, 106, 194);
}
/* (3) 类选择器 .类名 */
.box1 {
background-color: pink;
}
/* (4) 通配符选择器 选中所有的元素*/
* {
font-size: 60px;
}
</style>
</head>
<body>
<div>我是一个不允许编辑的盒子</div>
<p>我是一段文字</p>
<h1 class="box1">我是标题</h1>
<div id="box1">我是一个不允许编辑的盒子</div>
<div class="box1">我是一个不允许编辑的盒子</div>
</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>
/* 子代选择器 只选中亲生儿子 */
ul>li {
background-color: pink;
}
/* 后代选择器 */
/* css样式表存在层叠性，后边的会将前边的覆盖掉 */
ul li {
background-color: aqua;
}
ul div>li {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<div>
<li>我是孙子</li>
<li>我是孙子</li>
</div>
</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 {
background-color: pink;
}
h1 {
background-color: pink;
}
p {
background-color: pink;
} */
/* 复合选择器 */
div,
p,
h1 {
background-color: aqua;
}
</style>
</head>
<body>
<div>我是一个div</div>
<p>我是小p</p>
<h1>我是标题</h1>
</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>Document</title>
<style>
input[type="text"] {
background-color: pink;
}
input[type="password"] {
background-color: aqua;
}
input[name] {
background-color: red;
}
/* *type的属性值里包含e的input元素
*/
input[type*="e"] {
background-color: blueviolet;
}
input[type^="p"] {
background-color: chartreuse;
}
input[type$="l"] {
background-color: red;
}
</style>
</head>
<body>
<form action="#">
<input type="text">
<input type="password">
<input type="email" name="email">
<input type="number">
</form>
</body>
</html>
5.伪类选择器
<!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:link 、a:visited 、a:hover 、a:active */
/* 伪类选择器：元素在不同状态下的样式 */
/* ：link 为访问的来凝结样式 */
a:link {
color: green;
}
/* 访问之后的样式 */
a:visited {
color: red;
}
/* 获取焦点时的样式 */
a:focus {
color: blue;
}
/* 鼠标悬停时的样式 */
/*
+表示下一个
~表示之后所有的兄弟元素 */
a:hover+div {
color: pink;
}
/* active 用户点击之后按住鼠标 */
a:active {
background-color: pink;
}
div:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="#">点击我去百度
</a>
<div>我是一个div</div>
</body>
</html>
6.结构伪类选择器
(1)
<!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(9) {
background-color: pink;
}
ul li:last-child {
background-color: red;
}
ul li:first-child {
background-color: aqua;
}
ul li:nth-child(2n+1) {
background-color: blue;
}
ul li:nth-child(2n) {
background-color: rgb(33, 227, 124);
}
</style>
</head>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
<li>我是li6</li>
<li>我是li7</li>
<li>我是li8</li>
<li>我是li9</li>
<li>我是li10</li>
</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>
/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
.father .son:nth-child(2) {
background-color: pink;
}
/* 先找.father，再找.father里的.son，然后对.son进行排序 */
.father .son:nth-of-type(2) {
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<p>nihao</p>1
<div class="son">我是盒子</div>2
<div class="son">我是盒子</div>3
<div class="son">我是盒子</div>4
<div class="son">我是盒子</div>5
</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>
p::before {
content: "##3#";
color: pink;
}
p::after {
content: "and you";
color: red;
}
input::placeholder {
color: pink;
}
div::selection {
color: aqua;
}
</style>
</head>
<body>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<input type="text" placeholder="请输入用户名：">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur
doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident
eius et ipsum ratione laudantium!
Corporis dicta repellat deleniti itaque blanditiis illo ipsum sed, libero quis vero, praesentium architecto hic
dolores debitis! Incidunt fugiat sed fugit aliquid officiis fuga quo sequi rerum, voluptas qui quia!
Iste consectetur corrupti sunt totam dolores quae provident dignissimos ipsum, odio maiores atque. Provident sit
maxime quidem fugiat eius illo corrupti, deserunt itaque accusantium. Consequatur quisquam distinctio architecto
suscipit vel.
Sit similique nisi pariatur molestiae obcaecati non voluptate sint. Iure veniam, ab praesentium, accusantium
quae eligendi reiciendis ipsa ad nihil atque obcaecati aut repellendus porro optio eaque itaque non
necessitatibus!
Vitae facere accusantium magnam, vero architecto dolore deleniti nobis quis, recusandae, officiis culpa magni ut
distinctio delectus odio obcaecati aspernatur! Qui optio placeat tempora recusandae explicabo aut earum
repellendus adipisci.
Quam magnam unde aperiam aliquam ut molestiae est nobis odio. Deserunt odit numquam atque modi facere
dignissimos laborum commodi architecto incidunt, officia, eveniet autem provident nesciunt et corporis quasi
ipsa!
Quaerat quod sint ea nostrum voluptas repellendus, assumenda minima numquam perferendis vel officiis dolorem
beatae nemo cum quae autem. Velit asperiores natus dolorem, et libero praesentium modi provident numquam
exercitationem.
Optio tempora fugiat eveniet debitis! Est unde blanditiis totam ullam quia debitis explicabo sit eaque quaerat,
minus molestiae. Libero quo consequatur doloribus pariatur aut impedit ullam fugiat aliquid! Libero, incidunt.
Laborum consectetur illo esse quasi voluptatem dolorum delectus eveniet. Eius nostrum non quia accusantium nam
tempore culpa praesentium iure cumque tempora id possimus, expedita ea in quod quae odit voluptatibus?
Laborum, a odit! Quibusdam suscipit neque architecto esse voluptate! Cupiditate, illum accusantium ipsam impedit
suscipit exercitationem odit repudiandae repellat, voluptatibus fugiat repellendus porro tempora? Nihil et nulla
minus reprehenderit iusto.]
</div>
</body>
</html>
4503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
