根據周圍同級元素的存在選擇元素

Question

我有以下HTML結構。

<div class="fieldset"> 
    <p>Normal Input<i class="icon-question tooltip-top" title="Text Goes Here"></i></p> 
    <div> 
     <span><i class="icon-cart"></i></span> 
     <input name=""> 
     <span><i class="icon-cart"></i></span> 
     <i class="icon-question tooltip-top" title="Text Goes Here"></i> 
    </div> 
</div> 

我想根據其中<input>定位改變邊界半徑的設置。

例如，如果<input>在它之前有一個<span>，則它的邊界半徑將從頂部和底部左側爲零。

我這樣做是通過使用：

.fieldset > div > span + input { 
    border-radius: 0 4px 4px 0; 
} 

但是，當存在<input>後<span>輸入邊框半徑應只從右側的頂部和底部爲零。很明顯，我不能使用+選擇器。

如何在<span>在<input>之後達到預期效果，而不使用JavaScript並更改HTML？

UPDATE：

按照下面的答案，尤其是BoltClock♦方法 - 看來這個問題幾乎解決了！下面的圖片演示了所有不同的場景以及用於應用它們的代碼。

唯一還沒有工作的情況是輸入前只有一個範圍。

目前的CSS是：

/*Fieldsets*/ 
.fieldset { 
    width: 100%; 
    display: table; 
    position: relative; 
    white-space: nowrap; 
    margin-bottom: 15px; 
} 

.fieldset:last-of-type { 
    margin-bottom: 0; 
} 

     /*Fieldsets > Labels*/ 
     .fieldset > p { 
      width: 1%; 
      margin-bottom: 3px; 
     } 

     /*Fieldsets > Input Container*/ 
     .fieldset > div { 
      display: table-row; 
      position: relative; 
     } 

      .fieldset > div > * { 
       display: table-cell; 
       white-space: nowrap; 
       vertical-align: middle; 
       position: relative; 
      } 

      /*Fieldsets > Input + Icon*/ 
      .fieldset > div > span { 
       border: 1px solid #B0C2CE; 
       padding: 5px 15px; 
       font-weight: bold; 
       width: 1%; 
      } 

      /*Fieldsets > Input + Icon Senarios*/ 
      .fieldset > div > span:first-of-type { 
       border-right: 0; 
       border-radius: 4px 0 0 4px; 
      } 

      .fieldset > div > span:last-of-type { 
       border-left: 0; 
       border-radius: 0 4px 4px 0; 
      } 

      .fieldset > div > span:not(:only-of-type) + input { 
       border-radius: 0; 
      } 

      .fieldset > div > span + input, 
      .fieldset > div > span + textarea, 
      .fieldset > div > span + select, 
      .fieldset > div > span + .select-dropdown-single .select-dropdown-input, 
      .fieldset > div > span + .select-dropdown-multi .select-input { 
       border-radius: 0 4px 4px 0; 
      } 

      /*Fieldsets > Input + Help toolTip icon*/ 
      .fieldset > div [class^="tooltip-"], 
      .fieldset > div [class*=" tooltip-"] { 
       text-align: center; 
       width: 30px; 
      } 

的HTML：

<div class="fieldset"> 
       <p>Normal Input</i></p> 
       <div> 
        <input name=""> 
       </div> 
      </div> 

      <div class="fieldset"> 
       <p>Normal Input</p> 
       <div> 
        <span><i class="icon-cart"></i></span> 
        <input name=""> 
       </div> 
      </div> 

      <div class="fieldset"> 
       <p>Normal Input</p> 
       <div> 
        <span><i class="icon-cart"></i></span> 
        <input name=""> 
        <span><i class="icon-cart"></i></span> 
       </div> 
      </div> 

      <div class="fieldset"> 
       <p>Normal Input</p> 
       <div> 
        <span><i class="icon-cart"></i></span> 
        <input name=""> 
        <span><i class="icon-cart"></i></span> 
        <i class="icon-question tooltip-top" title="Text Goes Here"></i> 
       </div> 
      </div> 

Answer 1

通常情況下，您不能定位一個元素，該元素是另一個元素的前一個兄弟元素，無論o f HTML結構，因爲there is no previous sibling selector。

但是，考慮到您的結構，還有一些可能的情況仍然可以使用當前可用的方式進行考慮。如果在<input>的兩側或兩側只有最多一個<span>，並且此<div>元素中沒有其他<span>元素，則在所有這些情況下，您將能夠定位<input>。

正如在問題給出，當存在出現僅的<input>之前，使用相鄰的兄弟選擇靶向<span>元件<input>：

<div class="fieldset"> 
    <p>Normal Input<i class="icon-question tooltip-top" title="Text Goes Here"></i></p> 
    <div> 
     <span><i class="icon-cart"></i></span> 
     <input name=""> 
     <i class="icon-question tooltip-top" title="Text Goes Here"></i> 
    </div> 
</div> 

.fieldset > div > span + input { 
    border-radius: 0 4px 4px 0; 
} 

當存在<span>元件出現只有<input>後，那麼如果這導致<input>成爲其母公司<div>的第一個孩子，你可以SE :first-child來定位<input>只有在這樣的情況：

<div class="fieldset"> 
    <p>Normal Input<i class="icon-question tooltip-top" title="Text Goes Here"></i></p> 
    <div> 
     <input name=""> 
     <span><i class="icon-cart"></i></span> 
     <i class="icon-question tooltip-top" title="Text Goes Here"></i> 
    </div> 
</div> 

.fieldset > div > input:first-child { 
    border-radius: 4px 0 0 4px; 
} 

當<span>元素之前和之後的<input>，您可以在第一<span>使用:not(:only-of-type)與相鄰的兄弟選擇，以防止出現匹配那第一個<span>在這種情況下：

<div class="fieldset"> 
    <p>Normal Input<i class="icon-question tooltip-top" title="Text Goes Here"></i></p> 
    <div> 
     <span><i class="icon-cart"></i></span> 
     <input name=""> 
     <span><i class="icon-cart"></i></span> 
     <i class="icon-question tooltip-top" title="Text Goes Here"></i> 
    </div> 
</div> 

.fieldset > div > span:not(:only-of-type) + input { 
    border-radius: 0; 
} 

---

作爲獎勵，因爲你對付border-radius財產，記住，你可以用它longhands選擇，以避免應對第三種情況（<span>兩側）共有：

.fieldset > div > input { 
    border-radius: 4px; 
} 

.fieldset > div > span:only-of-type + input { 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
} 

.fieldset > div > input:first-child { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
} 

但是，在這種情況下請注意使用:only-of-type，以防止選擇器匹配，如果兩邊都存在<span>元素。

Answer 2

我可以簡單地給主容器相應的類，但我想看看是否有辦法不需要改變HTML就可以做到這一點。

沒有，沒有選擇該選擇前一個兄弟（Is there a previous sibling selector?）

只有在未來的CSS版本的草稿：http://dev.w3.org/csswg/selectors-4/#general-sibling-combinators

Answer 3

在你的特殊情況（如果你的HTML不會改變你可以使用類似這樣的東西：

嘗試刪除/註釋掉第一個跨度並查看其差異。它僅僅適用於border-radius: 0除了那些所有輸入元素，其中前一個元素是span

//編輯

你現在可以直接看到其中的差別，沒有註釋掉必要

.fieldset > div > input { 
    border-radius: 0; 
} 

.fieldset > div > span + input { 
    border-radius: 0 4px 4px 0 !important; 
} 

JSFiddle