CSS3是一種強大的樣式語言，它不僅可以讓網頁變得更加美觀，還可以保衛蘿卜！

如何保衛蘿卜呢？看下面這個例子：

/* 樣式1：默認樣式 */
.carrot {
background-color: orange;
border-radius: 50%;
width: 80px;
height: 100px;
position: relative;
}
/* 樣式2：被攻擊時的樣式 */
.carrot.bitten {
background-color: white;
}
/* 樣式3：蘿卜受傷時的樣式 */
.carrot.bitten:before {
content: "";
background-color: red;
width: 6px;
height: 50px;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}

我們用CSS3編寫了三種樣式：默認樣式、被攻擊時的樣式以及蘿卜受傷時的樣式。

下面是HTML代碼：

<div class="carrot"></div>

當蘿卜遭到攻擊時，我們只需要添加被攻擊時的樣式，就可以改變蘿卜的顏色了：

document.querySelector('.carrot').classList.add('bitten');

當蘿卜受傷時，我們只需要在被攻擊時的樣式的基礎上，再添加蘿卜受傷時的樣式，就可以讓蘿卜受傷了：

document.querySelector('.carrot').classList.add('bitten', 'hurt');

通過運用CSS3的強大功能，我們可以保衛蘿卜，制作更加美觀、功能齊全的網頁！