css-selectors 相关问题

CSS： #容器>一个{ 颜色：黄色！重要； } a:焦点可见 { 颜色：红色！重要； } HTML：锚1 ... CSS： #container > a { color: yellow!important; } a:focus-visible { color: red!important; } HTML： <div id="container"> <a href="#">Anchor 1</a> <a href="#">Anchor 2</a> </div> 我们都知道，当我们关注锚点时，文本颜色仍然是黄色，因为第一个选择器更具体。这很奇怪，我认为这是一个错误，因为 :focus-visible （以及其他伪选择器，如 :hover）是一种不同的状态，就像单击事件一样。对我来说，这就像当我单击一个元素时调用 onchange 处理程序。无论如何，这是完全不同的话题来讨论。我的问题是，如何使“a:focus-visible”选择器具有高优先级？ #container > a:focus-visible 可能是正确的答案。但是，考虑一下我的页面中有很多案例，我的用户仍然可以像第一个一样添加选择器。我需要在所有锚点上推行我自己的规则。您可以通过将选择器修改为比 #container > a 更具体来增加 :focus-visible 规则的特异性。由于 #container > a 具有更高的特异性，因此向 a:focus-visible 添加 ID 或另一个选择器可以确保其优先： CSS： #container > a:focus-visible { color: red !important; } 这确保了当锚点处于 :focus-visible 状态时，红色将覆盖 #container > a 中的黄色。

css css-selectors pseudo-class

回答 1 投票 0

如果所有子级都隐藏，则隐藏父级

我有一个包含组的列表，并使用 CSSOM 使用文本字段动态过滤内容。这是一种仅使用 CSS 来实现“搜索”的方法。不幸的是当过滤器过滤时

html css css-selectors

回答 2 投票 0

更改 Angular 中切换按钮的颜色

我无法更改 Angular 中切换按钮的颜色。这是我的代码：切换 ::ng-deep .custom-toggl...

sass angular-material css-selectors

回答 1 投票 0

如何选择页面中的最后一个元素？

有没有办法用CSS选择特定元素的最后一次出现？这是一个例子：DEMO 我尝试了最后一个孩子，但这不是我想要的。我用过这个类： HTML： ... 有没有办法用CSS选择特定元素的最后出现？这是一个例子：DEMO 我尝试过last-child但这不是我想要的。我用过这个课程： HTML： <ul> <li><span>test</span></li> <li> <span>test</span> <span>test</span> </li> </ul> <div> <span>test</span> <span>test</span> </div> <p> <span>test</span> <span>red</span> </p> CSS： span:last-child{ color:red; font-weight:bold; } 我希望最后一个带有“红色”内容的span是红色的。我怎样才能用CSS做到这一点？更新：对于具有相同父元素的元素，有一个使用 last-of-type 的解决方案。但不同的父母呢？试试这个：（你应该知道父包装元素） body > *:last-child > span:last-child{ color: red; } 工作小提琴这是从我的博客中获取的解决方案：https://css-tip.com/last-element-dom/ span { &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) { color: red; font-weight: bold; } } <ul> <li><span>test</span></li> <li> <span>test</span> <span>test</span> </li> </ul> <div> <span>test</span> <span>test</span> </div> <p> <span>test</span> <span>red</span> </p> 一个更复杂的例子： span { &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) { color: red; font-weight: bold; } } <div>Some content</div> <div> <span>Some content</span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> <span>Some content</span> <span>Some content</span> </div> <div> <span>Some content</span> <span>Some content</span> </div> <span> <span>Some content</span> <span>Some content</span> </span> <div> <span> <span>Some content</span> <span>Some content</span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content <span>Some content</span> <span>Some content</span> </span> <span> <span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> </span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> </span>

css css-selectors

回答 2 投票 0

在 React 中不使用 CSS 模块可以实现作用域样式吗？

我的项目使用了CSS模块，但是输出的类名会添加hash后缀。这是不需要的，因为我想保持类名的语义。在 Vue.js 中，作用域样式可以通过

reactjs css-selectors

