标签：color height css3.0 width background div red
/* 处理图片 */
img {
width: 30px;
border-radius: 100%;
}
p {
width: 50px;
height: 50px;
background-color: lightgreen;
}
.blue-p {
background-color: lightblue;
}
.big {
width: 400px;
}
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
#div1 {
width: 10px;
background-color: pink;
}
.red-div {
background-color: red;
}
.big-div {
width: 500px;
height: 600px;
}
/* 鼠标悬停效果
放大1.2倍 时间200ms
*/
.effort:hover {
transform: scale(1.2);
transition: 200ms;
}
/* 未访问地址 */
a:link {
color: red;
}
/* 地址访问过效果 */
a:visited {
color: green;
}
/* 悬停效果 */
a:hover {
color: yellow;
}
/* 点击效果 */
a:active {
color: aqua;
}
/* 输入框 */
input:focus {
background-color: yellow;
}
/* 判断当前结点是否为父节点的2n+1的儿子结点 */
/* n : 非负整数 */
p:nth-child(2n + 1) {
background-color: blue;
}
/* 目录功能 */
p:target {
color: red;
transform: scale(3.0);
transition: 200ms;
}
/* 第一个字变色 */
p::first-letter {
color: red;
}
/* 鼠标选中 */
p::selection {
background-color: bisque;
}
/* befor添加 */
p::before {
content: "《";
color: black;
}
/* after添加 */
p::after {
content: "》";
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/first/css/style.css" type="text/css">
<link rel="stylesheet" href="/first/css/style2.css" type="text/css">
</head>
<body>
<a href="#myp">我的p</a>
<div id="div1">div 1</div>
<div class="red-div big-div">div 2</div>
<div class="red-div">div 3</div>
<div class="effort">div 4</div>
<p p="p1">p 1</p>
<p>p 2</p>
<p>p 3</p>
<p>p 4</p>
<a href="/about.html">about</a>
<a href="/about1.html">about1</a>
<a href="/first/login.html">about2</a>
<input type="text" name="username" id="username">
<p id="myp">p10</p>
</body>
</html>
标签：color,
height,
css3.0,
width,
background,
div,
red
From： https://www.cnblogs.com/zzh1206/p/17051626.html