为什么我的某些CSS规则不起作用？
我有一个嵌套的flexbox布局（使用bootstrapv4），可根据横向/纵向模式更改方向。第一层div（由flexbox使用该order属性放置）#no包含5个用作按钮的图标。order我无法在这些图标上正常使用该属性。
如果我不使用order属性，则图标将按照自然顺序进行布局；但是，如果我尝试使用该order属性对其进行布局，则无法正常工作。在代码中，info- div（order:3）应该是最后一个元素。不是。我可以通过更改源中的顺序来获得所需的顺序。但是，我想澄清一下我的误解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait of New York</title>
<style>
html, body {
width:100%;
height:100%;
}
#container {
height: 100%; width:100%;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: center; -webkit-justify-content: center;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
}
#no {
padding: 1rem;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: space-between; -webkit-justify-content: space-between;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
flex: 1 1 auto; -webkit-flex: 1 1 auto;
}
.icon {
margin: auto;
flex-grow:1;
flex-basis: auto;
}
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
// stuff living in #no
#info-div1 {
order: 3; -webkit-order: 3;
}
#minus {
order: 0; -webkit-order: 0;
}
#hb2 {
order: -1; -webkit-order: -1;
}
#plus {
order: 1; -webkit-order: 1;
}
#comment-button-div {
order: 2; -webkit-order: 2;
}
@media screen and (orientation: landscape ){
#container {
flex-direction: row; -webkit-flex-direction: row;
}
#no {
flex-direction: column; -webkit-flex-direction: column;
height: 100%;
max-width: 10rem;
order: 0; -webkit-order: 0;
}
}
@media screen and (orientation: portrait ){
#container {
flex-direction: column; -webkit-flex-direction: column;
}
#no {
flex-direction: row; -webkit-flex-direction: row;
max-height:10rem;
width:100%;
order: 2; -webkit-order: 2;
}
}
</style>
<script src="https://www.google.com/recaptcha/api.js"
async defer>
</script>
</head>
<body>
<div id="container">
<div id='no'>
<div id='minus' class="icon" title="Not special.">
<a href="#" id="nHeart" >
<img class="img icon" src="http://gps-photo.org/images/Not.svg"/>
</a>
</div>
<div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
<div class="dropdown">
<img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
<div class="dropdown-menu">
<a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a>
<a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a>
<a class="dropdown-item cmore" data-toggle="modal" href="#myModal">
</a>
<a class="dropdown-item cpony" data-toggle="modal" href="#myModal">
</a>
<a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
</div>
</div>
</div><!-- end hb2 -->
<div id='plus' class="icon" title="Loving it!">
<a href="#" id="heart1" >
<img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/>
</a>
</div>
<div id='comment-button-div' class="icon" title="Click for comments">
<a class="comment-page" data-toggle="modal" >
<img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/>
</a>
</div>
<div id='info-div1' class="icon" title="Information" >
<a class="info-page" data-toggle="modal" >
<img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/>
</a>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
问题答案：
CSS评论：/* ... */请勿使用//...或<!-- ... -->
您遇到的问题与您的Flex代码无关。
问题是您使用 行注释语法 注释掉了文本，并且这不是有效的CSS。
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
因此，您实际上要做的是发布无效的代码，而不是注释掉该行，而是调用CSS错误处理，这会杀死下一条规则。换句话说，您之后的所有规则都会// text text text被忽略，就像您已执行以下操作一样：xheight: 50px。
这就是为什么order不适用于您的图标的原因：
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
坚持使用标准CSS注释方法。用发表评论/*。用结束评论*/。
/* stuff to be commented out */
一旦在代码中进行了调整，该order属性就可以正常工作（并且，如您所料，由于先前被忽略的代码，还会发生其他更改）。
最后，在单独的注释上：
您要在标准无前缀版本 之后 放置供应商前缀代码。
#container {
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
align-content: space-between;
-webkit-align-content: space-between;
}
您应该考虑扭转这种情况。无前缀（W3C）版本应该排在最后，因此它始终是级联中的首选版本。
-
还不起作用。所以我放弃链接，我只是编码：
-
在这里我想通过BOOTSTRAP和css制作一个网站模板，但是在我的代码中，一些BOOTSTRAP类不起作用，比如lead、font-weight、color、bg-color等，如果我在一个部分中使用一些BOOTSTRAP文本颜色，而不是在css中在同一部分中使用其他颜色，我就不起作用了。我想在每个文本上使用相同的font-family。但是如果我使用font-family，than lead类
-
问题内容： 我的网站有一些链接样式，CSS如下： 这里是一个的jsfiddle展示他们是如何 应该 在各自不同的状态看： ：link =蓝色文字没有装饰 ：visited =灰色文字加下划线 ：hover =浅蓝色背景的白色文本 在和工作正常，但由于某些原因，国拒绝显示下划线。在使用Firebug或检查器的Chrome和Firefox中，我可以看到实际的样式，文本为灰色，只有它拒绝状态。 关于我在
-
Stage.close()对我不起作用。 我查看了：JavaFX2.0：关闭一个舞台（窗口） 这是我的代码: 下面是调用消息框类的代码：
-
我正在使用Optaplanner申请员工排班。没有毅力，一切都很好。现在，我想添加Hibernate集成。我想从MySQL数据库中获取信息，并将其用作时间表输入。 在数据库中，我有位置和技能表。 员工数据、时隙和工作分配现在已在应用程序中硬编码。 我的域类，技能： 和职位： 不起作用的规则： 我认为数据库还可以，因为其中的数据以前是用这个应用程序创建的。此外，我还有另一个DRL规则正在运行。我没有
-
问题内容： 我有这样的布局： 使用以下CSS规则： 我使用jQuery将类添加到没有其他类之一的扇区中，或者： 然后，我对该类应用一些不同的规则： 一切都可以在现代浏览器中完美运行。 但是看到jQuery中的选择器是基于CSS3的，我想我可以将其直接移到样式表中，这样我就不必依靠使用jQuery添加额外的类了。此外，我对支持IE的较旧版本并不感兴趣，其他浏览器也对选择器提供了出色的支持。 因此，我