1 样式表有三种书写形式：
a 行内样式：（inline-style） 优先级最高
b.标签嵌入样式 优先级次之
c.CSS文件外挂样式 优先级再次之
d.浏览器默认样式 优先级最低
2 选择器
A.标签选择器：只对某种标签渲染的选择器 如div{} span{}.....
B.类选择器：类选择器，可以跨标签，无论是什么标签，无论是什么元素，只要写上class="classname"，都会被赋予这个样式组合 如: .u211{} .u985{}
（标签选择器过于笼统，只适合普通属性设置，对于特定设置，还需要使用类选择器，所以类选择器优先级高于标签选择器）
C:ID选择器：ID选择器，与class标签一样可以跨标签。基本上只是需要在标签写上：id="idname"即可生效。书写方式如：#host{}
D:其他
并列选择器（逗号 逗号隔开）如：div,span{} 所有div,span听命令
子孙选择器（空格 空格隔开）如：div p{} 所有div中的p元素听命令，管住子孙
直接子代选择器（> 大于符号）如：div>p{} 所有div中的p元素听命令 ，只关注子代
直接兄弟选择器（+ 加号链接）如：div+p{} 直接跟着div的p元素听命令，管住直接兄弟p
兄弟选择器（~ 波浪号连接）如：div~p{} 所有跟着div后面的P元素听命令，关注所有后面的兄弟p
属性选择器([attribute] 中括号括住)如：a[target]{} 所有a中带有属性target的项听命令
div[class]{} 表示所有div中带有class属性的项听命令
div[class=boy]{} 所有div中class属性为boy的项听命令
div[class~=boy]{} 所有div中class属性中包涵单词boy的项听命令
div[class|=boy]{} 所有div中class属性中以boy开头的单词的项听命令
div[class^=boy]{} 所有div中class属性以boy开头的项听命令
div[class$=boy]{} 所有div中class属性以boy结尾的项听命令
div[class*=boy]{} 所有div中class属性包涵boy字段的项听命令
伪元素选择器：（::before）在元素之前加上某个字符如：p::before{ content:"Read this-"; } ,这是在所有p段落之前加上字段“Read this -”
学习网站：https://www.quanzhanketang.com/cssref/css_selectors.html
3 样式的运算：简单理解
先将优先级低的样式写出来，然后再与优先级高的样式比较，如果冲突，保留高优先级的样式，否则保留原样式。
一个标签可以设置多个样式，用空格间隔即可，样式优先级是根据起在CSS的先后顺序有关，排在后面的优先级高。
#id selector > #class selector(多个类选择器，再CSS中最后解析的排在最后的优先级高)>#tag 选择器
男同学{ 白衣服，白裤子}
.三好学生{红衣服 黑裤子}
#stu0001{白鞋}
运算结果：{红衣服，黑裤子，白鞋}
4 样式网页代码：
selector01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
div{
color:red;
font-size:40px;
font-weight: bold;
}
/*类选择器*/
/*类选择器，可以跨标签，无论是什么标签，无论是什么元素，只要写上class="classname"，都会被赋予这个样式组合*/
/*标签选择器过于笼统，只适合普通属性设置，对于特定设置，还需要使用类选择器，所以类选择器优先级高于标签选择器*/
.university{
color:black;
background-color: red;
}
.u985{
font-size:60px;
text-shadow: 2px 2px #ccc;
text-decoration:underline;
}
.u211{
color:white;
background-color: red;
text-decoration:line-through;
}
/*样式的运算：简单理解
先将优先级低的样式写出来，然后再与优先级高的样式比较，如果冲突，保留高优先级的样式，否则保留原样式。*/
/*ID选择器*/
#host{
background-color: blue;
color:white;
font-size: 90px;
}
/*男同学{ 白衣服，白裤子}
.三好学生{红衣服 黑裤子}
#stu0001{白鞋}*/
/*#id selector > #class selector(多个类选择器，再CSS中最后解析的排在最后的优先级高)>tag 选择器*/
/*伪元素选择器*/
div::before
{
content:"FJNU[";
}
div::after{
content:"]";
}
div[id="circle"]{
width:300px;
height:300px;
border-radius: 150px;
background-color: blue;
box-shadow: 5px 5px #ccc;
}
div:first-child{
font-size: 50px;
}
div:nth-child(2){
font-size:100x;
}
div:nth-child(2n+1){
background-color: green;
}
div:nth-child(2n){
background-color: pink;
}
</style>
</head>
<body>
<div class="u211">百里大学</div>
<div >私立大学</div>
<!-- 一个标签可以设置多个样式，用空格间隔即可，样式优先级是根据起在CSS的先后顺序有关，排在后面的优先级高。 -->
<div class="university u211">公立大学</div>
<div class="u985">日历大学</div>
<div class="u985">黄山大学</div>
<div class="u211">农历大学</div>
<span >基金会</span>
<hr>
<div id="circle">
</body>
</html>
01-flowernum.html 查找水仙花数网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#result{
margin-top:20px;
border-top: 2px solid #ccc;
}
div span{
color:white;
width:60px;
display:inline-block;
margin-left: 2px;
margin-right: 2px;
padding-left:2px;
padding-right:2px;
text-align: center;
}
div span:nth-child(2n){
background-color: blue;
}
div span:nth-child(2n+1){
background-color: red;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function findFlowerNum(){
var num=$("size").value;
var result="水仙花数：<br>";
var i;
var cnt=0;
for(i=0;i<num;i++){
if(isFlowerNum(i))
{
result+="<span>"+i+"</span>";
if(++cnt%10==0)
{
result+="<br>";
}
}
}
$("rst").innerHTML=result;
}
function isFlowerNum(num)
{
var size=checkLength(num);
var temp=num;
var sum=0;
while(temp>0)
{
sum+=Math.floor(Math.pow(temp%10,size));
temp=Math.floor(temp/10);
}
return sum==num;
}
function checkLength(num){
return (num+"").length;
}
</script>
</head>
<body>
<h3>求某范围内的水仙花数</h3>
<div>
<label for="size">位数</label>
<input type="text" id="size" value="3">
<button onclick="findFlowerNum();">查找</button>
</div>
<div id="rst">
</div>
</body>
</html>