10、CSS样式元素与排版技巧全解析

CSS样式元素与排版技巧全解析

1. CSS选择器与伪类、伪元素

在CSS中，我们可以对HTML元素进行样式设置。例如，为输入文本框设置浅黄色背景：

input[type="text"] { background-color: #ffff99; }

对应的HTML代码为：

<input type="text" size="32"/>

1.1 伪类（Pseudo - Classes）

伪类能基于特定状态或情况扩展CSS语句选择HTML元素的能力。常见的伪类使用场景是检测和设置链接的不同状态：

a:link    { color: blue;   }
a:hover   { color: green;  }
a:active  { color: red;    }
a:visited { color: purple; }

现代浏览器允许所有元素拥有悬停（hover）状态，而不仅仅是锚元素创建的链接。

焦点（focus）伪类用于选择获得焦点的元素，比如输入框：

input[type="text"]:focus { background-color: #ffff99; }

:first - child伪类用于选择其父元素的