为什么我的一些CSS规则不工作？ [英] Why are some of my CSS rules not working?
问题描述
我有一个嵌套的flexbox布局（使用bootstrap v4），它根据横向/纵向模式改变方向。第一级 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-compatiblecontent =ie = edge>
<！ - Bootstrap CSS - >
< link rel =stylesheethref =https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< title>纽约肖像< / title>
< style>
html，body {
width：100％;
height：100％;
}
#container {
height：100％; width：100％;
display：flex;显示：-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：空格;
}
#no {
padding：1rem;
display：flex;显示：-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：空格;
flex：1 1 auto; -webkit-flex：1 1 auto;
}
.icon {
margin：auto;
flex-grow：1;
flex-basis：auto;
}
button：ACTIVE {//触摸模式的反馈
background：aqua;
}
//下一个是图片
.img {width：8vmin; }
// stuff生活在#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屏幕和（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屏幕和（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 =icontitle =不特殊。
< a href =＃id =nHeart>
< img class =img iconsrc =http://gps-photo.org/images/Not.svg/>
< / a>
< / div>
< div id =hb2title =登录/注册/上传/设置class =btn-group icon>
< div class =dropdown>
< img class =dropdown-toggle imgsrc =http://gps-photo.org/images/cogwheel-525702-1.svgid =dropdownMenu1
data-toggle =dropdownaria-havepopup =truearia-expanded =false/>
< div class =dropdown-menu>
< a class =dropdown-item clrdata-toggle =modalhref =＃myModal>< / a>
< a class =dropdown-item cupdata-toggle =modalhref =＃myModal>< / a>
< a class =dropdown-item cmoredata-toggle =modalhref =＃myModal>
< / a>
< a class =dropdown-item cponydata-toggle =modalhref =＃myModal>
< / a>
< a class =dropdown-item caboutdata-toggle =modalhref =＃myModal>< / a>
< / div>
< / div>
< / div><！ - end hb2 - >
< div id ='plus'class =icontitle =Loving it！>
< a href =＃id =heart1>
< img class =imgsrc =http://gps-photo.org/images/red-304570-1.svg/>
< / a>
< / div>
< div id ='comment-button-div'class =icontitle =点击查看>
< a class =comment-pagedata- toggle =modal>
< img class =imgid ='comment-button'src =http://gps-photo.org/images/comments-97860-3.svg/>
< / a>
< / div>
< div id ='info-div1'class =icontitle ='Information'>
< a class =info-pagedata-toggle =modal>
< img id =info1class =imgsrc =http://gps-photo.org/images/information-39064-2.svg/>
< / a>
< / div>
< / div>
< / div>
<！ - jQuery先，然后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评论：使用 / * ... * / 不 // ... 或<！ - ... - > ;
$ b
$ b p>问题是您使用行注释语法 注释文本，这是无效的CSS。 button：ACTIVE {//触摸模式的反馈
background：aqua;
}
//下一个是图片
.img {width：8vmin; }
因此，你实际上是在发布无效代码，正在调用CSS错误处理进行播放，这杀死了下一个规则。换句话说，你的 //文本文本文本后面的任何规则都被忽略，就像你这样做： xheight：50px 。
这是为什么 order 不适用于您的图标：
// stuff生活在#no
＃info-div1 {
order：3;
-webkit-order：3;
}
坚持标准的CSS注释方法。使用 / * 开始注释。使用 * / 结束注释。
/ *要注释的东西* /
在您的代码中进行调整后， order 属性运行正常（并且， ，由以前忽略的代码引起）。 查看修订的演示。
了解详情CSS评论：
- 4。语法和基本数据类型>第4.1.9节注释〜W3C
- 是不好的做法是用// 注释单行css。
- 双重前进斜线直接指向IE使用特定的css？
- 单行注释
// ）in CSS 〜Tab Atkins，Jr.，CSS Working Group
最后，另一个注意事项：
前缀代码 之后的标准无前缀版本。
#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）版本应该是最后一个版本，因此它始终是级联中的首选版本。 了解详情。
I have a nested flexbox layout (using bootstrap v4) which changes orientation according to landscape / portrait mode. A first level div (which is placed by flexbox using the order property), #no, holds 5 icons which serve as buttons. The order property doesn't work as I expect on these icons.
If I don't use an order property, the icons are laid out in the natural order; however, if I try to use the order property to lay them out, it doesn't work. In the code, the info-div (order:3) should be the last element. It isn't. I can get the order I want by changing order in the source; however, I would like to clarify my misunderstanding.
<!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 Commenting: Use /* ... */ not //... or <!-- ... -->
The problem you're having is not related to your flex code.
The problem is you're using line comment syntax for commenting out text, and this is not valid CSS.
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
So what you're actually doing is posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.
This is why order is not working for your icon:
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.
/* stuff to be commented out */
Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.
Read more about CSS comments here:
- 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 Working Group
Lastly, on a separate note:
You're placing vendor prefixed code after the standard unprefixed versions.
#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;
}
You should consider reversing this. The unprefixed (W3C) version should go last, so it's always the preferred version in the cascade. Read more.
这篇关于为什么我的一些CSS规则不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b
$ b p>问题是您使用行注释语法 注释文本，这是无效的CSS。
button：ACTIVE {//触摸模式的反馈
background：aqua;
}
//下一个是图片
.img {width：8vmin; }
因此，你实际上是在发布无效代码，正在调用CSS错误处理进行播放，这杀死了下一个规则。换句话说，你的 //文本文本文本后面的任何规则都被忽略，就像你这样做： xheight：50px 。
这是为什么 order 不适用于您的图标：
// stuff生活在#no
＃info-div1 {
order：3;
-webkit-order：3;
}
坚持标准的CSS注释方法。使用 / * 开始注释。使用 * / 结束注释。
/ *要注释的东西* /
在您的代码中进行调整后， order 属性运行正常（并且， ，由以前忽略的代码引起）。 查看修订的演示。
了解详情CSS评论：
- 4。语法和基本数据类型>第4.1.9节注释〜W3C
- 是不好的做法是用// 注释单行css。
- 双重前进斜线直接指向IE使用特定的css？
- 单行注释
//）in CSS 〜Tab Atkins，Jr.，CSS Working Group
最后，另一个注意事项：
前缀代码 之后的标准无前缀版本。
#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）版本应该是最后一个版本，因此它始终是级联中的首选版本。 了解详情。
I have a nested flexbox layout (using bootstrap v4) which changes orientation according to landscape / portrait mode. A first level div (which is placed by flexbox using the order property), #no, holds 5 icons which serve as buttons. The order property doesn't work as I expect on these icons.
If I don't use an order property, the icons are laid out in the natural order; however, if I try to use the order property to lay them out, it doesn't work. In the code, the info-div (order:3) should be the last element. It isn't. I can get the order I want by changing order in the source; however, I would like to clarify my misunderstanding.
<!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 Commenting: Use /* ... */ not //... or <!-- ... -->
The problem you're having is not related to your flex code.
The problem is you're using line comment syntax for commenting out text, and this is not valid CSS.
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
So what you're actually doing is posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.
This is why order is not working for your icon:
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.
/* stuff to be commented out */
Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.
Read more about CSS comments here:
- 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 Working Group
Lastly, on a separate note:
You're placing vendor prefixed code after the standard unprefixed versions.
#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;
}
You should consider reversing this. The unprefixed (W3C) version should go last, so it's always the preferred version in the cascade. Read more.
这篇关于为什么我的一些CSS规则不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
