CSS基础级常用选择器

Css概述
CSS，全称“Cascading Style Sheets”，用于设置HTML标签的样式，美化我们的网页。
Css基本结构
选择符，样式属性，样式属性值
Css使用方式
样式表主要有4种方式，即，
“内嵌样式”：写在style标签对里面。
“行内样式”：直接写在标签行上面。
“外链样式”：单独写一个css文件，通过link标签引入。
“导入式”：单独写一个css文件，通过@import导入。
注意：
导入式可以同时导入多个样式,但导入每个文件时要如同写内嵌样式时，在每个属性值的末尾加上一个分号结尾。
四种方式我们选那种呢？
1.在开发中关于css样式一般或多或少都会使用一些行内样式与内嵌样式，但是主体还是通过引入单独的css文件进行使用的。
2.Link与@import两种方式都可以引入单独的css文件,我们一般选择link标签，即外链式。
3.Link与@import一些区别
①　link除了加载CSS文件以外，它还能加载其它类型文件，如“icon”，而“@import”只能加载CSS文件
②　link在现代的浏览器中是多线程加载的，也就是说在通过该标签加载一个文件的时候body标签内的DOM也在执行同步的加载。加载效率高于@import
③　link作为一个标签，也就是一个DOM元素，是可以通过JavaScript进行操作的（如增加、删除link标签，修改link的属性值等）。而“@import”写在style标签内部或CSS文件内（写在style标签内和CSS文件内的写法一致），是无法通过JavaScript进行操作的。
常用css选择器
1.什么是css选择器
所谓CSS选择器（selector）就是，对HTML页面中的元素实现一对一，一对多或者多对一的控制，从而实现布局调整，元素类型重定义，元素美化，文本、图像美化，完善交互，播放动画等一系列的功能。
简单的来说就是控制那些想要控制的网页标签，然后给他们设置样式，比如颜色，边框，字体等
2.Css选择器常用类型
①　基础选择器
1.CSS的基础选择器主要有三个：
“标签选择器”、“类选择器”和“ID选择器”。
2.一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。
②　后代选择器
后代选择器是对某元素所嵌套的指定元素进行选择，每个选择符之间用空格进行分割，多个嵌套层次应该以多个空格进行分割
③　子选择器
子选择器区别与后代选择器的地方就是，后代选择器可以选择嵌套在标签内部任意层级的标签元素，而自选择器只能选择当前标签往内一层的元素。每个选择符之间用“>”进行分割，
④　伪类选择器
伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。
⑤　群组选择器
群组选择器的使用范畴是，多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化，CSS框架设计以及后期CSS代码优化时会经常使用
⑥　同级（兄弟）元素选择器
选定当前标签同级的其它指定标签。
同级元素有两种，即“+”和“~”，
“+”只能选择该标签下一个对应标签
“~”能选择该标签后的所有同级相应标签。
⑦　属性选择器
该选择器所针对的既不是某个标签，也不是类名，或者ID，它是将一个标签的属性作为选择器来使用，最常用的地方就是涉及到属性多而杂的表单元素。基本写法是“[” + “属性名” + “]”的格式，该选择器的定义方式如下：
(1)[属性名]{…样式设置内容…}
将标签中的一个属性作为选择选择器
(2)[属性名=“属性值”]{…样式设置内容…}
将标签中的一个属性名值对作为选择器
(3)[type^=“datetime”]{…样式设置内容…}
将标签中的一个属性名名为“type”，属性值以“datetime”开头的属性名值对作为一个选择器
(4)[title$=“picture”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值以“picture”结束的属性名值对作为一个选择器
(5)[title*=“is”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值含有“is”的属性名值对作为一个选择器
(6)[title~=“a”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值含有空格分隔的词为“a”的属性名值对作为一个选择器
(7)[title|=“this”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值等于“this”或以“this”开头的属性名值对作为一个选择器。以连字符(-)连接的如lang =“this-us”，也算以this开头