クラスに割り当てられたイメージのコンビネータは何ですか？

Question

私はこのようなスタイルを定義している：

.entry-content img, .entry-content img a { 
    background-color: #fff; 
    padding: 0px; 
    -webkit-box-shadow: 5px 5px 20px #d2d2d2; 
    box-shadow: 5px 5px 10px #d2d2d2; 
    margin-top:20px; 
    margin-bottom:30px; 
    border-radius:10px; 
    border-color:#555; 
    border-width:1px; 
    border-style:solid; 
} 

これは、デフォルトですべての境界を持っているコンテンツ領域に追加の画像、境界線の半径、影などを行います。

しかし、私はこれらの属性なしで画像を挿入できるようにしたいと思います。

だから、私の考え（よりよいものがあるかどうかわかりません）は、それを分離できるクラスを作ることです。しかし問題がある。私がイメージにクラスを割り当てる場合は、divの中にそれを置くことによって、私は両方を試してみましたし、どれもがいずれかを作るん

.entry-content img withoutBorder, .entry-content img a withoutBorder { 
} 

など

.entry-content withoutBorder img, .entry-content withoutBorder img a { 
} 

のようにそれを書くべきかどうかわからないです画像には引き続き属性があります。

どのようにすれば最も簡単にできますか？

Answer 1

あなたはCSSのようなクラスや要素を整理すると、あなたが実際にあなたが/スタイルをターゲットとしたいDOMツリー内の順序を指定している - の例として：

.entry-content a img{ 
 
    background-color: #fff; 
 
    padding: 0px; 
 
    -webkit-box-shadow: 5px 5px 20px #d2d2d2; 
 
    box-shadow: 5px 5px 10px #d2d2d2; 
 
    margin-top:20px; 
 
    margin-bottom:30px; 
 
    border-radius:10px; 
 
    border-color:#555; 
 
    border-width:1px; 
 
    border-style:solid; 
 
    min-height:50px; 
 
    min-width:50px; 
 
}

<div class="entry-content"> 
 
    <a href="#"> 
 
    <img src=""> 
 
    </a> 
 
</div>

• imgがa
0123の子である：HTMLの一部では、あなたはそれを見ることができます
• a私は「.entry-contentターゲットaとa内部の内部は、imgをターゲット」ことを示すことによって、同じことを指定していCSSの一部で.entry-content

の子です。言い換えれば、それはDOMツリーの順序を指定し、どちらが親であり、どちらが子であるかを示しています。

クラスを追加するときは、それをターゲットにするために、クラスに接頭辞として.（ドット）を付ける必要があります。

また、アンカー（<a>）がimgタグ内にアンカーを持つのではなく、<img>を取り囲むように、HTMLを少し変更しました。

イメージのスタイリングを変更するには、実際にクラスを追加する必要があります。これは、そうのようにすることができます：

.entry-content a img{ 
 
    background-color: #fff; 
 
    padding: 0px; 
 
    -webkit-box-shadow: 5px 5px 20px #d2d2d2; 
 
    box-shadow: 5px 5px 10px #d2d2d2; 
 
    margin-top:20px; 
 
    margin-bottom:30px; 
 
    border-radius:10px; 
 
    border-color:#555; 
 
    border-width:1px; 
 
    border-style:solid; 
 
    min-height:50px; 
 
    min-width:50px; 
 
} 
 
.entry-content a img.withoutborder{ 
 
    border:none; 
 
}

<div class="entry-content"> 
 
    <a href="#"> 
 
    <img class="withoutborder" src=""> 
 
    </a> 
 
</div>

Answer 2

はCSS3 notオペレータ

.entry-content img:not(.withoutBorder), .entry-content img a:not(.withoutBorder) { 
} 

.entry-content img:not(.no-border), 
 
.entry-content img a:not(.no-border) { 
 
    border-radius: 10px; 
 
}

<div class="entry-content"> 
 
    <img src="http://lorempixel.com/100/100/" /> 
 
</div> 
 
with border radius 
 

 
<br /> 
 
<div class="entry-content"> 
 
    <img class="no-border" src="http://lorempixel.com/100/100/" /> 
 
</div> 
 
without border radius 
 

 

 
<h2>Image inside anchor tag</h2> 
 
<div class="entry-content"> 
 
    <a href="#"><img src="http://lorempixel.com/100/100/" /></a> 
 
</div> 
 
with border radius 
 

 
<div class="entry-content"> 
 
    <a href="#" class="no-border"><img class="no-border" src="http://lorempixel.com/100/100/" /></a> 
 
</div> 
 
without border radius

を使用しても、これはあなたが画像タグの子としてアンカータグを持つことができません間違っ

.entry-content img a 

です。

Answer 3

他のユーザーは既にあなたの問題を解決し、私はあなたがセレクタの詳細意識滞在したいです。

.entry-content img withoutBorder, .entry-content img a withoutBorder 

マッチこの：

<div class="entry-content"> 
    ... 
    <img> 
    ... 
    <withoutBorder></withoutBorder> 
    ... 
    </img> 
    ... 
</div> 

またはこの：あなたは `使用