之前咕咕咕了有点久，主要是日更累死了，一天要花一个多小时去写
所以后面的随笔发布时间应该是随心发，不定时，半个月来也是深入地学了JS，也差不多快学完了
估计CSS3讲完后就会去写JS（JavaScript）
这一次简单介绍下CSS3的三种样式表和各种选择器的使用
Part 1 样式表
关于html的样式表可以在下面链接中查看
https://www.cnblogs.com/yuange1433223/p/12847127.html
html5的样式表有：外部样式表、内部样式表、内联样式表
样式表是什么？这里可以简单理解成改变某标签的样式（宽、高、内外边距、字体、背景等）
Part2 选择器
CSS选择器有以下几种：
派生选择器：通过根据元素在其位置的上下文关系来定义样式
id选择器：可以为标有id的HTML元素指定特定的样式，id选择器以“#”来定义
目前比较常用的方式是id选择器，常常用于建立派生选择器
类选择器：类选择器以一个点显示，class也可以用作派生选择器
属性选择器：对带有指定属性的HTML元素设置样式
上面灌输的那些概念简单看下就行啦，详细代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3基础</title> 6 <link rel="stylesheet" type="text/css" href="01_css3基础.css"> 7 </head> 8 <body> 9 <!-- 自定义样式 --> 10 <yu1>自定义标签1</yu1><br> 11 <yu2>自定义标签2</yu2><br> 12 <yu3>自定义标签3</yu3><br> 13 <yu4>自定义标签4</yu4><br> 14 <p>这是一个p标签</p> 15 <!-- 派生选择器 --> 16 <p><strong>p标签：hello world</strong></p> 17 <ul> 18 <li><strong>li标签：hello world</strong></li> 19 </ul> 20 <!-- id选择器 --> 21 <div id="divid">div标签：id选择器divid</div> 22 <p id="pid">p标签：id选择器pid<a href="http://www.baidu.com">百度一下</a></p> 23 <!-- 类选择器 --> 24 <p class="pclass">p标签：类选择器pclass</p> 25 <div class="divclass">div标签：类选择器divclass<a href="http://www.bilibili.com">bilibili</a></div> 26 <!-- 属性选择器 --> 27 <p title="歪比巴卜">属性选择器（默认）</p> 28 <p title="shuxing">属性选择器（shuxing）</p> 29 </body> 30 </html>
1 body{ 2 color: black; 3 font-size: 50px; 4 } 5 6 p{ 7 color: chartreuse; 8 font-size: 25px; 9 } 10 11 yu1,yu2,yu3{ 12 color: aqua; 13 font-size: 37px; 14 } 15 16 #pid a{ 17 color: springgreen; 18 font-size: 30px; 19 } 20 21 #divid{ 22 color: forestgreen; 23 font-size: 30px; 24 } 25 26 .pclass{ 27 color: tomato; 28 font-size: 20px; 29 } 30 31 .divclass a{ 32 color: saddlebrown; 33 font-size: 20px; 34 } 35 36 li strong{ 37 color: darkgoldenrod; 38 font-size: 20px; 39 } 40 41 [title]{ 42 color: red; 43 font-size: 20px; 44 } 45 46 [title="shuxing"]{ 47 color: mediumslateblue; 48 font-size: 20px; 49 }
打开网页时的效果如下
上面引用的是外部样式表
关于自定义标签，在设置其样式表时，语法：标签名{......}，如上面的自定义标签和p标签的设置
关于派生选择器，在设置其样式表时，语法：包含标签 被包含标签{......}，包含标签和被包含标签用空格隔开，
如上面的html文件中的派生选择器那一块，18行中<li>标签是包含标签，<strong>标签是被包含标签
当然，这个包含关系还可以是3级、4级、5级......
关于id选择器，在设置其样式表前，首先要在html文件的你想要设置的标签里面添加id，标记下
然后再外部样式表（CSS文件）中用过“#”后接id名{......}即可修改其样式，详细见上面源码
关于类选择器，在设置其样式表前，首先要在html文件的你想要设置的标签里面添加class，标记下
然后再外部样式表（CSS文件）中用过“.”后接类名{......}即可修改其样式，详细见上面源码
关于属性选择器，这个在html5文件里面不要对齐标记id或者class，有属性即可
然后在CSS文件中，通过：[属性]{......}去修改样式，也可以是[属性=“属性名”]{......}去修改样式，详细见上面源码
出上面选择器之外，还有一种选择器，可以直接改变所有标签的style，但是优先级最低
书写格式：*{......}
*{ font-size: 40px; color:aqua}
如果你在设置一个标签的属性时，该标签里面同时含有id，class，同时也含有其他属性，
这时如果你同时在样式表中对其id和class以及其他属性进行设置时，这时不可能同时拥有上述三者的样式
而是取决于id选择器的设置，这个选择器之间的优先级，如：
<a href="00_zero.html" id="id1" class="class1">7th</a>
*{ font-size: 40px; color:aqua} .class1{font-size: 30px; color: blue} #id1{font-size: 25px; color: blueviolet} [href]{font-size: 20px; color: brown}
效果如下：
颜色是blueviolet，字体大小是25px
还有一点要注意的，类选择器和id选择器的区别：
类：比如我们人类，分中国人，美国人，英国人等，相当于分类
我们说中国人，信仰的是马克思，这里我们可以理解成我们将“中国人”这个类，添加了信仰这一样式的设置
这个类呢，指的是全体中国人，所以类可以被多人（标签）使用
而id，比如我们的身份证，每个人都有属于自己的身份证，所以，一个id只能一人（标签）使用
这个就是id和类的区别，如果你在编写时，多个标签添加同个id时，编辑器可能会报错
总结
上面选择器的用法也是大概简单的讲了一遍，用起来也是没啥难度，我记得之前学的时候相关知识点貌似不只这些
不过最基本的应该就上面那些，我记得标签之间是否隔代书写也会不同的，所以后面想到的话再简单补充下
最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）
没用就当看着玩啦[狗头]