堆栈内存溢出
  简体   繁体   English

如何使用CSS：first-child伪元素

[英]How to use CSS :first-child pseudo-element

 原文  2016-04-30 19:56:11  9   2    html/ css

问题描述

This is the css I am using to style my menu 这是我用来设置菜单样式的CSS 

.vd-menu-item { padding: 0; margin: 0; height: 100%; }
.vd-menu-item:before {content: " | ";}
.vd-menu-litem:first-child:before {content: " ";}

HTML HTML 

<div class="vd-menu vd-menu-horizontal">
    <ul>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">News</a></li>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">Sports</a></li>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">Finance</a></li>
    </ul>
</div>

I want to separate the menu list with "|" 我想用“ |”分隔菜单列表 in between them like 在他们之间像 

News | Sports | Finance

So thought of using :before the li. 因此想到了在li之前使用：before。 It works good but the first child, in this case "News" has "|" 效果很好，但是第一个孩子，在这种情况下，“新闻”具有“ |” before it. 在它之前。 

| News | Sports | Finance

I tried using first-child but it does not work as expected. 我尝试使用第一个孩子，但无法正常工作。 All the separator "|" 所有分隔符“ |” disappears. 消失。

Can you help? 你能帮我吗？

2 个解决方案

解决方案1
 2  2016-04-30 20:01:21

You could use the :not Selector to make it easier. 您可以使用：not Selector使其更容易。 

.vd-menu-item { padding: 0; margin: 0; height: 100%; }
.vd-menu-item:not(:first-child):not(:last-child)::before {content: " | ";}

I hope i helped you out :) 我希望我能帮到你:)

解决方案2
 0  2016-04-30 20:03:25

看来您的代码中有错别字： .vd-menu-litem:

<div id="text_translate"><p>我在 MDN 页面上通过了使用选择器的测试技能，我遇到了 CSS 规则编写的情况：带有 class.container 的 div 元素的第一个子元素应用于层次结构中的表元素，但不是其第一个子元素div 元素。 为什么会这样？ 我是否缺少表格元素的一些一般规则？ 正如我所料，只有第一个 p 元素应该受此规则影响。</p><p> 我附上了 MDN 上使用的 html 代码和导致此问题的 CSS 解决方案。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .container:first-child {font-size: 150%}.container:first-child::first-line {color: red}</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;p&gt;Veggies es &lt;a href="http://example.com"&gt;bonus vobis&lt;/a&gt;, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.&lt;/p&gt; &lt;p&gt;Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/p&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Fruits&lt;/th&gt; &lt;th&gt;Vegetables&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Apple&lt;/td&gt; &lt;td&gt;Potato&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Orange&lt;/td&gt; &lt;td&gt;Carrot&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Tomato&lt;/td&gt; &lt;td&gt;Parsnip&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Kiwi&lt;/td&gt; &lt;td&gt;Onion&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Banana&lt;/td&gt; &lt;td&gt;Beet&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</pre></div></div><p></p></div>受：first-child 伪类影响，尽管它不是规则设置的元素的第一个孩子<table> </table> - <table> is affected by :first-child pseudo-class although it is not first-child of element the rule is set up for

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS：第一个孩子的伪元素 - CSS :first-child pseudo-element ：first-child和：first-letter令人费解的伪元素语法 - Baffling pseudo-element syntax with :first-child and :first-letter 使用CSS在：first-child伪选择器“内部”选择一个元素 - select an element “inside” the :first-child pseudo selector using CSS 在一节内的几篇文章中使用伪元素第一个孩子 - Use pseudo element first-child in several articles inside a section 如何在CSS中使用CSS：first-letter伪元素 <div> 段 - How to use a CSS :first-letter pseudo-element in a <div> paragraph CSS3的第一个和最后一个伪属性 - First-child and last-child pseudo property with CSS3 如何使用第一个孩子？ - How to use first-child? ：first-child伪不适用 - :first-child pseudo is not applying <div id="text_translate"><p>我在 MDN 页面上通过了使用选择器的测试技能，我遇到了 CSS 规则编写的情况：带有 class.container 的 div 元素的第一个子元素应用于层次结构中的表元素，但不是其第一个子元素div 元素。 为什么会这样？ 我是否缺少表格元素的一些一般规则？ 正如我所料，只有第一个 p 元素应该受此规则影响。</p><p> 我附上了 MDN 上使用的 html 代码和导致此问题的 CSS 解决方案。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .container:first-child {font-size: 150%}.container:first-child::first-line {color: red}</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;p&gt;Veggies es &lt;a href="http://example.com"&gt;bonus vobis&lt;/a&gt;, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.&lt;/p&gt; &lt;p&gt;Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/p&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Fruits&lt;/th&gt; &lt;th&gt;Vegetables&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Apple&lt;/td&gt; &lt;td&gt;Potato&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Orange&lt;/td&gt; &lt;td&gt;Carrot&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Tomato&lt;/td&gt; &lt;td&gt;Parsnip&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Kiwi&lt;/td&gt; &lt;td&gt;Onion&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Banana&lt;/td&gt; &lt;td&gt;Beet&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</pre></div></div><p></p></div>受：first-child 伪类影响，尽管它不是规则设置的元素的第一个孩子<table> </table> - <table> is affected by :first-child pseudo-class although it is not first-child of element the rule is set up for CSS 2.1中的第一个孩子伪类 - First-child pseudo-class in css 2.1
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM