【自学CSS笔记第9篇】——结构伪类选择器和伪元素

谁都想做幸运儿，先想想自己有没有那个实力和底气去接受这份幸运，没有日夜的付出哪里来满怀的回报，所以别再无用的幻想中荒度青春，抓紧时间多学些本事吧；

目录

什么是结构伪类选择器？

注意点：

 常见的伪类选择器：

什么是伪类？

其他常见的伪类：

演示案例：

---

什么是结构伪类选择器？

• CSS 中的结构伪类选择器是根据 HTML 页面中元素之间的关系来定位 HTML 元素，从而减少对 HTML 元素的 id 属性和 class 属性的依赖
• 伪类是 W3C 制定的一套选择器的特殊状态，通过伪类可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 id 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）

注意点：

        伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：

selector:pseudo-class {
property: value;
}

selector为选择器名称，pseudo-class为伪类名称

 .box a:hover{
            color: rgb(238, 172, 92);
            background-color: rgb(205, 202, 202);
        }

 常见的伪类选择器：

• E:first-child 选择父元素（E）中的第一个子元素
• E:last-child 选择父元素（E）中的最后一个子元素
• E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式，

/*演示案例*/
tr:nth-child(3) { …… }     /* 匹配所有表格里面排第3的子元素 */
tr:nth-child(2n+1) { …… }  /* 2n+1，公式，匹配所有奇数的子元素 */
tr:nth-child(odd) { …… }   /* odd：关键字，匹配所有奇数行 */
tr:nth-child(even) { …… }  /* even：关键字，匹配所有偶数行li */

什么是伪类？

      一个伪类是我们可以为了增加某种特殊状态给某个特定的HTML元素。我们可以使用冒号语法将伪类添加到CSS选择器，:如下所示（给超链接标签添加悬停效果）：

.box a:hover{

            background-color: coral;

        }

其他常见的伪类：

演示案例：

 .box a:hover{
            background-color: coral;
        }