为什么我的某些 CSS 规则不起作用？
Why are some of my CSS rules not working?
我有一个嵌套的 flexbox 布局（使用 bootstrap v4），它根据横向/纵向模式改变方向。第一层 div（由 flexbox 使用 order 属性 放置），#no，包含 5 个用作按钮的图标。 order 属性 在这些图标上无法正常工作。
如果我不使用 order 属性，图标将按自然顺序排列；但是，如果我尝试使用 order 属性 来布置它们，它就不起作用。在 code 中，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 注释：使用 /* ... */ 而不是 //... 或 <!-- ... -->
您遇到的问题与您的弹性代码无关。
问题是您正在使用 行注释语法 来注释文本，这是无效的 CSS .
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
所以你实际上在做的是发布无效代码，而不是注释掉该行，而是调用 CSS error-handling 发挥作用，这会杀死下一条规则。换句话说，您的 // text text text 之后的任何规则都将被忽略，就像您这样做了一样：xheight: 50px.
这就是 order 不适用于您的图标的原因：
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
坚持使用标准的 CSS 评论方法。用 /* 开始评论。用 */ 结束评论。
/* stuff to be commented out */
在您的代码中进行调整后，order 属性 可以正常工作（而且，如您所料，会发生其他更改，这是由先前忽略的代码引起的）。 See revised demo.
在此处阅读有关 CSS 评论的更多信息：
- 4. Syntax and basic data types > Section 4.1.9 Comments~W3C
- Is it bad practice to comment out single lines of CSS with //?
- Do double forward slashes direct IE to use specific css?
- Single Line Comments (
//) in CSS ~ Tab Atkins, Jr.，CSS 工作组
最后，单独说明：
您将供应商前缀代码 放置在 标准无前缀版本之后。
#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) 版本应该排在最后，因此它始终是级联中的首选版本。 Read more.
我有一个嵌套的 flexbox 布局（使用 bootstrap v4），它根据横向/纵向模式改变方向。第一层 div（由 flexbox 使用 order 属性 放置），#no，包含 5 个用作按钮的图标。 order 属性 在这些图标上无法正常工作。
如果我不使用 order 属性，图标将按自然顺序排列；但是，如果我尝试使用 order 属性 来布置它们，它就不起作用。在 code 中，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 注释：使用 /* ... */ 而不是 //... 或 <!-- ... -->
您遇到的问题与您的弹性代码无关。
问题是您正在使用 行注释语法 来注释文本，这是无效的 CSS .
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
所以你实际上在做的是发布无效代码，而不是注释掉该行，而是调用 CSS error-handling 发挥作用，这会杀死下一条规则。换句话说，您的 // text text text 之后的任何规则都将被忽略，就像您这样做了一样：xheight: 50px.
这就是 order 不适用于您的图标的原因：
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
坚持使用标准的 CSS 评论方法。用 /* 开始评论。用 */ 结束评论。
/* stuff to be commented out */
在您的代码中进行调整后，order 属性 可以正常工作（而且，如您所料，会发生其他更改，这是由先前忽略的代码引起的）。 See revised demo.
在此处阅读有关 CSS 评论的更多信息：
- 4. Syntax and basic data types > Section 4.1.9 Comments~W3C
- Is it bad practice to comment out single lines of CSS with //?
- Do double forward slashes direct IE to use specific css?
- Single Line Comments (
//) in CSS ~ Tab Atkins, Jr.，CSS 工作组
最后，单独说明：
您将供应商前缀代码 放置在 标准无前缀版本之后。
#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) 版本应该排在最后，因此它始终是级联中的首选版本。 Read more.