服务器之家
您的位置： 首页 编程语言 css

css基础快速入门-4 link和状态标记

100人浏览   2024-11-26 10:46:20 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" media="all" href="css/style.css">
 <style>
 body a {
 color: #35be2e;
 }
 body a:hover {
 color: red;
 }
 body a:active {
 color: rebeccapurple;
 }
 body a:visited {
 color: #f225ff;
 }
 /**
 css选择器覆盖上面的组件选择器
 */
 .mya {
 color: #35be2e;
 }
 .mya:hover {
 color: #f6e415;
 }
 .mya:active {
 color: rebeccapurple;
 }
 .mya:visited {
 color: #f225ff;
 }
 body iframe {
 margin-top: 20px;
 overflow-x: hidden;
 overflow-y: hidden;
 -webkit-box-direction: normal;
 width: 100%;
 height: 650px;
 }
 </style>
</head>
<body>
<div>
 <a class="mya" href="javascript:open()">ask</a>
</div>
<div>
 <iframe id="main"></iframe>
</div>
<div>
 <pre class="bg1 font1">
 元素状态
 :hover 鼠标滑过
 :active 点击触发
 :visited 已经访问过
 </pre>
</div>
</body>
<script>
 open();
 function open() {
 console.log("open in frame")
 document.getElementById("main").src = "http://baidu.com";
 }
</script>
</html>

相关推荐