引言

CSS选择器概述

CSS选择器是用于指定CSS样式应用于HTML元素的规则。它由两部分组成：选择器和声明块。选择器用于指定需要应用样式的元素，声明块则包含了具体的样式声明。

基础选择器

  1. 元素选择器：直接使用HTML标签名称作为选择器，如p表示所有<p>标签。
  2. 类选择器：使用.开头，如.class表示所有具有该类名的元素。
  3. ID选择器：使用#开头，如#id表示具有该ID的唯一元素。

复合选择器

  1. 后代选择器：使用空格分隔，如div p表示所有<div>内部的<p>标签。
  2. 子选择器：使用>分隔，如div > p表示直接子元素。
  3. 相邻兄弟选择器：使用+分隔，如.sister + p表示紧接在.sister后的<p>标签。
  4. 通用兄弟选择器：使用~分隔，如.sister ~ p表示所有与.sister相邻的同级<p>标签。

图片元素的美颜秘籍

1. 调整图片大小

img {
    width: 200px; /* 宽度设置为200像素 */
    height: auto; /* 高度自动调整，保持图片比例 */
}

2. 设置图片边框

img {
    border: 2px solid #000; /* 边框宽度为2像素，颜色为黑色 */
}

3. 添加图片阴影

img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影，模糊半径为10像素，颜色为半透明的黑色 */
}

4. 设置图片圆角

img {
    border-radius: 10px; /* 设置圆角半径为10像素 */
}

5. 添加图片动画

img {
    animation: rotate 2s linear infinite; /* 旋转动画，持续时间为2秒，匀速播放，无限循环 */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

总结