回答 1 投票 0

选择第一个出现的标签，但使用 CSS 忽略层次结构

我偶然发现了这个关于 CSS 选择器的问题。即选择第一次出现的但忽略其层次结构。我知道我可以使用 JavaScript 来 document.querySelectorAll('s...

css css-selectors

回答 1 投票 0

如何在CSS中的另一个规则中使用规则？

我觉得我的要求有点奇怪，但我也没有别的办法。有没有办法在现实生活中执行这个伪 css 规则：假设我有规则： .myCssRule1{ 颜色：红色； } 我不能（不要...

css css-selectors

回答 4 投票 0

如何让 CSS 影响所有其他不可见的元素

我正在尝试使用 CSS 来替换我的 div 中的背景颜色。我可以做到这一点，但是哪些 div 显示会发生变化。我希望能够仅替换当前可见的内容。不然就p...

css css-selectors pseudo-class

回答 1 投票 0

使用CSS ::之前和定位在文本后对齐星号

我有一个文本元素。我无法修改该文本。因此，我将尝试通过 CSS:: 修改该文本，然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后...

html css css-selectors position pseudo-element

回答 1 投票 0

CSS 问题：first-of-type :first-letter

我已将页面设置为在内容的第一段上创建一个大的首字下沉字母。这按预期工作，但是当我在受影响的元素之前有另一个具有指定类的 div 时，它会使...

css css-selectors

回答 3 投票 0

如何在CSS中设置父级和子级之间的边框？

为了设置元素之间的边框线，我在每个子元素的一侧使用边框，除了最后一个。例如第一第二... 为了在元素之间设置边界线，我在每个子元素的一侧使用边框，除了最后一个。对于示例 <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div> 使用CSS .parent div{ display:block; padding:5px; border-bottom:dashed 1px #000} .parent div:last-child{ border-bottom:dashed 0 #000 } 有没有办法根据父级的 CSS 样式设置子级之间的边框？不使用 last-child。换句话说，在父规则的一个声明中。不可以，边框是子元素的属性，因此只能在子元素上指定。您可以为此使用单个规则，但它需要高级 CSS3 选择器支持： .parent > div:not(:last-child){ border-bottom: dashed 1px #000; } 我只知道一个解决方法：使用 jQuery 并迭代这些子元素（每个：http://api.jquery.com/each/）并设置你的 css 类 if next(next: http://api. jquery.com/?s=next) 元素也是子元素... 我认为另一种方式，仅使用css不存在，但我不确定，如果您找到仅使用css的解决方案，请发布;) 问候您可以玩box-shadow属性： .parent > div + div { box-shadow: inset 0px 1px 0px 0px black; } <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div> 了解类似表格的视图也很有帮助： .parent div { box-shadow: 1px 1px 0px 0px black, inset 1px 1px 0px 0px black; } <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div>

css css-selectors

回答 3 投票 0

没有特定类名的内容的 jQuery 选择器

这是我的 html 标记：这是我的 html 标记： <ul class="list-unstyled mb-2"> <li class="mr-2 d-inline-block"> <p class="m-0"><i class="fas fa-birthday-cake mr-2" aria-hidden="true"></i>Age 26-34</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-map-marker-alt mr-2"></i>City</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-calendar-alt mr-2"></i>29.10.2024 - 29.10.2024</p> </li> <li class="mr-2"> <p class="m-0"><i class="fas fa-money-bill-alt mr-2"></i>50 USD</p> </li> </ul> 问题是我不知道如何获取内容“29.10.2024 - 29.10.2024”，该内容之前有 <p> 和孩子 <i> 以及类名 "fa-map-marker-alt"。怎样做才能得到它？你可以这样做： $('ul.list-unstyled > li:nth-child(3) > p') .contents() .filter(function() { return this.nodeType === Node.TEXT_NODE; }) .text() .trim(); 它仅获取文本，因此它将忽略任何其他元素，请阅读有关contents此处的更多信息。

html css-selectors jquery-selectors

回答 1 投票 0

css-selectors 相关问题

最新问题