2009-06-01 4 views
1

저는 Firebug 및 Web Developer Firefox 확장을 사용합니다. 내가 찾고있는이 기능이 웹 페이지 원본을보고있을 때 클래스 또는 ID 이름을 클릭하고 어딘가에 클래스 또는 ID의 정의를 표시하려고 할 때이 확장 기능에 존재하는지 여부는 확실하지 않습니다. CSS 상속 계층 구조가 아닙니다.인라인 CSS 클래스 또는 ID 정의를 표시하는 Firefox 확장?

..... 나는 "헤더"를 클릭하고 난 CSS 정의를 얻거나 그것은 나를 아무도 없다 알려줍니다 : 그냥 특정 클래스 또는 ID는 예를 들어

존재합니다. 그 클래스를 표시하기 위해 CSS 트리 계층 구조를 필터링하고 싶습니다.

확장 프로그램을 사용할 수 있습니까?

+0

? 예 : "#header"와 정확히 일치하는 CSS 선택기 또는 "#header"가 포함 된 선택기 만 원하십니까? – mercator

답변

0

Firebugcan do that. HTML 탭을 열고 관심있는 요소를 선택하십시오. 스타일 탭 아래의 방화 상자 창의 오른쪽 상자를보십시오. 여기에 ID, 클래스 또는 다른 유형의 선택기로 요소에 적용된 각 스타일이 표시됩니다. 또한 레이아웃 탭을 선택하여 선택한 요소의 간격 띄우기, 여백, 패딩 및 너비를 볼 수 있습니다. 이것은 (나는 생각하지 않는다) 소스에서 그것을하지 않습니다

body {   /* File: all.css?v=3496 (row 1) */ 
    background:#FFFFFF none repeat scroll 0 0; 
    color:#000000; 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:80%; 
    text-align:center; 
} 
body {   /* File: all.css?v=3496 (rad 1) */ 
    line-height:1; 
} 
/* + A lot of reset styles for all elements */ 
+0

그건 내가 원하는 것이 아니에요. 필자는 CSS 계층을보고 싶지 않다고 말했고 파이어 버그가 표시합니다. 요소가 아닌 클래스 이름을 클릭하고 싶습니다. – Abdu

+0

오, 좋아, 내 잘못. 하지만 파이어 버그는 여전히 클래스/아이디가 스타일 탭에 스타일을 가지고 있는지 보여줄 것입니다. 클래스/ID가 여기에 나열되어 있지 않으면 선언 된 스타일이 없습니다 ... – PatrikAkerstrand

0

: 나는 - 요소를 클릭하면 여기에 StackOverflow에 예를 들어

는, 나는 다음을 참조 그러나 그것을 페이지에서합니다. CSSViewer가 도움이됩니까?

https://addons.mozilla.org/en-US/firefox/addon/2104

정확히으로 뜻 "이 클래스 또는 ID의 정의를 표시합니다"무엇