为什么我的一些 CSS 规则不起作用? [英] Why are some of my CSS rules not working?

查看：25
本文介绍了为什么我的一些 CSS 规则不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个嵌套的 flexbox 布局(使用 bootstrap v4)，它根据横向/纵向模式改变方向.第一层 div(由 flexbox 使用 order 属性放置)，#no，包含 5 个用作按钮的图标.order 属性在这些图标上无法正常工作.

如果我不使用 order 属性，图标会按自然顺序排列；但是，如果我尝试使用 order 属性来布置它们，则它不起作用.在代码中，info-div (order:3) 应该是最后一个元素.不是.我可以通过更改源中的顺序来获得我想要的顺序；不过，我想澄清一下我的误解.

<头><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>纽约肖像</title><风格>html，正文{宽度:100%；高度:100%；}#容器 {高度:100%；宽度:100%；显示:弹性；显示:-webkit-flex；flex-wrap: nowrap;-webkit-flex-wrap: nowrap;对齐内容:居中；-webkit-justify-content:中心；对齐项目:居中；-webkit-align-items:居中；对齐内容:间隔；-webkit-align-content:间隔；}#不 {填充:1rem；显示:弹性；显示:-webkit-flex；flex-wrap: nowrap;-webkit-flex-wrap: nowrap;对齐内容:间隔；-webkit-justify-content:间隔；对齐项目:居中；-webkit-align-items:居中；对齐内容:间隔；-webkit-align-content:间隔；弹性:1 1 自动；-webkit-flex:1 1 自动；}.图标 {保证金:自动；弹性增长:1;弹性基础:自动；}button:ACTIVE {//触摸模式的反馈背景:水色；}//接下来是图像.img { 宽度:8vmin;}//生活在#no 中的东西#info-div1 {订单:3；-webkit-order: 3;}#减 {订单:0；-webkit-order: 0;}#hb2 {顺序:-1；-webkit-order: -1;}#plus {订单:1；-webkit-order: 1;}#comment-button-div {订单:2；-webkit-order: 2;}@media 屏幕和(方向:横向){#容器 {弹性方向:行；-webkit-flex-direction: 行；}#不 {弹性方向:列；-webkit-flex-direction: 列；高度:100%；最大宽度:10rem；订单:0；-webkit-order: 0;}}@media 屏幕和(方向:纵向){#容器 {弹性方向:列；-webkit-flex-direction: 列；}#不 {弹性方向:行；-webkit-flex-direction: 行；最大高度:10rem；宽度:100%；订单:2；-webkit-order: 2;}}</风格><script src="https://www.google.com/recaptcha/api.js"异步延迟><身体><div id="容器"><div id='no'><div id='minus' class="icon" title="不是特别的."><a href="#" id="nHeart" ><img class="img icon" src="http://gps-photo.org/images/Not.svg"/></a>

<div id="hb2" title="登录/注册/上传/设置" class="btn-group icon"><div class="下拉"><img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1"数据切换="下拉" aria-haspopup="true" aria-expanded="false"/><div class="下拉菜单"><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><!-- 结束 hb2 --><div id='plus' class="icon" title="喜欢它！"><a href="#" id="heart1" ><img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/></a>

<div id='comment-button-div' class="icon" title="点击评论"><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 id='info-div1' class="icon" title='信息' ><a class="info-page" data-toggle="modal" ><img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/></a>

<!-- 首先是 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>

解决方案

CSS Commenting: Use /* ... */ not //... or <代码>

您遇到的问题与您的 flex 代码无关.

问题是您使用行注释语法来注释文本，而这不是有效的 CSS.

button:ACTIVE {//触摸模态反馈背景:水色；}//接下来是图像.img { 宽度:8vmin;}

所以你实际上做的是发布无效代码，而不是注释掉该行，而是调用 CSS 错误处理，这会杀死下一条规则.换句话说，您的 //text text text 后面的任何规则都将被忽略，就像您这样做一样:xheight: 50px.

这就是 order 对您的图标不起作用的原因:

//生活在#no 中的东西#info-div1 {订单:3；-webkit-order: 3;}

坚持标准的 CSS 注释方法.以 /* 开始注释.以 */ 结束评论.

/* 被注释掉的东西 */

一旦您对代码进行了调整，order 属性就可以正常工作(并且，正如您所料，其他更改会发生，由之前忽略的代码引起).查看修改后的演示.

在此处阅读有关 CSS 注释的更多信息:

<小时>

最后，单独说明:

您将供应商前缀代码放在标准的无前缀版本之后.

#container {flex-wrap: nowrap;-webkit-flex-wrap: nowrap;对齐内容:居中；-webkit-justify-content:中心；对齐项目:居中；-webkit-align-items:居中；对齐内容:间隔；-webkit-align-content:间隔；}

您应该考虑扭转这种情况.无前缀 (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:

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