css測試選擇器彙總
阿新 • • 發佈：2018-12-25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.nav ul li a { /*主導航欄改成粉色 */
color: pink;
}
.site-r a {
color: red; /* 側導航欄裡的登陸改成紅色*/
}
.nav, .sitenav { /*導航欄文字變成20號字型，微軟雅黑字型 交集選擇器*/
font-size: 20px;
font-family: "微軟雅黑"
}
.nav > ul > li > a { /*一級選單文字變成綠色*/
color: green;
}
</style>
</head>
<body>
<!-- 主導航欄 -->
<div class="nav"> /*子元素選擇器*/
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">公司產品</a></li>
<li><a href="#">聯絡我們</a>
<ul>
<li><a href="#">公司郵箱</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</li>
</ul>
</div>
<!-- 側導航欄 -->
<div class="sitenav">
<div class="site-1">左側導航欄</div>
<div class="site-r"><a href="#">登陸</a></div>
</div>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.nav ul li a { /*主導航欄改成粉色 */
color: pink;
}
.site-r a {
color: red; /* 側導航欄裡的登陸改成紅色*/
}
.nav, .sitenav { /*導航欄文字變成20號字型，微軟雅黑字型 交集選擇器*/
font-size: 20px;
font-family: "微軟雅黑"
}
.nav > ul > li > a { /*一級選單文字變成綠色*/
color: green;
}
</style>
</head>
<body>
<!-- 主導航欄 -->
<div class="nav"> /*子元素選擇器*/
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">公司產品</a></li>
<li><a href="#">聯絡我們</a>
<ul>
<li><a href="#">公司郵箱</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</li>
</ul>
</div>
<!-- 側導航欄 -->
<div class="sitenav">
<div class="site-1">左側導航欄</div>
<div class="site-r"><a href="#">登陸</a></div>
</div>
</body>
</html>
偽類選擇器的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* .demo 類選擇器
：first-child 偽類選擇器
：：first-letter 偽元素選擇器*/
p::first-letter { /*選擇第一個字*/
color: red;
font-size: 30px;
}
p::first-line { /*選擇第一行*/
color: green;
}
p::selection {
color: pink;
}
</style>
</head>
<body>
<h1>freestyle</h1>
<p>英語詞彙，一般指即興的，隨意的發揮，例如HIPPOP說唱中freestyle就是即興說唱的意思。2017年6月，因吳亦凡屢次提起而火遍網路。
吳亦凡爆紅的freestyle，其實是嘻哈選手的基本功，也是中國有嘻哈的節目中一個環節。</p>
</body>
</html>