将 css 分配给特定元素

发布于 2024-08-10 22:19:00 字数 699 浏览 2 评论 0 原文

我在页面上有一个

  • 元素,我希望它以某种方式显示。更改 css 会影响所有
  • 元素。
  • 这是我要更改的元素

  • 外部工作
  • 这是我的 css

    ul li {
        /*font: normal 17px Helvetica;*/
        color: #a9a9a9;
        border-top: 1px solid #333;
        border-bottom: #555858;
        list-style-type: none;
        padding: 10px 10px 10px 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
        overflow: hidden;}
    

    注释掉的字体部分和颜色是我想要影响这个

  • 而不是任何其他的。
  • 我该怎么做?谢谢你!

    I have an <li> element on the page that I want to look a certain way. Changing the css affects all the <li> elements.

    here is the element I want to change
    <li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>

    here is my css for the <ul><li>

    ul li {
        /*font: normal 17px Helvetica;*/
        color: #a9a9a9;
        border-top: 1px solid #333;
        border-bottom: #555858;
        list-style-type: none;
        padding: 10px 10px 10px 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
        overflow: hidden;}
    

    The commented out font portion and the color is what I want to affect this <li> and not any others.

    How would I do this? Thank you!

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(5

    野味少女 2024-08-17 22:19:00

    如果你可以在 LI 上设置一个 id 或一个类,那么这将是微不足道的。

    ul li {
        color: #a9a9a9;
        border-top: 1px solid #333;
        border-bottom: #555858;
        list-style-type: none;
        padding: 10px 10px 10px 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
        overflow: hidden;
    }
    
    ul li.special {
        font: normal 17px Helvetica;
    }
    
    <li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>
    

    除此之外,没有简单的方法可以单独使用 css 来实现这个跨浏览器。

    If you can set a id or a class on the LI, then it would be trivial..

    ul li {
        color: #a9a9a9;
        border-top: 1px solid #333;
        border-bottom: #555858;
        list-style-type: none;
        padding: 10px 10px 10px 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
        overflow: hidden;
    }
    
    ul li.special {
        font: normal 17px Helvetica;
    }
    
    <li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>
    

    Aside from that, there is no simple way to do this cross-browser with css alone.

    分分钟 2024-08-17 22:19:00

    基本上,您只需要给它一个额外的标识/属性,这样您就可以使用 CSS 选择器来设置 li 标记的样式。例子:

    /*using class*/
    ul li.different {font: normal 17px Helvetica;}
    
    /*using attribute, title in this case*/
    ul li[title=diff] {font: normal 17px Helvetica;}
    
    /*using id if it's one and only*/
    #id {font: normal 17px Helvetica;}
    

    Basically, you just need to give it an extra identity/attribute so you can have a CSS selector to style that li tag. Example:

    /*using class*/
    ul li.different {font: normal 17px Helvetica;}
    
    /*using attribute, title in this case*/
    ul li[title=diff] {font: normal 17px Helvetica;}
    
    /*using id if it's one and only*/
    #id {font: normal 17px Helvetica;}
    
    太傻旳人生 2024-08-17 22:19:00

    或者在 LI 本身上使用内联样式 STYLE=: <

    li style="font: Helvetica; color: #a9a9a9;">...

    Or use an inline style, STYLE= on the LI itself:

    <li style="font: Helvetica; color: #a9a9a9;">...</li>

    百思不得你姐 2024-08-17 22:19:00

    附带说明一下,除了 Helvetica 之外,您可能还应该考虑向该规则添加额外的后备无衬线字体。我是这种字体的忠实粉丝,但大多数人的计算机上都没有这种字体。

    编辑:当我写这篇文章时,有人发布了我同样的答案。不过我会保留旁注,因为它很有用。

    On a side note you should probably think about adding additional fallback sans-serif fonts to that rule aside from Helvetica. I'm a big fan of that typeface, but most people don't have it on their computers.

    EDIT: Someone posted my same answer while I was writing this one. I'll keep the sidenote though because its useful.

    淡淡離愁欲言轉身 2024-08-17 22:19:00

    如前所述,类或 id 都可以做到这一点 - 取决于您是否要为此列表项唯一使用此特定样式,或计划在其他地方使用它(尽管您只能在页面上使用一次 id,您可以在另一个页面上重复使用 ID)。

    您可以在一个列表中混合和匹配类和 id,这样即使您希望列表中的每个列表项具有不同的样式,您也可以使用不同的类和 id 来实现。

    例如,您可以让样式默认设置列表的样式,以便没有类或 id 的项目继承默认样式,然后可以控制单个项目的任意数量的类和 id...

    <code><pre>
        <ul>
          <li>blah blah blah</li>
          <li class="special">blah blah blah</li>
          <li class="special">blah blah blah</li>
          <li id "extraspecial">blah blah blah</li>
          <li>blah blah blah</li>
        </ul>
    </pre></code>
    

    As previously said, either a class or id will do it - depending whether you're going to be using this particular style uniquelly for this list item, or plan to use it elsewhere (though you can only use an id once on a page, you can reuse an id on another page).

    You can mix and match classes and ids within one list, so that even if you want different styles for each list item in your list you can do it using different classes and ids.

    For example, you can have your style that styles your list by default, so that items with no class or id inherit the default style, and then any number of classes and ids that can control the individual items...

    <code><pre>
        <ul>
          <li>blah blah blah</li>
          <li class="special">blah blah blah</li>
          <li class="special">blah blah blah</li>
          <li id "extraspecial">blah blah blah</li>
          <li>blah blah blah</li>
        </ul>
    </pre></code>
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文