앵커 태그 안의 이미지에서 테두리 제거

Question

그래서 .. 앵커 태그의 아래쪽 테두리를 추가하여 눈에 잘 띄게했습니다. 하지만 앵커 태그로 뒤틀린 이미지가 있습니다. 문제는 이미지에서 경계를 제거하는 방법을 모르겠다는 것입니다. 즉,

.entry-content a { 
padding:0 3px; 
color: #104273; 
border-bottom:2px solid #104273; 
} 

그리고 내 질문은 :

내가 워드 프레스를 사용하고 있습니다 나는 링크와 이미지를이 내 CSS 코드입니다

표시되는 방식을 편집 할 수 없습니다 이런 식으로 할 수있는 방법이 있습니까?

.entry-content a img { 
border:none; 
} 

그래서 링크가있는 이미지에서만 테두리가 제거됩니까?

http://codepen.io/andornagy/pen/sdzBq

Answer 1

당신이 겪고있는 문제는 당신이 앵커 태그를 스타일링하고 실제로 스타일이 적용된되고있다 않는 <img> 태그에 해당 스타일을 덮어하려고하지만, 오히려하고 있다는 것입니다 그것은 부모입니다.

자바 스크립트를 사용하지 않으려는 경우 <span> 태그 및 스타일 자체의 링크에 텍스트를 래핑 할 수 있습니다. 여기

a { 
    padding:0 3px; 
    color: #104273; 
    text-decoration:none; 
} 
a span { 
    border-bottom:2px solid #104273; 
} 

HTML

<a href='#'><span>This is a blank Link</span></a> 
<a href='#'><img src="..."></a> 

CSS 행동에 그것의 바이올린입니다 : http://jsfiddle.net/xVSA9/

UPDATE

좋아, 여기 jQuery의 parent()를 사용하여 솔루션입니다 예언자 ctor.

$('img').parent('.entry-content a').css("border-bottom", "none"); 

CSS/HTML을 동일하게 유지하면 정상적으로 작동합니다.

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

이미지가 당신의 '직접 아이 선택기를 사용할 수 있도록 앵커의 직접적인 자식 인 : 당신이 다음과 같이 HTML 보이는 것 추정 http://jsfiddle.net/GeR85/

Answer 2

: 여기

는 바이올린입니다 CSS는 상징 이상의 것입니다.

.entry-content>a>img{} 

메뉴에 이름이 있기 때문에 정리 된 목록을 사용하고 싶습니다. 그들은 조직 된 권위자입니다.

<ol id="menu"> 
    <li> 
     <a href=""><img src=""/></a> 
    </li> 
    <li> 
     <a href="">This is a blank link</a> 
    </li> 
    <li> 
     <a href="">Another link</a> 
    </li> 
</ol> 

CSS !important를 사용

img{ 
    border:1px solid #000000 
} 
ol#menu{ 
    list-style-type:none; 
    margin:0px; 
    padsding:0px; 
} 
ol#menu>li{ 
} 
ol#menu>li>a{ 
    display:block; 
    padding:10px 5px; 
    font-size:20px; 
    text-decoration:none; 
    border-bottom:1px solid #000000; 
} 
ol#menu>li>a>img{ 
    border-bottom:none; 
} 

마십시오.

Answer 3

자 ...:)

되는 HTML :

<div class="entry-content"> 
<a href="#">test</a> 
<a href="#"> 
    <img src="https://www.google.co.il/images/srpr/logo11w.png" /> 
</a> 
</div> 

는 CSS :

.entry-content a:not(a img) { 
padding:0 3px; 
color: #104273; 
border-bottom:2px solid #104273; 
} 

jsFiddle :

http://jsfiddle.net/3RJ3Q/2/