2010-07-31 5 views
0
<div id="compv-navbar"> 
    <a href="#"><img src="image1.png" id="icon1"></a> | <a href="#"><img src="image2.png" id="icon2"></a> | <a href="#"><img src="image3.png" id="icon3"></a> | This is the text I want to select and style specifically. 
</div> 

HTML/CSS에서이 작업을 수행하고 싶습니다. jQuery 또는 Javascript가 없습니다.CSS에서 ID없이 텍스트를 선택하려면 어떻게해야합니까?

기타 ... 다른 <div> 태그를 사용하지 않고이 작업을 수행하고 싶습니다. 프레젠테이션을 버리기 때문입니다.

편집 : 명확히하기 위해 본질적으로 해당 텍스트를 '동봉'하고 싶기 때문에 'compv-navbar'에 스타일을 적용 할 수 없습니다. div가 아닌 자신의 div 인 것처럼 스타일을 지정할 수 있기를 원합니다. 전체 compv-navbar div의 스타일을 지정하면 모든 파이프 (|)가 수행되고 싶지 않습니다. 그 텍스트의 특정 부분을 스타일로 지정하기 만하면됩니다.

감사합니다.

+1

당신이 시도하고 무엇을 문제가 있었나요? 이게 니가 필요한게 아니니? # compv-navbar {/ * 귀하의 스타일은 여기에 * /} –

답변

4

<div> 대신 <span>에 해당 텍스트를 감싸고 나서 #compv_navbar span에 스타일을 적용하십시오. <span>은 일반적인 인라인 요소이므로 이 사용자 레이아웃을 벗어나서는 안됩니다.

<div id="compv-navbar"> 
    <a href="#"><img src="image1.png" id="icon1"></a> | 
    <a href="#"><img src="image2.png" id="icon2"></a> | 
    <a href="#"><img src="image3.png" id="icon3"></a> | 
    <span>Text to be styled</span> 
</div> 

당신이 구분이 같은 방식으로 스타일을 받으려면 아마도 <span> 같으면를 사용하여 : 여기

텍스트의하지 일부 파이프 분리기 대상으로 할 가정, 그림의 더 이상 '단순'에 대한 설명에 더 이상 적합하지 않습니다 (분리 기호를 동일한 span 태그로 감싸는 것 등).이 경우에는 스타일을 #compv_navbar과 함께 사용합니다.

+1

+1은 간단한 span 태그 사용을 제안합니다. 왜 이것이 이보다 더 복잡하게 만드나요? 키스. – mattmc3

+0

레이아웃을 벗어나지 않고도이 작업을 수행 할 수있는 간단한 HTML 구조가 있다는 것을 알았습니다. 그게 무엇인지 기억할 수 없었습니다. 감사합니다. – marcamillion

+0

그건 그렇고, 오른쪽으로 확장하려면 ID를 추가 할 수 있습니까? – marcamillion

0

다음 선택기는 어떤가?

#icon3:after

:not(.icon1,.icon2,.icon3)

아니면 내가 BoltClock의 사용 <span> 제안

을 좋아한다 : 내가 생각 CSS3 기준) (포함 당신이 원하는 것을하지만이되지 않는 것

관련 문제