css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:28:14
Original
1317 people have browsed it

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>
Copy after login

上面的代码演示了此选择器的作用,更多内容可以参阅相关阅读。
相关阅读:
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/

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template