1 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*派生选择器*/
ul li{
background-color: red;
}
/*id选择器*/
#id{
background-color: aqua;
}
/*类选择器*/
.class{
background-color: coral;
}
/*属性选择器*/
[title]{
background-color: blue;
}
/*属性和值选择器*/
[title=property]{
background-color: darkgreen;
}
</style>
</head>
<body>
<ul>
<li>派生选择器</li>
</ul>
<p><strong id="id">类选择器</strong></p>
<span class="class">类选择器</span>
<p title="">属性选择器</p>
<p title="property">属性和值选择器</p>
</body>
</html>
2 轮廓
<style type="text/css">
p{
/*设置轮廓的颜色*/
outline-color: blue;
/*设置轮廓的样式*/
outline-style: groove;
/*设置轮廓的宽度*/
outline-width: thick;
}
</style>
<p>CSS轮廓</p>