有俩种样式 分为内部样式和外部样式
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> | |
/* 标签选择器:选中当前页面中所有符合标签 */ | |
h1 { | |
color: rgb(32, 27, 28); | |
} | |
/* id选择器 #id*/ | |
#box1 { | |
color: rgb(6, 106, 194); | |
} | |
/* 类选择器 .类名 */ | |
.box1 { | |
background-color: pink; | |
} | |
/* 通配符选择器 选中所有的元素*/ | |
* { | |
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. 结构选择器
<!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> |
<!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> |