<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testcss3</title>
<script type="text/javascript" >
</script>
<style>
div{
text-align: center;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 350px;
border-radius: 25px;
box-shadow: 10px 10px 5px #dddddd;
}
/* 相邻兄弟选择器 h1和p相邻 的p*/
.div2 h1 + p{background-color: aqua;}
/* 子元素选择器*/
h1 > strong {color: red;}
/* 伪类*/
a:link {color: #FF0000} /* 未访问的链接 up*/
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 over*/
a:active {color: #0000FF} /* 选定的链接 down */
.div3 p:first-child{font-weight: bold;}
.div3 li:first-child{text-transform:uppercase;}
.div4 p:first-child i{color: blue;}
.div2 h1:before{content: "hello";}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角</div>
<div class="div2">
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</div>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
<div class="div3">
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
<div class="div4">
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</div>
</body>
</html>
时间： 2024-10-19 09:08:54