前言：
而今朋友们对“cssfloralwhite”大约比较重视，兄弟们都需要剖析一些“cssfloralwhite”的相关资讯。那么小编也在网上网罗了一些对于“cssfloralwhite””的相关内容，希望朋友们能喜欢，各位老铁们快快来学习一下吧！CSS 选择器是用来给指定标签设置样式的容器。
标签选择器类选择器id 选择器后代选择器群组选择器
标签选择器，是用于给文档中的某一类标签设置统一样式的。标签选择器的关键字以标签的名字命名。
类选择器，是用于给相同标签或者不同标签，定义一个 相同 class 属性，这些标签就可以共享样式了。在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。
id 选择器，是用于给特定的 HTML 标签元素指定样式的，它是标签的唯一标识符。id 选择器与类选择器的区别在于同一个 id 名只能出现一次，而同一个 class 名可以用在多个标签上。在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号）。
后代选择器，是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。 在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。
群组选择器，是用于同时对几个选择器进行相同的样式设置。在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。
CSS 就像一个魔法师，把朴实无华的茅草屋变成了豪宅。
如果需要对页面中的某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。
其语法格式为：
标签名 { 属性名: 属性值;}例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { background-color: deepskyblue; color: floralwhite; } h1 { text-align: center; } </style> </head> <body> <h1>学习 Web 前端技术课程</h1> </body></html>显示为，
在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。
其语法格式为：
.类名 { 属性名: 属性值;}例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .architect{ color:lightskyblue; } </style></head><body> 建筑分类： <ul> <li>木结构</li> <li>混凝土结构</li> <li class="architect">钢结构</li> <li class="architect">砖木结构</li> <li>3D打印复合材料建筑</li> </ul></body></html>显示为，
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的。
它的使用与类选择器类似，语法格式如下：
#id 选择器名 { 属性: 属性值;}例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .architect{ color:lightskyblue; } #steer{ color:azure } </style></head><body> 建筑分类： <ul> <li>木结构</li> <li>混凝土结构</li> <li class="architect" id="steer">钢结构</li> <li class="architect">砖木结构</li> <li>3D打印复合材料建筑</li> </ul></body></html>显示为，
HTML 中选择器的优先级为：id 选择器 > 类选择器 > 标签选择器。
例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #idSelector{ color:rgb(48,179,202); } .classSelecter{ color:rgb(102, 160, 76); } p{ color:rgb(123,52,134); } </style></head><body> <p id="idSelector" class="classSelecter">王耶浪Web学习笔记</p> <p class="classSelecter">王耶浪Web学习笔记</p> <p>王耶浪Web学习笔记</p></body></html>显示为，
固定的优先级规则可以打破吗？
可以的，当你在样式声明中加入 !important 规则时，它会改变样式声明的优先级。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #idSelector{ color:rgb(48,179,202); } .classSelecter{ color:rgb(102, 160, 76); } p{ color:rgb(123,52,134) !important; } </style></head><body> <p id="idSelector" class="classSelecter">王耶浪Web学习笔记</p> <p class="classSelecter">王耶浪Web学习笔记</p> <p>王耶浪Web学习笔记</p></body></html>显示为，
注意：在日常开发中我们一般不要使用 !important。
标签： #cssfloralwhite
