Heim >Web-Frontend >HTML-Tutorial >css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:141341Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：为何页面内容和网页边缘有空隙_html/css_WEB-ITnoseNächster Artikel：css基本语法简单介绍_html/css_WEB-ITnose