关于css引入方式和选择器的实例代码

一、实例演示css规则的三种引入到html文档中的方式

1、内部样式(仅对当前文档的元素有效,使用 style 标签，写在head头部)

2、外部样式: 适用于所有引入了这个css样式表的html文档,使用 link 标签

3、行内样式: 仅适用于当前的页面中的指定的元素,使用style属性

---

二、实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

1、标签选择器

2、class选择器

3、id选择器（选择一个，浏览器不检查ID选择器的唯一性，须由开发者自行保证）

4、上下文选择器（空格：所有层级；>：父子级；+：相邻的兄弟；~：所有的相邻兄弟）

• 后代选择器（所有层级）

• 子元素选择器（仅父子层级）

• 同级相邻选择器（仅选中与之相邻的第一个兄弟元素）

• 同级所有选择器（选中与其相邻后面所有的元素）

5、结构伪类选择器

• 匹配任意位置的元素（ :nth-of-type(an+b)，an：起点，b：偏移量，n的取值从0开始）:nth-of-type()针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

  示例：

  <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
   </ul>

• 选择第四个元素

ul li:nth-of-type(4){
   background-color: red;
        }

---

• 选择所有元素

 ul li:nth-of-type(1n){
    background-color: red;
        }

---

• 选择第四个元素及后面的元素

ul li:nth-of-type(n+4){
   background-color: red;
        }

---

• 选择所有索引为偶数的元素

ul li:nth-of-type(2n){
   background-color: red;
        }

或使用关键字（even）

ul li:nth-of-type(even){
   background-color: red;
        }

• 选择所有索引为奇数的元素

ul li:nth-of-type(2n+1){
   background-color: red;
        }

或使用关键字（odd）

ul li:nth-of-type(odd){
     background-color: red;
        }

• 选择第一个元素（语法糖）

ul li:first-of-type{
     background-color: red;
        }

• 选择最后一个元素（语法糖）

ul li:last-of-type{
   background-color: red;
         }

---

• 选择元素最后面的三个元素（反向：:nth-last-of-type()）

ul li:nth-last-of-type(-n+3){
    background-color: red;
            }

---

• 选择倒数第三个元素

ul li:nth-last-of-type(3){
   background-color: red;
            }

• 匹配父元素中唯一的子元素:only-of-type