Home > Article > Web Front-end > css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:141314browse
css代码中的加号(+)相邻选择器的作用:
本章节介绍一下css中相邻选择器的作用，此选择器用加号(+)表示。
此选择器能够匹配前面的选择器紧邻的兄弟元素。
代码实例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">input[type=radio]:checked + span{ background:blue;}input[type=radio]:checked + span:after{ content:"蚂蚁部落[url=]2[/url]";}</style></head><body><form method="post"> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="radio" name="colour-group"/><span>蓝色</span></label></li> <li><label><input type="radio" name="colour-group"/><span>红色</span></label></li> <li><label><input type="radio" name="colour-group"/><span>黑色</span></label></li> </ul> </fieldset></form></body></html> 上面的代码演示了此选择器的作用，更多内容可以参阅相关阅读。
相关阅读:
1.相邻选择器可以参阅CSS的相邻选择符(E+F)一章节。
2.:checked伪类选择器可以参阅CSS的伪类选择符E:checked一章节。
3.:after伪元素选择器可以参阅CSS的伪对象选择符E:after/E::after一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15644
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：为何页面内容和网页边缘有空隙_html/css_WEB-ITnoseNext article：css基本语法简单介绍_html/css_WEB-ITnose