css代码中的加号(+)相邻选择器的作用

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/

时间: 2024-12-30 13:03:11

css代码中的加号(+)相邻选择器的作用的相关文章

grunt-css-sprite css 代码中的切片合并

安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css代码中为切片添加background-position属性3.生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码4.生成高清设备雪碧图,使用 image-set5.支持选择器提取,进一步优化CSS文件大小6.在引用雪碧图的位置打上时间戳7.在样式末尾追加时间戳8.按照时间戳命名文件 配

css代码引入方式与基本选择器

引子 css功能:对html元素进行渲染布局 1.查找标签元素 2.操作标签(加对应的css属性) 由两个主要的部分构成:选择器,以及多条声明 ==================================== css代码引入方式 一.行内式(不涉及查找,跟html绑定,难维护) <p style="color: red;font-size: 24px">hello world</p> 二.嵌入式:head标签内嵌style标签 选择器 标签选择器 id选

CSS 3 中的伪类选择器

伪元素选择器是指并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择. 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 在CSS中,主要有如下四个伪元素选择器 1.first-line伪元素选择器用于向某个元素中的第一行使用样式. 2.first-letter伪元素选择器用于向某个元素中的文字的首字母或第一个中字使用样式. 3.before伪元素选择器用于在某个元素之前插入一些内容. 4.after伪元素选择器用于在某个元素之后插入一些内容.

CSS代码中注释的3种方法

1.选择器(child selector) 如果你想在IE中隐藏一个CSS定义,可以使用子选择器.css部分: html>body p {/* declarations */} 2.“通配符”(*) 这种写法只有IE浏览器可以理解(对其他浏览器都隐藏)css部分: * html p {/* declarations */} 3.“反斜线”(\) 如果你希望IE/Win有效而IE/Mac隐藏,可以使用“反斜线”技巧.css部分: /* \*/* html p {declarations}/* */

gulp-css-spriter 将css代码中的切片图片合并成雪碧图

NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), minifyCSS = require('gulp-minify-css'),    spriter = require('gulp-css-spriter'); gulp.task('css', function() { var timestamp = +new Date();    //需要自动合并雪

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

css基础教程:对css代码精简

在进行web前端项目开发(http://www.maiziedu.com/course/web/)时,会对css代码进行精简,减少代码冗余,提高网页加载速度,也比较方便后期的维护,下面一起看看对css代码精简的方法: 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } /* 可以使用简写属性 margin */ .header { margin:

CSS代码重构

CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高CSS代码性能主要有两个点:1.提高页面的加载性能提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存2.提高CSS代码性能不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的 提高代码的可维护性 提高CS

CSS代码重构与优化之路

写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞. CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS