猿创征文｜30天入门前端笔记 第三天 CSS选择器

前面花了两天时间学习HTML，算是了解了HTML的大概语法和标签属性，算是大概掌握了HTML的用法，今天开始正式进入CSS的部分，预计花费一个周左右的时间学习CSS

CSS层叠样式表

• css层叠样式表，用于编写HTML文档的外部样式，前面的HTML是一个页面的骨架的话，CSS就是也免得皮肤也衣服，赋予了页面丰富的样式
• 在HTML页面中通过link标签引入页面使用

样式的来源

• 默认样式：默认样式是浏览器为每一个元素预置的样式
• 继承样式：继承样式是元素继承自父级的样式属性
• 自定义样式：自定义样式就是我们主要编写的样式，分为三个，内联样式，文档样式和外部样式三种
• 内联样式：直接在元素中添加style属性设置的样式，只适用于指定的元素
• 文档样式：在文档头部写在style标签中的样式，适用于当前的html文档
• 外部样式：写在外部CSS样式表中的样式，可以实现多个文档复用（这个是最常用的）
• 注：尽量样式都写在外部样式表中，这样可以最大程度实现样式复用，减少代码冗余

CSS的选择器

• CSS的语法 ：选择器{属性：值}
• css中最重要的是选择器的使用，选择器使我们找到页面元素的最重要手段，所以一定要熟练使用

标签选择器

• 指定一个页面标签，调用之后会选中页面中的所有的这个标签 然后添加指定的样式

属性选择器

• 在标签选择器的基础上，指定特定的属性，更进一步的精确选择需要选择的元素，调用之后会选择带有指定属性的元素

群组选择器

• 多个标签不用的，属性不用的选择器，如果用到的样式一样，就可以使用群组选择器，只要匹配搭配其中一个属性，就可以选中

通配选择器

• 使用 * 选中所有元素，并且可以在元素后添加选择这个标签内的所有样式

层级选择器

• 选择子集元素用 >
• 选择所有的后代元素用一个空格
• 选择相邻的兄弟元素用 +
• 选择所有的兄弟元素用~
• /* 子集元素 */ body > h1 { background-color: aquamarine !important; } /* 后代元素 */ body h1 { background-color: aquamarine !important; } /* 相邻兄弟元素 */ h1.color+ { background-color: aquamarine !important; } /* 所有兄弟元素 */ h1.color~ { background-color: aquamarine !important; }

选择器权重

• 选择器的权重决定了当同一个元素被多个选择器选中时，使用谁指定的样式
• 在选择其中 内联样式>id选择器>类选择器>元素选择器
• 还有一个比较特殊的就是 !impportant 在选择器中加入!impportant 可以直接将权重提升到最高等级

今日总结

• 今天就大概学习了CSS的常用概念和选择器的部分，明天会正式的深入学习选择器
• 学习就是不断地坚持 加油 ！！！