选择器是与文档树中的元素匹配的模式。在CSS规则中,它们用于为与模式匹配的元素定义样式。
是否有 CSS 选择器允许我根据 HTML 选择选项值选择元素? 1 2 是否有 CSS 选择器允许我根据 HTML 选择选项值选择元素? <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>Display only if an option with value 1 is selected</p> 我正在寻找一种仅 HTML/CSS 的方法来仅显示选定数量的表单字段。我已经知道如何用 Javascript 来做到这一点。 有办法做到这一点吗? 编辑: 问题标题可能具有误导性。我并不是想设计选择框的样式,这很常见,而且已经有很多答案了。我实际上是在尝试根据 <P> 中选择的值来设置 <select> 元素的样式。 我真正想做的是根据选定的数值显示多个表单字段: <select name="number-of-stuffs"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="stuff-1"> <input type="text" name="stuff-1-detail"> <input type="text" name="stuff-1-detail2"> </div> <div class="stuff-2" style="display:none"> <input type="text" name="stuff-2-detail"> <input type="text" name="stuff-2-detail2"> </div> <div class="stuff-3" style="display:none"> <input type="text" name="stuff-3-detail"> <input type="text" name="stuff-4-detail2"> </div> 我想在物品数量=2时显示div.stuff-1和div.stuff-2,并在物品数量=2时显示display div.stuff-1div.stuff-2和div.stuff-3。 类似这样的东西小提琴 它称为 属性选择器 option[value="1"] { background-color:yellow; } 示例 http://jsfiddle.net/JchE5/ 你可以使用 select option[value="1"] 但浏览器支持不会太棒。 这可能需要一个尚未为 CSS2 或 CSS3 指定的 parent 选择器。 “包含 bar 的 foo”的 CSS 选择器? 有 CSS 父选择器吗? 截至 2013 年 5 月,主题选择器已在 CSS4 工作草案中定义,但尚未有浏览器供应商实现它。 所讨论的方法是否(理论上)使用主题选择器有效还有待观察。 下面的替代方案怎么样? 您没有得到 select 框,但也许这已经足够接近了。 #option-1, #option-2, #option-3 { display: none; } #nos-1:checked ~ #option-1, #nos-2:checked ~ #option-2, #nos-3:checked ~ #option-3 { display: block; } <input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label> <input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label> <input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label> <div id="option-1"> <input type="text" name="stuff-1-detail" value="1-1" /> <input type="text" name="stuff-1-detail2" value="1-2" /> </div> <div id="option-2"> <input type="text" name="stuff-2-detail" value="2-1" /> <input type="text" name="stuff-2-detail2" value="2-2" /> </div> <div id="option-3"> <input type="text" name="stuff-3-detail" value="3-1" /> <input type="text" name="stuff-4-detail2" value="3-2" /> </div> 我相信在“实时”或实时中,只有使用 javascript 或 jQuery 才有可能。使用 display: none onLoad 将潜在隐藏的字段包裹在 div 中,并让 JS 或 jQuery 将状态更改为 display: block 或您喜欢的任何方式。 //Show Hide based on selection form Returns $(document).ready(function(){ //If Mobile is selected $("#type").change(function(){ if($(this).val() == 'Movil'){ $("#imeiHide").slideDown("fast"); // Slide down fast } else{ $("#imeiHide").slideUp("fast"); //Slide Up Fast } }); //If repairing is selected $("#type").change(function(){ if($(this).val() == 'repairing'){ $("#problemHide").slideDown("fast"); // Slide down fast $("#imeiHide").slideDown("fast"); // Slide down fast }else{ $("#problemHide").slideUp("fast"); //Slide Up Fast } }); }); // type is id of <select> // Movil is option 1 // Repairing is option 2 //problemHide is div hiding field where we write problem //imeiHide is div hiding field where we write IMEI 我正在我的一个应用程序中使用... PHP 也可以,但是使用 PHP,您必须发送更改请求,或者您可以在 php 中编写代码,以根据已选择的值加载某些类,例如 <select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 我找到了基于这个答案的解决方案 最能满足op的要求。不完全是 CSS,但绝对涉及最少数量的 JavaScript。 select[data-chosen='1']~.stuff-1{ display: block !important; } select:not([data-chosen='1'])~.stuff-1{ display: none; } select[data-chosen='2']~.stuff-2{ display: block !important; } select[data-chosen='3']~.stuff-3{ display: block !important; } <select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="stuff-1"> <span> I am stuff-1!</span> <input type="text" name="stuff-1-detail"> <input type="text" name="stuff-1-detail2"> </div> <div class="stuff-2" style="display:none"> <span> I am stuff-2!</span> <input type="text" name="stuff-2-detail"> <input type="text" name="stuff-2-detail2"> </div> <div class="stuff-3" style="display:none"> <span> I am stuff-3!</span> <input type="text" name="stuff-3-detail"> <input type="text" name="stuff-4-detail2"> </div> 你甚至不需要编写任何单独的js,尽管在"this.dataset.chosen = this.value;"中嵌入onchange似乎有点hacky。 现在终于可以实现了,因为:has()得到了广泛的支持(https://caniuse.com/css-has)。 p { display:none; } select:has([value="1"]:checked) + p { display: block; } <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>Display only if an option with value 1 is selected</p>
我正在绞尽脑汁去实现一些相对简单的事情。 我需要选择页面上的每个第三个和第四个元素,如何使用 css :nth-child() 来做到这一点? 也欢迎JS解答。
我想在我的段落开始之前添加一个引号图标,因为我在其他一些网站上看到过这样做。 所以我尝试调整一下宽度、高度和字体大小
我试图使用应用程序脚本中的CSS选择器从此网页抓取下一页链接,但结果总是未定义,即使我定义的选择器是正确的。 函数 fetchInform...
鉴于codepen - https://codepen.io/jonny-b31/pen/ExzPypw 我创建了一个包含 2 个块的容器,当我将鼠标悬停在它们上时,我必须相应地更新背景。默认情况下,块 1 颜色是...
我正在尝试通过 Google 标签管理器实现架构标记。 例如,一段代码可以从产品页面动态提取唯一的 URL。 简而言之,这将是“...
所以我对剧作家有意见。 我试图用某个占位符填充输入字段。 使用: 等待 page.waitForSelector('input[placeholder="Text"]', { 状态:“
我在 ng 构建过程中遇到错误 [警告] 由于选择器错误而跳过了 6 条规则: .amplify-accordion__item:where() -> 空子选择器 .amplify-accordion__item:where() -> 空子
伪元素嵌套CSS不适用于在<details>下使用`&`作为::标记,但<summary>
尝试使用伪元素 ::marker 进行 CSS 嵌套功能,但发现奇怪的是这种嵌套不起作用 细节 { 内边距:4px; & 概括 { 红色; &::
我正在使用 tailwind、react 和 nextjs 创建一个网站。我正在尝试利用检查单选按钮技巧让网站在没有 JavaScript 的情况下显示不同的内容。我想做...
在selenium java中:无法切换到页面上显示的模式角色=“dialog”
我在这里打开页面: 页 我无法单击 cookie 对话框! 我也看不到 iframe 或警报窗口。我尝试了 getWindowHandles 但没有成功。 这是我的硒测试: 包装...
这将选择直接位于 标签前面的所有 标签: A+B { /* 样式 */ } 紧接着 标签的所有 标签的选择器是什么? 这是示例 HTML
我可以像这样使用相邻选择器: /* 当c和c相邻时,将第二个c涂成红色 */ .c + .c { 背景颜色:红色; } 但是当“.c”不存在时如何做同样的事情......
如何选择具有当前焦点的元素? jQuery 中没有 :focus 过滤器,这就是为什么我们可以使用这样的东西: $('输入:焦点').someFunction();
我正在寻找一个标签选择器,即基于 id="dropdown- Sex-health" 的 href="/chlamydia-treatment"。 所以基本上是想为我父母的兄弟姐妹的孩子找到一个选择器......
所以,基本上,我有这个由代码自动生成的 HTML 示例: 我想“显示:无”此文本但保持跨度内容可见 有吗
NoSuchElementException,Selenium 无法定位元素
我想在selenium中找到我的TextField,但我不知道如何(我第一次使用selenium)。 我试过: driver.findElement(By.id("originTextField")) 或通过 xPath 和 cssSelector 字符串
我有一个包含输入标签的跨度,并且我在跨度中声明了一个 :after 伪元素来设置其样式。 跨度::之后{ 内容:'有效'; 颜色:绿色; } 输入:无效{ 轮廓:2px
我在下面分别列出了几个层次结构,其中第一个选择器是父 div,第二个是 div 中的图像项。但我能以某种方式将这些结合起来吗? .outdoors .how-to-image {