选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
CSS 定位 p-dropdown primeng 中的第一个选项
我在我的应用程序中使用 primeng，我只想自定义 p 下拉列表中的一个选项，但不知道如何去做。 我在我的应用程序中使用 primeng，我只想自定义 p 下拉列表中的一个选项，但不知道如何去做。 <p-dropdown id="dropdown" [options]="options" optionLabel="name" optionValue="name"></p-dropdown> 我有这个作为我的CSS： p-dropdown ::ng-deep .p-dropdown-item { /* my custom css for one option only */ } 我尝试使用 :first, :first-child, :first-of-type, :nth-child, :nth-of-type 来看看我是否可以只定位一个选项，但它仍然将 css 应用于所有下拉菜单中的选项。我该怎么办？ PS：这个问题与 select 元素无关，与 primeng p-dropdown 元素有关。请完整阅读问题。 请注意，有 p-dropdownitem 元素和 p-dropdown-item CSS 类： <p-dropdownitem ...> <li class="p-dropdown-item" ...> <span ...>LABEL</span> </li> </p-dropdownitem> 所以，:first-item应该应用于该元素，而不是其具有该类的子元素： p-dropdown ::ng-deep p-dropdownitem:first-child .p-dropdown-item { /* my custom css for one option only */ } 希望这有帮助:)
这是一个我不明白的例子： .container_12 .grid_6, .container_16 .grid_8 { 宽度：460 像素； } 在我看来， width: 460px 适用于上述所有类。但为什么...
在 20 个元素的 ul/li 中，如何从列表中的第 2 个元素开始定位 4 个元素中的 2 个并发元素 (1 / 2+3 / 4 / 5 / 6+7 / 8 / 9 / 10+ 11 等）。 我尝试使用 :nth-child 规则，但我...
我想在鼠标悬停时显示卡片。我做了两个div，第一个是单专辑，另一个是隐藏。我使用+选择器并对名为hide的div不显示任何内容。 但悬停效果确实...
我正在尝试将我的徽标添加到网页的标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。 这是我的 html 文件 我正在尝试将我的徽标添加到网页标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。 这是我的 html 文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Restaurant</title> </head> <body> <header> <div id="logo"> <img src="img/logo.svg" alt=""> <p>RESTAURANT</p> </div> </header> </body> </html>type here 这是我的 style.css 文件 *{ margin: 0; padding: 0; /* border: 1px solid red; */ } body{ background-color: black; color: white; } #logo img{ background: white; } #logo p{ font-size: 16.2; font-family: sans-serif; font-weight: bold; margin-left: 35px; letter-spacing: 0.2px; } 这是 logo.svg 该文件包含我想要包含在标题中的徽标 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg> 在大屏幕上看起来不错 但在较小的屏幕上，svg 周围有这个边距 我尝试裁剪 svg 但没有成功 我能想到的几乎所有其他解决方案都失败了 您需要做的就是更改 svg 代码上的 viewBox="0 0 241.000000 27.000000" 和 transform="translate(0.000000,27.000000)" 部分，它只是一个额外的空间，因此如上所述减小大小将解决该问题 我已经编辑了你的 svg 代码，只需将其替换为下面的代码： <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg>
在此输入图像描述 我试图将登录和注册项与导航栏的右侧对齐，但它不起作用。 有人能告诉我这是为什么吗？ &l...
我已经设法在屏幕为桌面大小时以一行方式工作。但当我缩小屏幕尺寸时，我无法使其进入多行。 我知道我可以做到...
我的代码不起作用 我的屏幕截图中有 HTML 和 CSS 代码？ [已关闭]
HTML CSS 我的两个屏幕截图中有一些 HTML 和 CSS 代码，但无法移动单词页面下的通知和通知圆圈，请看我的第三个屏幕截图。图片。有人请...
当我查看某些页面的源代码时，我看到一个标签为“此框架被识别为广告框架”。 有没有办法查询这些 iframe？我怎样才能像 DOM 树上的 iframe 一样查询？...
为什么selenium无法使用xpath或css选择器找到要单击的元素？
我尝试单击此处页面上的“>”，但 chrome XPATH 或 CSS 选择器找不到它 https://theanalyst.com/na/2023/08/opta-football-predictions/ 应该 chrome 完整的 xpath...
Seleniumbase 消息：元素 <p> 无法通过键盘访问
我正在尝试进入以下文本区域 但我得到了错误 消息：键盘无法访问元素 我都尝试过 元素 = WebDriverWait(驱动程序, 20).until(EC. 我正在尝试进入以下文本区域 但我收到错误 Message: Element <p> is not reachable by keyboard 我都尝试过 element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".ql-editor p"))).send_keys(troll_list[rand_troll]) 和 wait = WebDriverWait(driver, 30) wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@id='chat_send-form_textarea']/div[1]/div[1]/p"))).send_keys(troll_list[rand_troll]) 我也遇到同样的错误 如何使用 seleniumbase 访问此文本框？ 我正在使用 Firefox 驱动程序。 更新： 此行为仅发生在 Firefox 中。 Chromium 能够成功找到并选择文本框。 您正在尝试将文本输入到p（段落）HTML 标记中，但该标记并非为此目的而设计。 您应该找到适当的 <input type="text"> 元素或 <textarea>... 将 div 添加到 css 选择器路径。 element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.ql-editor p"))).send_keys(troll_list[rand_troll]) 使用CSS选择器时，在CSS路径前添加标签名称
如何在 JavaScript 中将通配符元素名称与“querySelector()”或“querySelectorAll()”进行匹配？
有没有办法使用querySelector或querySelectorAll进行通配符元素名称匹配？ 我试图解析的 XML 文档基本上是一个简单的属性列表 我需要找到...
在我的 HTML 结构中，我的设置如下： ... ... 在我的 HTML 结构中，我的设置如下： <body> <main> <section> ... </section> <aside> ... </aside> </main> </body> 问题是，并非所有页面都有<aside> 我需要选择 <section> 并给它一个 max-width: 500px; 仅当 <aside> 存在时。默认为 section { max-width: 1000px; }（当 <aside> 不存在时） 与一个标签的选择器直接跟随另一个标签不同；用户[提出问题]想要一直使用“B”样式。另外，在这个问题中，用户想要选择“B”（而不是“A”） 仅当 <section> 存在时，我才需要设置 <aside> 样式。 我无法更改 HTML 的顺序 >_< 只用CSS可以完成吗？ 我需要什么选择器或如何设置它？ 如果不能用 CSS 来完成（我宁愿只用 CSS），我该如何实现呢？ 一个巧妙的小技巧 您可以通过使用一种技巧来检查 是否 <section> 元素是 <main> 中唯一的元素来实现您想要的目的。 如果那里还有任何其他元素，则这将不起作用。在你的情况下，它应该像这样工作（http://jsfiddle.net/Ljm323qb/2/）： section { max-width: 500px; } /* The STAR of the show */ section:only-child { max-width: 1000px; } 如本代码笔所示：http://codepen.io/omarjuvera/pen/ByXGyK?editors=110 兄弟选择器的一般内容 有一个 + 选择器，它会选择紧随该元素之后的同级元素 (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) 还有 ~ 选择器选择所有以下同级（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors） 您可以通过将 <aside> 元素放在 <section> 元素之前并使用同级选择器来实现。 这是一个例子：http://jsfiddle.net/Ljm323qb/1/ 快速展望未来 很快这将成为可能，通过一个新的 :has 伪类 (http://dev.w3.org/csswg/selectors-4/#relational) 您可以拨打类似 main:has(> aside) > section { ... } 之类的电话，但不幸的是，我们必须等待:( 没有 JavaScript 如果您可以将 html 元素的顺序更改为： <body> <main> <aside> ... </aside> <section> ... </section> </main> </body> 您可以使用同级选择器来做到这一点： aside ~ section { max-width: 500px; } 您可以使用 jQuery 将类 .haveSidebar 切换到 body 标签，并使 section 标签的 CSS 取决于该类是否存在于 body 标签上： HTML <main> <section> </section> <aside> </aside> </main> CSS main { width:100%; } main aside { width:300px; background:red; min-height:300px; float:left; } main section { width:100%; background:green; min-height:300px; float:left; } body.haveSidebar main section { width: calc(100% - 300px); } JS var sideBar = $('body > main > aside'); if (sideBar.length > 0) { $('body').addClass('haveSidebar'); } else { $('body').removeClass('haveSidebar'); } 摆弄旁白标签 没有旁白标签的拨弄 更新 没有 calc() 的解决方案，通过使用 margin-left 属性 main aside { width:300px; background:red; min-height:300px; position:relative; } main section { width:100%; background:green; min-height:300px; float:left; } .haveSidebar main section { margin-left:301px; } 不使用 calc() 进行拨弄 尽管这不是最简洁的方法，但您可以在文档就绪的 javascript 函数上运行，以检查aside标签是否存在，并相应地将内联CSS注入到部分标签中。 如果您可以将 side 元素放在第一部分之前，则可以使用 相邻同级选择器: aside + section{ max-width: 500px } 试试这个，我相信它只能用一些javascript来完成。 if ($('main').find('aside').length>0) { $('main').find('section').addClass('specificSection'); } 使用 JavaScript 来完成此操作相当简单。 例如，这将起作用： <script> window.onload = function() { if (document.getElementsByTagName('aside')[0]) { document.getElementsByTagName('section')[0].style.max-width = '500px'; } else { document.getElementsByTagName('section')[0].style.max-width = '1000px'; } } </script> 可以使用 :has() 选择器来实现，如下： :has(main aside) { section { max-width: 500px; } }
我的输入是一个html： ... 我的输入是html： <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"><img src="https://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=96&d=identicon&r=PG" alt="Jon Skeet's user avatar" width="48" height="48" class="bar-sm"></div> </a> </div> <div class="user-details"> <a href="/users/22656/jon-skeet">Jon Skeet</a> <span class="user-location">Reading, United Kingdom</span> <div class="-flair"> <span class="reputation-score" title="reputation score 1,440,518" dir="ltr">1.4m</span><span title="873 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">873</span></span><span class="v-visible-sr">873 gold badges</span><span title="9172 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">9172</span></span><span class="v-visible-sr">9172 silver badges</span><span title="9224 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">9224</span></span><span class="v-visible-sr">9224 bronze badges</span> </div> </div> <div class="user-tags"> <a href="/questions/tagged/c%23">c#</a>, <a href="/questions/tagged/java">java</a>, <a href="/questions/tagged/.net">.net</a> </div> </div> 我对前两个 span 元素感兴趣，它们是 div 与 class="user-details" 的直接后代。 为此，我使用的是 css 选择器，但这个选择器返回 9 个结果，而不是仅两个：https://try.jsoup.org/~orgt_meWno3AxzO0GzxMBldEhIk 我尝试了 python 中的实现，但同样的问题： from bs4 import BeautifulSoup soup = BeautifulSoup(html, 'html.parser') soup.select('div.user-details span:nth-child(-n+2)') # [<span class="user-location">Reading, United Kingdom</span>, # <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>, # <span aria-hidden="true" title="873 gold badges"><span class="badge1"></span><span class="badgecount">873</span></span>, # <span class="badge1"></span>, # <span class="badgecount">873</span>, # <span class="badge2"></span>, # <span class="badgecount">9172</span>, # <span class="badge3"></span>, # <span class="badgecount">9224</span>] 我的预期输出是这样的： # [<span class="user-location">Reading, United Kingdom</span>, # <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>] 你们能告诉我我的 css 选择器有什么问题以及如何修复它吗？ 我的问题更多是关于 css 选择器，而不是寻找替代解决方案。 让我们看看您的 HTML。我已经重新格式化了它，以便我们可以看到相关部分的结构： <div class="user-details"> <a href="/users/22656/jon-skeet">Jon Skeet</a> <span class="user-location">Reading, United Kingdom</span> <div class="-flair"> <span class="reputation-score" title="reputation score 1,440,518" dir="ltr">1.4m</span> <span title="873 gold badges" aria-hidden="true"> <span class="badge1"></span> <span class="badgecount">873</span> </span> <span class="v-visible-sr">873 gold badges</span> <span title="9172 silver badges" aria-hidden="true"> <span class="badge2"></span> <span class="badgecount">9172</span> </span> <span class="v-visible-sr">9172 silver badges</span> <span title="9224 bronze badges" aria-hidden="true"> <span class="badge3"></span> <span class="badgecount">9224</span> </span> <span class="v-visible-sr">9224 bronze badges</span> </div> </div> 您说您想要定位 div.user-details 的前两个跨度后代，即 span.user-location 和 span.reputation-score。 （你还没有说为什么你想这样做，这将是有用的背景信息。） 您尝试使用的选择器是 div.user-details span:nth-child(-n+2)。选择器的第一部分没问题： div.user-details span 返回 div.user-details 的所有跨度后代（编号 13）。通过添加 :nth-child(-n+2)，您可以过滤结果以仅包含其父级的第一个或第二个子级（数字 9）的范围。您实际上想要做的是过滤结果以仅包含那些属于 div.user-details 的第一个或第二个后代的跨度，但是没有 :nth-descendant 选择器允许您这样做。 您只需要发明一种不同的方法来定位您想要的元素。你不能只使用他们的类名吗？ .user-location, .reputation-score
我尝试使用它从列表中选择第二个 a 标签： .container li a:first-child + a { ... } 但它似乎不起作用。是否还有另一种理想的纯 CSS 方式（除了 a:nth-child...
在 Angular 应用程序中，我想编辑应用于组件“p-table-row”的伪类“:host”的属性“border-top”，该组件是来自 po...
我想定位以下子元素： .行 .列:最后一个子级 .列:第n个子级(2), .行 .列:最后一个子级 .列:第n个子级(3), .行.列：最后一个子级.列：第n个子级（5）， ...
用于 SELECT html 元素且未选择任何内容的 CSS 选择器
我知道我在那里经常使用“选择”这个词......抱歉。 不管怎样，我正在寻找一个 CSS 选择器，我可以用它来识别页面上尚未进行选择的 HTML Select 元素，以便......
我是 jquery 的新手。我一直在尝试找出如何定位链接的第二个字符并将其颜色更改为红色。 $(document).ready(function () { $(".header-title-text").find...