2013-04-25 2 views
0

맨 먼저; 나는이 CSS 유형의 많은 질문이 닫혀 있다는 것을 알고 있습니다. 그래서 다른 사람들에게도 맞도록 질문을 넓힐 수 있었으면 좋겠습니다. 여기에 간다 :다른 버튼에 대해 다른 CSS 스타일링

나는 프로젝트를 건 내 상사가 나를 원하는 기능을 추가하는 최선을 다하고 있습니다. 그러나 나머지 부분과 다르게 단추 스타일을 지정하려고하면 변경 내용이 적용되지 않습니다.

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 

버튼 :

<input type="submit" value="Print." class="fakeBtn" id="fakeBtn" /> 

CSS는 시도 :

.fakeBtn 
{ 
    font-size: 0.8em; 
    border: 0px; 
    background-color: transparent; 
    color: #999; 
    cursor: hand; 
} 

input#fakeBtn 
{ 
    font-size: 0.8em; 
    border: 0px; 
    background-color: transparent; 
    color: #999; 
    cursor: hand; 
} 

내가했습니다 볼 수 있듯이 내가 다른 일을 스타일 수 있어요로

CSS 파일 작동 클래스를 사용하여 스타일을 변경하고 ID 접근 방식을 시도했습니다. 그 중 어느 것도 작동하지 않습니다. 나는 어떤 mvc 작업도 거의하지 않았으며, 이미 존재하는이 프로젝트가 나의 첫 번째 프로젝트이다. 논리적 오류입니까? 내가 도대체 ​​뭘 잘못하고있는 겁니까?

편집 :

이 중 하나가 무시 될 수 있습니까? 이것들은 모두 그 안에 "input"으로 찾을 수있는 모든 CSS 조각입니다. 어떤 것이 뭔가 다른 것을 무시하는 경우 어떻게 알 수 있습니까?

input, textarea { 
    border: 1px solid #e2e2e2; 
    background: #fff; 
    color: #333; 
    font-size: 1.2em; 
    margin: 5px 0 6px 0; 
    padding: 5px; 
    width: 300px; 
} 

    input:focus, textarea:focus { 
     border: 1px solid #7ac0da; 
    } 

    input[type="checkbox"] { 
     background: transparent; 
     border: inherit; 
     width: auto; 
    } 

    input[type="submit"], 
    input[type="button"], 
    button { 
     background-color: #d3dce0; 
     border: 1px solid #787878; 
     cursor: pointer; 
     font-size: 1.2em; 
     font-weight: 600; 
     padding: 7px; 
     margin-right: 8px; 
     width: auto; 
    } 

    td input[type="submit"], 
    td input[type="button"], 
    td button { 
     font-size: 1em; 
     padding: 4px; 
     margin-right: 4px; 
    } 

input.input-validation-error { 
    border: 1px solid #e80c4d; 
} 

input[type="checkbox"].input-validation-error { 
    border: 0 none; 
} 
+0

이상하게 작동해야합니다 : http://jsfiddle.net/RzRHM/ – Peter

+0

[this fiddle] (http://jsfiddle.net/KQ9p5/)에서 볼 수있는 것처럼 잘 동작합니다. 개발자 도구를 사용하여 스타일을 무시하는 것이 없는지 확인하십시오. – Morpheus

+0

어떤 것이 우선 적용되는지 어떻게 알 수 있습니까? @Morpheus –

답변

1

이것이 순수한 html 인 경우 코드가 정상적으로 처리되며 css가 단순히로드되고 읽히지 않고 있거나 나중에 나중에 덮어 쓰여지고 있음이 분명합니다.

important (예 : color: #999 ! important;)을 적용하여 변경 사항이 표시되는지 확인할 수 있습니다. 그렇다면 CSS 속성이 다른 곳에 덮어 쓰여지고 있음을 알 수 있습니다.

한편, Asp.Net 및 MVC 캐싱이 여기에서 몇 가지 문제를 일으키는 것을 보았습니다. 사이트를 삭제하고 처음부터 다시 게시하여 변경 사항이 있는지 확인할 수도 있습니다.

업데이트 :이 문제가 될 수있다 생각

:

input, textarea { 
    border: 1px solid #e2e2e2; 
    background: #fff; 
    color: #333; 
    font-size: 1.2em; 
    margin: 5px 0 6px 0; 
    padding: 5px; 
    width: 300px; 
} 

이 유형 input에 대한 스타일을 지정, 그래서 이것은 .fakeBtn { ...} 다음에 오는 경우, 그 스타일이 대신 적용됩니다 (ofcourse가 아닌 한, ! important;을 포함하는 다른 명령문에 의해서만 덮어 쓰기가 가능하도록 명령문의 일부에 ! important;을 추가했습니다.

아마도 가장 좋은 해결책은 섹션에 특정 클래스를 추가하는 것입니다 : input, textarea { ...}. 그렇게하면 일반적으로 다른 입력 필드를 덮어 쓰지 않습니다.

+0

유일한 업데이트와 다를 수 있습니다'font-size' – Morpheus

+0

@Morpheus 내 원래의 대답을 의미하는 것 같습니까? 네가 그 예를 적용한다면 네, 그렇습니다. 그렇기 때문에 나는 "like"라는 단어를 사용했습니다. 적용! 중요하다. "나머지 부동산에도 마찬가지로 효과가있다. – Kjartan

+0

두 선언을 한 곳에서 추가하는 것에 대해 이야기하고 있습니다 ('.fakeBtn'와 업데이트 중 하나). _caching은 여기에 몇 가지 문제를 일으킬 수 있습니다. 이것은 옵션 일 수 있습니다. – Morpheus

1

CSS는 괜찮아 보입니다.

Firebug를 사용하여 적용되는 스타일과 덮어 쓸 내용을 확인하십시오.

버튼 스타일을 지정하고 CSS를 무시하는 다른 CSS 규칙이 있다고 생각됩니다.

관련 문제