)现有一段html 代码:<input type="checkbox" name="like" value="1" /> <span>html5</span>,要使在选中该复选框时,“htmI5”这几个字变成红色的CSS3代码为
时间: 2025-01-01 17:23:19 浏览: 9
要实现这个功能,你需要在CSS部分添加一条规则,当`input[type=checkbox]`被选中时(`:checked`),其关联的`span`元素改变颜色。这里是一个简单的例子:
```css
input[type="checkbox"][name="like"]:checked + span {
color: red;
}
```
这段CSS代码的意思是找到所有名为`like`的`input`元素,如果它们的类型是`checkbox`并且被选中了,那么紧跟着它的`<span>`元素的颜色就会变为红色。
如果你想让文字不仅仅是文本颜色变红,而是整个元素有变化(例如背景、边框等),可以使用`:checked`伪类选择器与`:before`或`:after`结合,为`span`创建一个伪元素,并为其应用样式。
示例:
```css
input[type="checkbox"][name="like"]:checked + span::before {
content: ' html5';
color: red;
}
```
这会在选中状态下,在文字前插入一个红色的文本。
阅读全文