Question

HTML ...

<div id="main">
<div class="news"></div>
</div>

如何为#main id分配具有{c}的.news类的css？

有类似#main:only(.news){...}的内容吗？

Answer 1

你可以继续使用#main id，然后将一个类应用于同一个元素，它有自己的样式，可以覆盖默认的#main样式，比如

<div id="main" class="news">

</div>

然后你可以像这样写一个css规则

#main.news {
 /* your css rules go here */
}

Answer 2

我经常使用一个body类来让我将一个公共id从一个页面区分到另一个页面

<body class="news-page">
  <div id="main">
    <div class="news">

那么你的CSS可以这样做

.news-page #main {
  background: blue;
{

.another-page #main {
  background: green;
}


.news {
  background: red;
}

Answer 3

这样的事情怎么样？您可以定位id =＆＃34; main＆＃34; #main和class =＆＃34; news＆＃34;与.news。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>    
        <style type="text/css"
            #main { color: red; }
            .news { color: blue; }
        </style>
    </head>
    <body>
        <div id="main">
            This is #main
            <div class="news">
                This is .news
            </div>
        </div>
    </body>
</html>

Answer 4

尝试类似

的父子关系

#main > div { 
   color:pink;
}

为特定类选择父div

4 个答案: