普通内容
    

#out-link {
    color: blue;
}

以上为三种引用方法，不包括JS

选择器

1. id选择器

   唯一性，原则上通篇文件有且仅有一个id名称，不可重复

   任意标签的id属性，其属性值即为其唯一id，此id其他标签不可再用。

   如：

   xxx

   CSS选择器表达式如下：

   #first-id {
   
   }

   表达式关键词：#

2. class选择器

   任意标签的class属性，其属性值即为其class，此class与其他标签可共用，定义后所有同class标签一起生效。

   如：

   xxx

   CSS选择器表达式如下：

   .first-class {
   
   }

   表达式关键词： .

3. 标签选择器

   任意标签的标签名本身就是其选择器，由于标签的可复用性，所以使用标签选择器即为对所有同标签生效。

   CSS选择器表达式如下：

   div {
   
   }

   表达式关键词：无

4. 伪类

   伪类不算是选择器，但是因为独特，这里拎出来说一下

   在选择器选中的基础上，对该标签的某种特性时段定义相关CSS属性，如hover（鼠标覆盖过程中），active（激活过程中）等等。

   CSS选择器表达式如下：

   div:hover {
       color: yellow;
   }

   相关效果见：CodePen

   表达式关键词：:特性

属性

属性即CSS样式定制的具体样式，比如定制宽高，分别为width与height等。

相同的属性在不同的定位于显示中会有不同的表现，这里暂不表述过多，此处将属性大致分为四类，如下：

1. 可继承属性

   普通标签可能存在子标签的情况，因此在给一个普通标签定义可继承属性时候，若子标签未定义覆盖父级定义的属性，则继承父级属性的值，如font标签。

   如存在如下代码关系：

   
       我是父级标签
       
   
           我是子级标签
           
   
               我是孙子标签
           
       
   

   定义CSS如下：

   .father {
       color: purple;
   }

   相关效果见：CodePen

2. 不可继承属性

   不可继承性则比较好理解，就是只对自己生效。
   如存在如下代码关系：

   
       我是父级标签
       
   
           我是子级标签
           
   
               我是孙子标签
           
       
   

   定义CSS如下：

   .father1 {
       border: 1px solid red;
   }

   相关效果见：CodePen

3. 与定位相关的属性

   定位下篇会说，这里只提一下主要相关属性：

   • position（定位方式）
   • top（距离上方距离）
   • right（距离右边距离）
   • bottom（距离下方距离）
   • left（距离左边距离）

4. 与显示相关的属性

   显示下篇会说，这里只提一下主要相关属性：

   • display（显示方式）
   • width（宽度）
   • height（高度）
   • flex（弹性）
   • 其他flex相关

完整测试代码

<!-- ../ 上级目录(../../../../)    ./当前目录    /根目录 -->
选择器(优先级排序)
    

id(标记)
      
class(类)
      
:特性(伪类)
      
标签
    
属性
  
    选择器 {
      属性A: 值A;
      属性B: 值B;
    }
  

  

感谢阅读，如果对你有任何帮助，深感荣幸。

如有问题，请留言。

如果觉得文章不错，还请关注一下，谢谢