CSS基本选择器
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
*{
margin: 0;
padding: 0;
}
#a{
width: 50px;
height: 50px;
background-color: aqua;
}
.a1{
width: 60px;
height: 50px;
background-color: black;
}
p[title]{
color: chartreuse;
font-size: 15px;
}
span{
font-size: 20px;
color: crimson;
}
h1.name{
color: darkblue;
font-size: 15px;
}
p.name{
color: darkgreen;
font-size: 16px;
}
ul li{
color: darkkhaki;
font-size: 16px;
}
.a2 > span{
font-size: 16px;
color: fuchsia;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- id选择器 : #id名 -->
<div id="a"></div>
<!-- class选择器 : .class名 -->
<div class="a1"></div>
<!-- 全选选择器:*{} -->
<!-- 属性选择器:[属性名 / 属性名=属性值 / 属性名=^属性值(以什么开头) / 属性名$=属性值(以什么结束) / 属性名=*属性值(包含什么)]{} -->
<p title="uname">你们好啊 </p>
<p>你真好</p>
<!-- 元素(标签)选择器 -->
<span>我真的很帅</span>
<!-- class选择器与元素选择器的结合使用:元素名.class名 -->
<h1 class="name">很好啊</h1>
<p class="name"> 我不是很好啊</p>
<!-- 选择器分组 :选中多个选择器,一起设置相应内容样式(选择器1,选择器2,....{}) -->
<!-- 后代选择器:祖先 后代(根据上下结构找) -->
<ul>
<li>我很痛苦,但是很帅</li>
</ul>
<!-- 子代选择器(只能选择元素的子元素):父元素 > 子元素 {} -->
<div id="a2">
<span>我不好</span>
</div>
<!-- 兄弟选择器(相同父元素):前一个 + 后一个{}(选择前一个紧挨着的后一个兄弟元素)
前一个 ~ 后一个{}(选择前一个紧挨着的后面所有兄弟元素)
-->
<script src="" async defer></script>
</body>
</html>