第一，今天完成的任务：
1.对css多种选择器的测试使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {font-family: Courier, monospace;}
p.one {
color: white;
background-color: bisque;
}
p.two {
color: teal;
background-color: tomato;
}
#idone {
color: yellowgreen;
background-color: wheat;
}
p[href] {
color: teal;
}
p[href][title] {
color: tomato;
}
div h1 {
color: violet;
}
div b {
background-color: rgb(255, 255, 0);
}
div em {
color: #0000ff;
}
p > sapn {
color: crimson;
}
div p {
font-size: large;
}
div h1 + p {
background-color: rgb(0, 139, 139);
}
h1::first-letter {
font-size: 50px;
}
a:hover {
color:red;
font-size: 10px;
}
</style>
<title>选择器测试</title>
</head>
<body>
<h1>所有内容都用通配符设置了字体类型</h1>
<p class="one">我有一个类</p>
<p class="one two">我有两个类</p>
<p id="idone">我有唯一id</p>
<p href="#">我有一个属性</p>
<p href="#" title="testing">我有两个属性(使用了属性选择器，并且同时两个匹配)</p>
<div>
<h1>我(首字用伪元素放大了)是标题</h1>
<p>我是第一个子元素(作为h1的相邻元素被兄弟选择器添加了背景)</p>
<p>我是第二个<b>子元素(即使被嵌套依旧会被<em>后代选择器（添加背景）</em>选中)</b></p>
<p>我是<sapn>第三个(使用了子代选择器（范围比后代的小）)</sapn>子元素</p>
<p>我是<a>第四个(使用伪类,鼠标经过变小标红)</a><span>子元素(我没有被第三段子代选择器影响)</span></p>
</div>
</body>
</html>
从中我更加了解了关于通配选择器，类选择器，id选择器，后代选择器，子代选择器，兄弟选择器，属性选择器，伪元素选择器，伪类选择器的使用方法和场景，提高了对使用选择器的熟练度。
2.也顺便学习了一点选择器优先级的知识，我大概找出最主要的两条：一是就近原则；二是选择器优先级的依照id>类=属性=伪类>tag=伪元素；(其中尤其要注意为选择器加以权值大小比较的理解方法，但有些许错误，即：选择器的权值不能进位)比如 id选择器加权100，类选择器加权10，即使11个类总共110，样式却会以id优先。选择器的优先顺序只能严格按照比较，靠前多着优先应用样式，相同则就近。
第二，明天的任务：
1.继续查找云服务的错误原因，争取尽快解决；
2，学习切下图；
3.继续整理前面知识点。
返回列表
评论