这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。

一、本堂课重点内容：

css是用来定义页面元素的样式，能够设置字体和颜色，设置元素位置和大小，还能添加动画效果等。

• 选择器 下面是一个简单的css样式，一个样式名称加上大括号，里面是键值对的形式，这些属性组合起来就成为了一个css样式。 可以用style标签来把css样式嵌入html页面，也可以在标签里面通过style属性来设置css样式，这种叫内联（权重是最高的）。

  选择器包括标签选择器、类选择器、通配选择器（匹配所有元素）、id选择器（一般来说元素的id是唯一的）、属性选择器、伪类选择器

• 选择器的组合使用 如A>B（选中B，B为A的子元素）、A B（选中B，B为A的子孙）、A~B（选中B，B在A后且和A同级）、A+B（选中B，B紧跟在A后面）。

二、详细知识点介绍：

• 通配选择器：大括号前面是*号，匹配所有元素，其内的样式对所有元素生效，但优先级较低，容易被覆盖。
• 标签选择器：用html的标签来进行元素选择，优先级也是比较低
• id选择器：通过设置元素的id属性，并将这个id的值作为css样式的名称，其内的样式即可对特定元素生效
• 类选择器：在样式名称前面加上.号，再在元素中设置class属性即可将样式添加到对应的元素上 其他选择器就不一一介绍啦，其用法更为高阶，需熟练掌握css才能用起来得心应手。

三、课后个人总结：

• 本章我觉得难以掌握的就是各种选择器的组合使用以及伪类选择器、属性选择器的使用。主要就是伪类选择器有非常多种，比如active、hover。link等等，需要非常熟悉css才能熟练运用。
• 还有就是css表面看起来简单，但是写起来极为麻烦，有时候一个项目下来，css的代码行数甚至能超过js代码，代码量非常多，并且各种样式属性的组合还有一些注意点，比如子元素设置margin值时，如果父元素也有margin值，可能会导致外边距合并，这时有好几种解决方法，我常用的是在父元素中设置overflow：hidden；来解决。还有很多诸如此类的问题，比较属性太多了，一些组合出现问题无可避免。