CSS学习（持续更新）

学习CSS的过程中遇到的一些值得留下笔记的地方~

1.样式冲突：

1. 特殊性：ID>CLASS>元素名本身（如元素p）；
2. 顺序：特殊性相同时，后出现的优先级高；
3. 重要性important：在样式后加 !important 提高样式重要性，这样在遇到样式冲突时，网页将使用有important的样式，而不是后出现的样式。
   tip：加载外部样式表时若不同文件中有显示声明产生冲突，则后面的文件中的规则优先级更高。

---

2.外部样式表的导入方式：

1. 通过链接引用：link href；
2. 导入：@import 这会影响页面的下载和呈现速度。

---

3.使用与媒体相关的样式表（media）：

指定一个只用于特定输出的样式表，如只用于打印，或只用于在浏览器中查看屏幕。例如，可创建一个具有打印和屏幕版本共有特征的通用样式表，再创建单独的打印样式表和屏幕样式表，分别包含只用于打印的属性和只用于屏幕显示的属性。
使用方法：
1. 在link或style中添加：
2. 在样式表中使用@media规则：media print{ 里面是打印（print）时专有的规则 };

---

4.通配符*：

例： * { border: 2px solid red; } 让每个元素都有一个红色边框。
通配符匹配范围广，会让浏览器加载速度变慢，要谨慎使用。

---

5.子选择器：

.classname p{ color:red; }这个样式会对使用了classname这个类的元素的所有元素后代的p产生影响（不仅仅是对于子元素，还有子子元素等），若只想p的样式作用于子元素（而不作用于子子元素、子子子元素），那么使用.classname > p{ }。

---

6.同胞结合符：

1. 相邻同胞结合符：同胞元素即同一个父元素的子元素。相邻同胞结合符用+表示，用法为.classname p+p{ } 即p之后相邻的p元素都有classname的样式；
2. 普通同胞结合符：.classname h1~h2{ }不管是否相邻，同一父元素的h1后面的h2元素有classname的样式。
   //需要测试第一个元素是否拥有样式

---

7.伪类和伪元素：

伪类：应用于一组HTML元素，无需在HTML代码中用类标记它们（不用写成class=”“就可以作用于HTML元素上，起到了class的功能但是不是class，所以叫伪类）。
:first-child
:last-child
用法：li:first-child{ }，
选择某元素的第一个或最后一个子元素进行格式化。

伪元素： HTML中不存在的元素，例如定义第一个字母时并没有在html中标记，该字母（::first-letter）是另一个元素的部分内容。

区分：
伪类 :first-child :link :hover 等用单引号；
伪元素 ::first-line ::first-letter ::before ::after （一共四个）用双引号。

---

8.按属性选择元素：

p[class]{ color=red; } 所有有class的p的颜色都改为红色；
p[class=”classname”] class名字为classname的p；
p[class~=”classname”] class被分为多个单词，其中有一个是classname；
不一定是class，只要是元素属性都行。

css选择器参考手册：
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

---

9.透明度：

opacity是不继承的，但是！opacity值小于1的元素的子元素也会受到影响，但这些子元素的opacity值仍然为1。