从嵌套列表中的父项继承的CSS样式

-1

我正在处理在html/css中完成的resume-layout。我想，我遇到的问题是继承问题。我在网上做了一些研究，这似乎是一个相当常见的问题，通常与IE相关（插入关于IE的咒语）。从嵌套列表中的父项继承的CSS样式

这是我试图：

编辑我想有父列表项强调，没有子弹点（盘）。我希望孩子（嵌套列表）有一个项目符号（光盘），没有下划线。

所以我去JSfiddle and cut out the sections of the code（CSS正常化检查）来尝试和理清发生了什么事情以及我可能做错了什么。

HTML：

<h3>Qualifications Summary</h3> 
      <ul id="qualifications"> 
       <li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li> 
      </ul> 


    <h3>Related Experience</h3> 
      <ul class="experience"> 
       <li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios 
       <ul> 
        <li>Educator, Illustrator, Graphic & Web Designer</li> 
       </ul> 
       </li> 
       <li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic/Web Design</span> ~ National A1 Inc, Philadelphia, PA 
         <ul> 
          <li>Junior Designer</li> 
         </ul> 
        </li> 
       </ul>

这是CSS：

ul { 
    padding-bottom: 15px; 
    margin:0px; 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
/*Nested List Issues*/ 

ul.experience li { 
    text-decoration:underline; 
    list-style: none; 
} 
ul.experience ul li{ 
    text-decoration:none; 
    list-style: disc; 
}

即使代码切片出来，只有直接关系到其使用的CSS，我仍然得到错误。

问题我一直在问自己：

1）它是什么东西在Normalize code？ 不是我能看到的。

2）它是浏览器/版本吗？ 我主要使用Chrome 36.x。我在IE和Firefox中检查过它。发生同样的问题。

3）有没有另外一种方法呢？ 也许很可能我的语法或用法是错误的。我尝试了其他方式，包括>选择器，但我得到的最多的是嵌套li上的光盘。

我做了其他尝试，但因为我是新的....我不能发布他们呢。 :)

我似乎无法得到它的工作。我做错了什么？

编辑

当前建议提供给周围放置的父元素的内容和风格，跨度标签。到目前为止，似乎工作。它为标记添加更多代码，而不是集中在CSS肌肉上。不雅但功能。

来源

2014-08-30 HB77

你遇到了什么具体问题？ *发生了什么（不应该），什么不发生（应该））？ – 2014-08-30 23:50:27

我试图添加一个图像，但因为我是新的，它不会让我。我会尽量保持简洁，我会尽量保持简洁。当我风格的父元素，子（嵌套列表）继承相同的风格。我明白这一点。当我尝试设计嵌套列表的样式时，我尝试过的各种方法（迄今为止）仍然过度缠身。我能够得到嵌套的列表式圆圈出现，但下划线仍然存在 - 尽管代码要求光盘（实心圆圈）并且没有下划线。 – HB77 2014-08-31 00:58:15

你不完全说明问题的是什么，但我会认为这是两件事情：

1）下划线text-decoration属性表示与子列表项目了。

<ul class="experience"> 
    <li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios 
    <ul> 
    <li>Educator, Illustrator, Graphic & Web Designer</li> 
    </ul> 
</li> 
...

注意，对于<ul class="experience">第一级列表项未关闭，直到后的子列表关闭：除非你看到的标记，这是一个有点混乱。这意味着即使您将子列表覆盖到子列表项目上（因为该属性实际上是父列表项目），子列表也会获得下划线外观。

要解决这个问题，包你想在另一个要素强调了一部分，就像一个跨度和应用下划线风格跨度：

<ul class="experience"> 
    <li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span> 
    <ul> 
    <li>Educator, Illustrator, Graphic & Web Designer</li> 
    </ul> 
</li> 
...

CSS：

ul.experience > li span { 
    text-decoration:underline; 
}

2）我假设的其他问题是光盘没有显示出来。这是因为normalize.css会从所有列表中删除margin和padding。添加在后面：

ul.experience ul { 
    list-style: disc; 
    padding-left: 2em; 
}

fiddle

来源

2014-08-31 00:04:53 steveax

这比我的尝试更清洁一点。谢谢。 :) – HB77 2014-08-31 01:05:49

-2

尝试使用CSS important。如何使用它的一个例子如下：

text-align: center !important;

正如你所看到的，它刚好在分号前。希望这可以帮助！

来源

2014-08-30 23:45:06 Zak

标准化设置会导致要删除的列表项上的边距和填充。尝试将列表项设置为例如具有2em的margin-left。此外，代替li上的text-decoration，请将文本放在一个范围内，然后在其上设置text-decoration。

来源

2014-08-30 23:57:42

是的，我知道标准化导致列表项目的边距和填充设置为零，并且光盘/点/等也被删除。 – HB77 2014-08-31 00:46:56

*编辑：呃击回车太快。* 我以前从未遇到过问题，只是在创建菜单的实例中添加了列表样式。所以我会尝试一下，看看会发生什么。 – HB77 2014-08-31 00:53:47

http://jsfiddle.net/HB77/0ytkf53f/34/ 这有效，但它不雅，并增加了更多的代码给主标记。但是......它是什么，它是如何工作的。我必须记下这一点以供将来参考。 – HB77 2014-08-31 01:03:26

如果您取消选中“标准化CSS”的小提琴选项（小提琴的左窗格）你的代码应该以某种方式工作...（它的工作对我来说）。

来源

2014-08-31 00:09:30

使用steveax和Steven Don的建议我仍然遇到了麻烦。我意识到问题的一部分是Bootstrap 3.0。在Jssfiddle中挑出代码和CSS之后，尽管它大部分在那里工作，但它仍然不适用于我的工作草案。

经过一段时间调整html和css后，我终于明白它的行为有点问题。然而，它在JSFiddle中的工作地点，它不工作在我的工作代码。

因此，因为我使用引导程序，所以我仔细检查了文档，但仍然无法找到问题。所以我使用了Chrome的检测元素。出于某种原因，列表式不会覆盖Bootstrap中更具体的列表式样式。

所以我切换了CSS，所以我没有关闭，然后再次执行列表样式Bootstrap。我刚刚关掉了主要条目标题的光盘，并且使用了下划线标记，然后使用span标记（第一个li）对其加下划线，同时避免强调子元素。

我甚至删除了职位名称的范围，并使用强标签代替。

HTML

<ul class="experience"> 
       <li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator &amp; Web Designer</b> ~ Drakenhart Studios </span> 
       <ul> 

        <li>Educator, Illustrator, Graphic & Web Designer</li> 

       </ul> 

       </li> 
</ul>

CSS

ul.experience > li { padding-left:2em; } 
ul.experience ul { list-style:disc; padding-left:2em; } 
ul.experience > li span { text-decoration:underline; }

更少的代码，然后我在我的CSS使用前。它现在正常工作。

来源

2014-08-31 22:13:24 HB77

从嵌套列表中的父项继承的CSS样式

回答

相关问题