Question

我正在尝试将样式赋予传输链接Li，我已经完成了，但我感觉它可能是一个更干净的代码，我不完全确定使用绝对位置是否是这里最好的方法，也许我应该在伪类之前使用。能否请你指出实现这一目标的最佳和最简洁的方法。链接在这里非常感谢 enter image description here [https://dl.dropboxusercontent.com/u/14407746/move_bubble_master/index.html][2]

              #main .descript strong {
          font-family: 'proxima_nova_altbold';
          display: block;
          font-weight: 700;
          padding: 20px 0px 16px 0px;
          color: #000;
          font-size: 14px;
          border-bottom: solid 1px #e0e0e0;
          }
          /* line 226, ../sass/main.scss */
          #main .descript ol {
          list-style: none;
          padding: 0px;
          width: 100%;
          margin-bottom: 2px;
          }
          /* line 229, ../sass/main.scss */
          #main .descript ol li {
          width: 50%;
          float: left;
          height: 53px;
          border-bottom: solid 1px #e0e0e0;
          position: relative;
          color: #000;
          padding-left: 34px;
          font-size: 13px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          }
          /* line 236, ../sass/main.scss */
          #main .descript ol li img {
          float: left;
          position: absolute;
          left: 0px;
          top: 0px;
          }
          /* line 237, ../sass/main.scss */
          #main .descript ol li span {
          display: block;
          color: #9c9c9c;
          padding-bottom: 6px;
          }
          /* line 242, ../sass/main.scss */
          #main .descript ol li em {
          font-family: 'proxima_nova_altbold';
          position: absolute;
          top: 0px;
          right: 40px;
          line-height: 76px;
          color: #9c9c9c;
          font-style: normal;
          }
          /* line 250, ../sass/main.scss */
          #main .descript ol li.room {
          line-height: 53px;
          }
          /* line 252, ../sass/main.scss */
          #main .descript ol li.room img {
          width: 23px;
          height: auto;
          left: 3px;
          top: 15px;
          }
          /* line 254, ../sass/main.scss */
          #main .descript ol li.kitchen {
          line-height: 53px;
          }
          /* line 256, ../sass/main.scss */
          #main .descript ol li.kitchen img {
          width: 23px;
          height: auto;
          left: 3px;
          top: 15px;
          }
          /* line 258, ../sass/main.scss */
          #main .descript ol li.kilburn, #main .descript ol li.kilburnPark, #main .descript ol li.maida, #main .descript ol li.south {
          padding: 16px 0px 0px 34px;
          height: 64px;
          }
          /* line 260, ../sass/main.scss */
          #main .descript ol li.kilburn img, #main .descript ol li.kilburnPark img, #main .descript ol li.maida img, #main .descript ol li.south img {
          width: 19px;
          height: auto;
          left: 3px;
          top: 20px;
          }
          /* line 263, ../sass/main.scss */
          #main .descript ol:after {
          clear: both;
          content: "";
          display: table;
          }

Answer 1

首先，我建议您为一些更深层嵌套的元素添加一些类，并使用CSS定位这些类，而不是那些目前已经获得的大型多层选择器。

这特别适用于你重复的代码;如果您在所有目标元素上定义了相同的类，则可以删除此重复，而不必单独为每个目标元素构建复杂的选择器。

清洁代码添加图片

1 个答案: