僞元素、僞類基礎理解

時間 2019-11-10

標籤元素基礎理解简体版

原文原文鏈接

前幾天同事問我css中單冒號和雙冒號是什麼意思，我也模糊得很，只有個籠統的概念就是：僞元素和僞類。一直覺得，頁面佈局中不多使用到僞類，結果細細研究發現咱們常用的hover就是一個最簡單的僞類，頓時以爲本身太OUT了，緊跟着這兩天都在看這些東西，其實僞類最簡單的理解就是用於向某些選擇器添加特殊的效果。javascript

具體僞類、僞元素有哪些我就不一一列舉，在w3c中列舉的很清楚。我主要寫寫應用的實例。css

1.來個簡單的，我們最經常使用到的向超連接添加不一樣的顏色：html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link {
    color: #FF0000
}
a:visited {
    color: #000
}
a:hover {
    color: #FF00FF
}
a:active {
    color: #0000FF
}
</style>
</head>
<body>
  <a href="#" target="_blank">點擊試試</a>
</body>
</html>

2.稍稍來個複雜點的：java

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.color:link {
    color: #ff0000;
}
a.color:visited {
    color: #0000ff;
}
a.color:hover {
    color: #ffcc00;
}
a.size:link {
    color: #ff0000;
}
a.size:visited {
    color: #0000ff;
}
a.size:hover {
    font-size: 150%;
}
a.bgcolor:link {
    color: #ff0000;
}
a.bgcolor:visited {
    color: #0000ff;
}
a.bgcolor:hover {
    background: #66ff66;
}
a.fontfly:link {
    color: #ff0000;
}
a.fontfly:visited {
    color: #0000ff;
}
a.fontfly:hover {
    font-family: monospace;
}
a.decoration:link {
    color: #ff0000;
    text-decoration: none;
}
a.decoration:visited {
    color: #0000ff;
    text-decoration: none;
}
a.decoration:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
    <p>將鼠標移到連接，看到他們改變佈局。</p>
    <p><a class="color" href="javascript:void(0);" target="_blank">改變顏色</a></p>
    <p><a class="size" href="javascript:void(0);" target="_blank">改變字體大小</a></p>
    <p><a class="bgcolor" href="javascript:void(0);" target="_blank">改變背景顏色</a></p>
    <p><a class="fontfly" href="javascript:void(0);" target="_blank">改變字體</a></p>
    <p><a class="decoration" href="javascript:void(0);" target="_blank">給文字加上下劃線</a></p>
</body>
</html>

3.下面來個稍微複雜點的：佈局

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標移動移動吧</title>
<style type="text/css">
.btn {
    display: block;
    text-align: center;
    width: 73px;
    height: 29px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #5a8b56;
    background: #72a76e;
    color: #f2fff1;
    font-size: 14px;
    position: relative;
}
.btn:before {
    display: block;
    width: 72px;
    height: 28px;
    content: '';
    position: absolute;
    border-top: 1px solid #93bb90;
    border-left: 1px solid #93bb90;
}
a:hover.btn {
    background: #62905e;
    border-color: #5a8b56;
}
a:hover.btn:before {
    border-color: #527c4e;
}
</style>
</head>
<body>
   <a href="javascript:void(0);" class="btn">確 定</a>
</body>
</html>

應該結合JS能有更炫的效果，繼續研究中。。。先說這麼多，你們有能夠參考的資料嗎？字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。