要分开HTML，和CSS两部分
一、基本选择器HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<link rel="stylesheet" href="/css/selector-base.css">
</head>
<body>
<!-- 1.标签选择器(元素选择器) -->
<h2>你好 地球</h2>
<!-- 2.属性选择器 -->
<h2 class="site">世界计算机网站</h2>
<h2 id="city">宇宙</h2>
</body>
</html>
一、基本选择器CSS-selector-base.css
标签选择器
h2 {
color:green;
}属性选择器
h2[class=”site”]{
color:red;
}
h2[id=”city”]{
color:blue;
}
二、上下文选择器HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下文选择</title>
<link rel="stylesheet" href="/css/selector-context.css">
</head>
<body>
<!-- >ul.list>li.item{item$}*8 -->
<ul class="list">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4
<!-- <ul>
<li class="item">item4-1</li>
<li class="item">item4-2</li>
<li class="item">item4-3</li>
</ul> -->
</li>
<li class="item start">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
</ul>
</body>
</html>
二、上下文选择器CSS-selector-context.css
/ 1. 父子 > /
.list > .item {
border: thin solid;
}
/ 2. 后代关系 空格 /
.list .item{
border:thin solid;
}
/ 3. 兄弟关系 + /
.list > .item.start + * {
background-color: yellow;
}
/ 4. 同级关系 ~
.list > .item.start ~ {
background-color: yellow;
}