点击右上方红色按钮关注& quot郑潇从事编码& quot，而且每天都能学到知识，了解一个问题！

谢谢你阅读它。郑潇希望你读完之后会有所收获。

首先解释一下题目的歧义。不需要使用JavaScript的原因并不意味着你应该放弃它，更不意味着有一个脚本可以替代它。据说前端在处理交互的时候，很多场景不需要JavaScript介入就可以处理。在标签特性和CSS属性的帮助下，选择器的灵活应用可以很好的完成你需要的交互效果。在这里，我将以举例的方式详细告诉你一些交互是如何在没有JavaScript的情况下实现的。希望你能从中有所收获。

先来回顾几个长的差不多的选择器。这些选择器并不是每天都会用到，可能一周甚至几个月才会用到一次，所以很容易忽略或者混淆它们的功能。所以借此机会一起复习一下，因为在本文讲解的例子中也会用到。

如上图所示：

1.逗号指的是同一个CSS样式，class值为A的对象和class值为B的对象使用的样式值完全相同。

2.空格指的是后代元素，并在类值为A的对象的所有后代元素中定义类值为B的对象的样式值.

3.大于号称为子选择器，它作用于第一代子元素而不是所有子元素，与空格选择器相区别。

4.加号是相邻兄弟选择器，它只作用于后面出现的相邻元素。如上所述，类值为B的对象紧跟在类值为A的对象之后出现.

4.破波符号定义了类值为B的所有元素在类值为A的元素的同一级别下的样式.

复习完选择器，我们来解释一些例子。

一、传送带效果实现

如果你认为这种效果只有借助脚本语言JS才能实现，那么今天你可以学习一下不用JS如何实现。还记得HTML元素中label标签的for属性吗？是的，没错。传送带效果是利用标签label的for属性实现的。

【非JavaScript实现技术】for属性规定label与哪个表单元素绑定。

例如：

label for=' male ' male/label input type=' radio ' name=' sex ' id=' male '/注意，标签中的for属性值对应于输入中的ID属性值。单击标签时，将选择单项输入。此外，我们可以使用样式选择器来设置所选输入的对等元素的状态，从而达到预期的效果。

我们来对比一下传送带效果的源码，看看是怎么实现的：

这是实现传送带效果的代码。如上图所示，实现原理是将选中的输入元素的样式设置在同一级别。需要使用的样式选择器是相邻元素选择器和兄弟元素选择器。鉴于上面的代码图，下面我就详细说说实现过程。

1.当用户单击左右箭头(labler标签)时，将选择id属性与其for属性相同的input元素，并使用相邻元素选择器设置其相邻元素class=carousel-item的显示。

2.使用同级元素选择器~。设置所有对等元素标签的class=control-1的UI状态，这样当点击左右箭头时，就可以切换到对应的图片。

二、计算复合选择效果

这就是效果。每当我们点击选择一个选项，我们将计数并在下面的结果列中加1。当选择“无”时，将不显示结果。

如果你认为这种效果只能通过编写JavaScript脚本来实现，那么今天你已经学会了一种非脚本实现。

记得我之前写过一篇文章：《使用CSS计数器动态生成且自动递增数字》。我在里面讲了三个重要的属性，包括应用计数器属性(counter-increment)和显示计数器。对这个不是很熟悉的同学可以转到上一个，这个很好理解。

好了，回到计算复合选择效果的实现，实现原理是使用counter函数。

【非JavaScript实现技术】计数器两个属性counter-increment和counter。

如果你对计数器有足够的了解，这段代码也很容易理解。使用计数器计算所选输入元素的数量。对比上面的代码具体分析一下：

1.首先，对选定的输入元素应用计数器增量，并在class=result元素上显示计数值。

2.不显示默认的class=result元素，这是由对等选择器~控制的，当有选择的input元素时显示class=result元素。

三、移入和点击翻动效果

我们来看看没有JS是怎么达到这个效果的。

【非JavaScript实现技术】利用input(checkbox)选中时设置相邻元素的样式。

DOM结果很简单：

<label><inputtype="checkbox"/><div><div>Front</div><div>Back</div></div></label>

如这个结构所示，实现的关键代码就是在checkbox选中之后设置相邻元素class=card的样式值（rotate属性）。细心的同学可能发现了，在鼠标移入时有一个小的转动角度和边框阴影，这个是利用label标签hover时给class=card元素加rotateX(20deg)和box-shadow值。鼠标移入label后，点击input选中后，使用+号选择器设置class=card元素的rotateX值即可实现上面的效果。这个比较简单，不深入说了，总之在不使用JS的情况下也能轻松搞定上面这个交互效果。

四、补充说明效果

这个效果大家一定非常熟悉，鼠标移入的时候展示对应文字说明的浮层，其意义大部分就是进一步说明。同样先来看一下效果演示。

对CSS熟悉的同学应该都知道，CSS有一些函数Function，也都是比较通用的，比如:

attr()函数

calc()函数

linear-gradient()函数

radial-gradient()函数

等等。

补充说明这个效果也无需JS来实现，纯CSS就能搞定。

【非JavaScript实现技术】鼠标hover时，使用attr函数获取属性内容到before的content中。

关键代码：

data-info是放在标签dfn上的一个自定义属性，dfn标签可标记那些特殊术语或短语的定义，关于该标签需要注意的是能不用的时候尽量不要用。总之，关于补充说明的效果，大家清楚了纯CSS是怎么实现的就行了。

五、页卡切换效果

最后要说的是Tab切换效果，其非JS处理原理就是和上面说的传送带效果是一样的，使用label标签的for属性来搞。

对照源代码来讲一下它的基本实现思路。

【非JavaScript实现技术】设置选中的input元素同级内容的样式。

这里在详细说明一下实现原理：当点击label时，其对应的input元素被选中，然后利用同级选择器~让其对应的内容（class=tab_content）显示，同时利用相邻元素选择器+设置其相邻label的显示状态，简单吧。

本文最后总结一下

本文开头部分，我给大家复习了一些选择器的用法，这里在强调三个重要的组件选择器的用法。

>：子选择器（ul>li）。

~：相邻兄弟选择器（ul+p）。

+：通用兄弟选择器（ul~p）。

对照这张图，在理解一下就一目了然了。

紧接着讲了五个实例，这里在归纳一下实例中使用到的技术实现思路。

1.label的for属性规定与哪个表单元素（id属性）对应，点击label时，就相当于是选择了其对应的input元素，然后在使用CSS选择器设置其它元素的样式。

2.CSS中计数器的用法，主要学会三个属性的配合使用，counter-reset（建立计数器），counter-increment（应用计数器），counter（显示计数），搞懂可能解决很多交互问题，更多可以参考我之前的文章。

3.注意CSS里函数的用法。如attr(),calc()等都是比较常用的。

4.最后可以要说的一个点是伪元素的用法，尤其是after/before。

这些效果你不需要使用JavaScript。以上实例如果需要源代码可以给我发私信哈。