다양한 스타일 시트와 연결된 양식이 있습니다. select 태그에 대한 스타일을 가진 두 개의 스타일 시트가 있습니다. 그래서 그 두 스타일 시트를 연결할 때 충돌이. 예를특정 스타일 시트의 스타일을 요소에 수동으로 적용하는 방법은 무엇입니까?
내가 선택 태그에 대한 스타일을 포함 style1.css 및 style2.css이 들어
. 그리고 나는 select1과 select2라는 id를 가진 두 개의 select 태그를 가지고있다.
style1.css의 스타일 만 select1에 적용하고 style2.css는 select2에 적용하고 싶습니다. 내가 어떻게 해 ?
다른 ID 태그에도 영향을주기 때문에 특정 ID에 스타일을 지정할 수 없습니다.
다른 스타일 시트의 스타일을 특정 위치에서만 작동하도록하려면 어떻게해야합니까?
CSS3의 :not() 선택기를 사용할 수 있습니다.
select:not(#select1) {
// styling here will be applied to all selects except select1
}
을하지만 현실에서 당신은 단지 하나 개의 CSS 문서에서 select 태그에 대한 모든 스타일을 유지해야한다 : 예를 들어, style2.css, 당신은 작성합니다. 이렇게하면 충돌을보다 쉽게 제어 할 수 있습니다.
IE8 이전 버전에서는': not()'selector가 지원되지 않는 단점이 있습니다. IE9 및 다른 브라우저에서 지원합니다. – psur
CSS는 마지막 설정이 가장 중요한 방식으로 작동합니다. 그래서 당신은 당신이 select1의 스타일을 정의 할 수 있습니다 style2.css의 결국, 먼저 style2.css 및 을 style1.css를 연결할 수 있습니다
#select1
{
/* styles */
}
그것은 어떤 다른 요소 만 select1에 영향을 미치지 않습니다.
하지만 일반적으로 하나의 스타일 시트에서 선택 항목의 스타일을 병합해야합니다.
style1 id의 클래스 이름을 class="style-one"으로 정의한 다음 요소 스타일에 !important 태그를 지정하여 스타일을 정의 할 수 있습니다. . 이와 같이 :
.style-one{border:none !important;}
그리고 또한 당신이 순서를 변경하지 않고 사용하는 스타일 시트의이 클래스를 정의 할 수 있습니다 :
를 내가 아는 한, 그것은 클라이언트 측 기술로 불가능 - 일단 스타일 시트가로드되면, 그것은 우리의 손에서 나온 것입니다. 그러나 서버 측 언어를 사용할 수있는 경우 해당 스타일 시트를 "병합"하여 원하는대로 필터링 된 최종 스타일 시트 하나를 제공 할 수 있습니다. –
두 스타일 시트에서 CSS 선택기를 변경하지 않으면이 작업을 수행 할 수 없습니다. – Sjoerd