다른 요소가 포함 된 요소를 일치시키는 방법은 무엇입니까?

Question

CSS에서 모든 링크에 border-bottom : 1px 솔리드 속성이 있어야합니다. 그러나 링크 된 이미지가 있으면 테두리뿐만 아니라 가져옵니다. img 요소가있는 경우에만 속성을 어떻게 변경할 수 있습니까?

Answer 1

Descendant Selectors 사용해보십시오 :

a img { 
    border-bottom: none; 
} 

것은이 일부 미친 문을 삽입하여 (즉, 올바른 요소 (들)을 참조) 셀렉터가 올바른지 확인 첫째, 작동하지 않을 경우 그 요소가 선택에 영향을받지되는이 명확하게됩니다

a img { 
    color: red; 
    background-color: red; 
    border-bottom: none; 
} 

선택기가 제대로 작동하면 다음 미친 문을 제거하는 것을 잊지 마세요 (작동하지 않는 문에 초점을 맞출 수 있습니다 , 그래도!). 당신이 무시하지 않을 수 있도록이 작동하는 경우, 당신은 신중하게 CSS 코드를 검사하고 스타일 규칙을 재 배열 할 필요가

border-bottom: none !important; 

: 그것은 어딘가에 무시되고, 그래서 문장의 끝에 !important를 추가하려고 할 수 있습니다 이 규칙.

그래도 작동하지 않으면 올바른 속성으로 올바른 속성을 재정의해야합니다.

Answer 2

....

<style> 
    a{border-bottom: 1px solid;} 
    a img{border:none;} 
</style> 

Answer 3

a { text-decoration: none }

당신은 링크의 텍스트 장식 밑줄 기본을보고있다. 그러나 img 태그가 포함 된 경우 a 태그의 스타일을 변경할 수는 없습니다. CSS는 그런 식으로 작동하지 않습니다. 이미지가있는 a에 클래스를 추가하고이를 기반으로 스타일을 지정할 수 있습니다.

CSS

a.image { text-decoration: none } 

HTML

<a href="foo" class="image"><img src="foo.jpg"/></a> 

Answer 4

왜 당신이 <span>에 <img>을 포장하지 않는 한 다음 표준 용액은 '아무튼 특히 이후

a {border-bottom: 1px solid #33ccff;} 
span a {border: none;} 

Answer 5

는 CSS를 사용 어떤 코드가 도움이 될 것입니다.

어둠 속에서 촬영, 나의 제안은 테두리 너비를 지정하는 것입니다 :

a { border-bottom: 1px solid blue; } 
a img { border-width: 0 0 0 !important; } 

또는

a img { border-bottom-width:0; } 

그리고 그 중 하나가 실패하면, 내가 될 다른 스타일을보고 시작 했죠

겹치기 (필연적으로 상속되는 것은 아니며 마우스 오버시 시각적 공간에만 영향을 미침), 포함하는 요소의 여백 및 여백 및 배경색과 같습니다.