css元素选择器

作者：—上花′Ing 发布日期:2025-06-05 浏览:93

/* 示例代码：CSS 元素选择器 */

/* 1. 标签选择器 */
p {
  color: blue;
}
/* 解释：选择所有的 <p> 标签，并将文本颜色设置为蓝色。 */

/* 2. 类选择器 */
.class-name {
  background-color: yellow;
}
/* 解释：选择所有具有 class="class-name" 的元素，并将其背景颜色设置为黄色。 */

/* 3. ID 选择器 */
#id-name {
  font-size: 20px;
}
/* 解释：选择具有 id="id-name" 的唯一元素，并将其字体大小设置为 20 像素。 */

/* 4. 属性选择器 */
input[type="text"] {
  border: 2px solid red;
}
/* 解释：选择所有 type 属性值为 "text" 的 <input> 元素，并为其添加红色边框。 */

/* 5. 伪类选择器 */
a:hover {
  text-decoration: underline;
}
/* 解释：当鼠标悬停在 <a> 链接上时，文本会显示下划线。 */

/* 6. 伪元素选择器 */
p::first-letter {
  font-size: 2em;
  color: green;
}
/* 解释：选择每个 <p> 元素的第一个字母，并将其字体大小设置为父元素的两倍，颜色设置为绿色。 */

上一篇：cssbeforeafter用法

下一篇：css自动换行怎么设置