html - 清洁代码添加图像

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 来定位这些类，而不是您目前拥有的那些大型多层选择器。

这尤其适用于您复制的代码；如果您在所有目标元素上定义了相同的类，则可以消除这种重复，而不必为每个元素单独构建一个复杂的选择器。