css书写规范：
选择器 {
属性名：属性值;
属性名：属性值;
}
基本选择器
标签选择器：选中当前页面中所有符合标
h1 {
color: rgb(32, 27, 28);
}
id选择器：#id
#box1 {
color: rgb(6, 106, 194);
}
类选择器：.类名
.box1 {
background-color: pink;
}
通配符选择器: 选中所有的元素
* {
font-size: 60px;
包含选择器
子代选择器: 只选中亲生儿子 (只选中第一层)
ul>li {
background-color: pink;
}
后代选择器:
( css样式表存在层叠性，后边的会将前边的覆盖掉 )
ul li {
background-color: aqua;
}
ul div>li {
background-color: brown;
} （只选中第二层）
逗号选择器（复合选择器）：
div,
p,
h1 {
background-color: aqua;
}
<body>
<div>我是一个div</div>
<p>我是小p</p>
<h1>我是标题</h1>
</body>
属性选择器：[ ]，属性值里 (包含（*），开头（^），结
尾（$）)
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;
}
伪类选择器：设置元素在不同状态下的样式（ : link 未访问时的样式； : hover 鼠标悬停时的样式； : visited 访问之后的样式；: focus获取焦点时的样式； : active用户点击鼠标后未反弹的样式；”+ “表示下一个；”~“表示之后的所有兄弟元素 ）（顺序：link visited hover focus）
（：link 为访问的来凝结样式 ）
a:link {
color: green;
}
（访问之后的样式 ）
a:visited {
color: red;
}
（获取焦点时的样式 ）
a:focus {
color: blue;
}
（ 鼠标悬停时的样式 ）
（ +表示下一个
~表示之后所有的兄弟元素 ）
a:hover+div {
color: pink;
}
（用户点击之后按住鼠标 )
a:active {
background-color: pink;
}
div:hover {
background-color: pink;
}
结构伪类选择器：
（1）
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);
}
（2）
先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son）
.father .son:nth-child(2) {
background-color: pink;
}
先找.father，再找.father里的.son，然后对.son进行排序
.father .son:nth-of-type(2) {
background-color: aqua;
}
<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>
伪元素选择器：(before、after后必须有 content 属性）
p::before {
content: "##3#";
color: pink;
}
p::after {
content: "and you";
color: red;
}
input::placeholder {
color: pink;
}
<body>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<input type="text" placeholder="请输入用户名：">
</body>
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
