在html中单选选择器,已选中单选按钮标签的CSS选择器
发布日期:2021-08-28 13:15:37 浏览次数:2 分类:技术文章

本文共 1628 字,大约阅读时间需要 5 分钟。

我忘记了我第一次看到它的位置,但只要你设置了for=属性,你就可以将标签嵌入其他地方的容器中。那么,让我们看一下SO上的样本:

* {

padding: 0;

margin: 0;

background-color: #262626;

color: white;

}

.radio-button {

display: none;

}

#filter {

display: flex;

justify-content: center;

}

.filter-label {

display: inline-block;

border: 4px solid green;

padding: 10px 20px;

font-size: 1.4em;

text-align: center;

cursor: pointer;

}

main {

clear: left;

}

.content {

padding: 3% 10%;

display: none;

}

h1 {

font-size: 2em;

}

.date {

padding: 5px 30px;

font-style: italic;

}

.filter-label:hover {

background-color: #505050;

}

#featured-radio:checked~#filter .featured,

#personal-radio:checked~#filter .personal,

#tech-radio:checked~#filter .tech {

background-color: green;

}

#featured-radio:checked~main .featured {

display: block;

}

#personal-radio:checked~main .personal {

display: block;

}

#tech-radio:checked~main .tech {

display: block;

}

Featured

Personal

Tech

Cool Stuff

Today

I'm showing cool stuff in this article!

Not As Cool

Tuesday

This stuff isn't nearly as cool for some reason :(;

Cool Tech Article

Last Monday

This article has awesome stuff all over it!

Cool Personal Article

Two Fridays Ago

This article talks about how I got a job at a cool startup because I rock!

呼。对于“样本”来说,这是很多的,但我觉得它确实带动了效果并指出:我们当然可以为已检查的输入控件选择一个标签而不是兄弟姐妹。秘诀在于将input标记保持为只需要它们的内容(在这种情况下 - 只有body元素)。

由于label元素实际上并未使用:checked伪选择器,因此标签存储在header中并不重要。它确实有额外的好处,因为header是一个兄弟元素,我们可以使用~通用同级选择器从input[type=radio]:checked DOM元素移动到header容器,然后使用后代/子选择器自己访问labels,允许在选择各自的收音机框/复选框时设置它们的样式。

我们不仅可以设置标签样式,还可以设置其他内容,这些内容可能是兄弟容器的后代相对于所有inputs。现在,你们一直在等待,JSFIDDLE!去那里,玩它,让它为你工作,找出它的工作原理,打破它,做你做的!

希望一切都有意义并完全回答问题,并可能出现任何可能出现的后续问题。

转载地址:https://blog.csdn.net/weixin_33960567/article/details/118064159 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:怎么sketch画板导出html,sketch符号和导出画板 – Sketch入门UI设计教程
下一篇:c语言名人名言大全摘抄,数学名人名言大全摘抄

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.249.68.14]2022年05月23日 14时30分29秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

Java 和 Python 的区别 2019-08-03 02:38:11
win10下Python 环境安装 2019-08-03 02:38:10
关于Spring的那些事 2019-08-03 02:38:10
关于volatile 2019-08-03 02:38:09
Mysql索引创建规则? 2019-08-03 02:38:09
Mybatis 中当实体的属性名和表中的字段名不一样,怎么办? 2019-08-03 02:38:08
Linux常用服务类相关命令? 2019-08-03 02:38:08
线程安全 && 线程不安全 2019-08-03 02:38:07
什么是modCount? 2019-08-03 02:38:07
foreach抛异常的原因 2019-08-03 02:38:06
深浅拷贝 2019-08-03 02:38:06
ArrayList和LinkedList的区别?如何选用? 2019-08-03 02:38:05
什么是Redis?Redis在项目中的使用场景? 2019-08-03 02:38:05
JVM之GC垃圾回收机制 2019-08-03 02:38:05
怎么成为一个优秀的项目经理 2019-08-03 02:38:04
数据库三大范式 2019-08-03 02:38:04
在国内 PMP含金量高吗? 2019-08-03 02:38:03
关于Java日志LOG(二)之SLF4J 2019-08-03 02:38:03
关于Java日志LOG(二)之Log4j 2019-08-03 02:38:02
Java数据结构简介 2019-08-03 02:38:02