在CSS样式表中,除了基本的选择器(如标签选择器、类选择器、ID选择器),还有许多高级选择器可以用来选取HTML文档中不同的元素。其中伪元素和伪类在CSS中的应用越来越广泛。
/* 以下是CSS伪类的几个常用选择器 */ a:hover { text-decoration: underline; /* 鼠标悬浮时给链接加下划线 */ } input:focus { border: 1px solid #0f0; /* 输入框获取焦点时加边框 */ } li:first-child { font-weight: bold; /* 列表的第一个元素加粗 */ } /* 以下是CSS伪元素的几个常用选择器 */ p::before { content: "注:"; /* 在段落前面插入注释 */ font-style: italic; } p::first-letter { font-size: 2em; /* 将段落第一个字母的字号加大 */ } p::selection { background-color: #ff0; /* 鼠标选择文本时背景色变为黄色 */ }
伪元素的语法为选择器::伪元素
,而伪类的语法为选择器:伪类
。其中伪元素的选取范围是某个元素内部的某一部分(如段落的第一个字母或前面的注释),而伪类的选取范围是某个元素的某个状态(如悬浮、聚焦、第一个位置等)。
伪元素和伪类是CSS语法中非常实用的一种选择器,可以帮助我们对HTML页面进行更加精细化的样式控制。