<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器: 简单选择器</title>
<style>
/ 使用九宫格来演示: grid布局实现 /
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/ simple selector，选择元素’114514’ /
#a114514
{text-align: left;
color: crimson;}
/ contextual selector，选 Span 和 item center /
span.item.center
{text-align: right;
color:yellow;}
/ descendent selector, 选 body 里的 div /
body>div
{color:red}
/Pseudo Class Selector: nth-of-type Selector，选第二个 div/
div:nth-of-type(2)
{background-color: saddlebrown;}
/Pseudo Class Selector: Event Hover/
/ Change text colour to blue when mouse hover upon /
li:hover
{color:blue}
</style>
</head>
<body>
<div class="container">
<div class="item" id="a114514">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<span class="item center">5</span>
<span class="item">6</span>
<span class="item">7</span>
<div class="item">8</div>
<div class="item">9</div>
<ul>
<li><a href=""></a>同性交友</li>
<li><a href=""></a>异性交友</li>
<li><a href=""></a>混合交友</li>
</ul>
</div>
</body>
</html>