Question

所以我有以下html和css。

<div class="parent">
  <div class="a"> A </div>
  <div class="b"> B </div>
  <div class="c"> C </div>
  <div class="d"> D </div>
  <div class="e"> E </div>
  <div class="F"> F </div>
</div>

<style>
   .parent .a{display:none;}
   .parent .b{display:none;}
   .parent .c{display:none;}
   .parent .d{display:none;}
   .parent .e{display:none;}
</style>

在这种情况下，如何简化css以便我不必重复相同的代码5次？

编辑：我应该更清楚。并非所有元素都被隐藏。只有选择的类隐藏在“父”中（class =“f”未隐藏）

由于

Answer 1

您有几种选择。

选项1：

就像@Akshay评论的那样，你可以这样做：

.parent div {
    display: none;
}

其中的每个div都会获得display: none;

选项2：

你也可以这样做：

.parent >div {
   display: none;
}

它只会定位到第一级divs。

选项3：

您还可以添加特定类来隐藏元素。

例如：hidden

.parent .hidden {
   display: none;
}

和HTML：

<div class="parent">
  <div class="a hidden"> A </div>
  <div class="b hidden"> B </div>
  <div class="c hidden"> C </div>
  <div class="d hidden"> D </div>
  <div class="e hidden"> E </div>
  <div class="F"> F </div>
</div>

这样F仍然会显示，而其他所有其他都被隐藏。

选项4：

如果您希望隐藏父级的所有内容，您还可以parent display: none提供.parent { display: none; } ..就像这样：

<?php ini_set( "display_errors", true ); 
date_default_timezone_set("europe/lisbon" );  
define( "DB_DSN", "mysql:host=localhost;dbname=cms" ); 
define( "DB_USERNAME", "username" );
define( "DB_PASSWORD", "password" );
define( "CLASS_PATH", "classes" ); 
define( "TEMPLATE_PATH", "templates" ); 
define( "HOMEPAGE_NUM_ARTICLES", 5 ); 
define( "ADMIN_USERNAME", "admin" ); 
define( "ADMIN_PASSWORD", "mypass" );
require( CLASS_PATH . "/Article.php" );   

function handleException( $exception ) {   
echo "Sorry, a problem occurred. Please try later."; 
error_log( $exception->getMessage() ); }   

set_exception_handler( 'handleException' ); ?>

这样就隐藏了父母和所有孩子。

还有很多选择..但这只是一些例子。

Answer 2

尝试这样的事情：

.parent {
    display: none;
}

OR

.parent .A .B .C .D .E{
        display: none;
    }

参考：http://www.w3schools.com/tags/tag_div.asp

Answer 3

如果你想要显示所有子元素：none，你可以设置父

.parent {display:none}

如果你想设置特殊元素，特殊属性

.parent * {code..}
.parent div {code...}

这取决于您的情况

Answer 4

您可以将style属性赋予父div以简化css

.parent {display：none}

或者如果您只想应用于.parent类中的div

.parent div {display：none;}

Answer 5

如果可见/隐藏的DIV取决于他们的位置，您可以使用:nth-child()：

.parent > div{
    display:none;
}
.parent > div:nth-child(6) {
    display:block;
}

Exemple

Even元素

.parent > div{
    display:none;
}
.parent > div:nth-child(even) {
    display:block;
}

Exemple

每3个元素从第2个开始：

.parent > div{
    display:none;
}
.parent > div:nth-child(3n+2) {
    display:block;
}

Exemple

Documentation

Answer 6

我可以为您提供这种方法：

隐藏所有孩子，而不是定位您想要看到的孩子：

.parent > div {
	display: none;
}
.parent > div.f {
	display: block;
}

<div class="parent">
    <div class="a">hide A</div>
    <div class="b">hide B</div>
    <div class="c">hide C</div>
    <div class="d">hide D</div>
    <div class="e">hide E</div>
    <div class="f">I'm visible</div>
</div>

如果您只有几个可见项目，这将是一件好事。

课堂上有多个div

6 个答案:

选项1：

选项2：

选项3：

选项4：