goodsource

하나의 선택기로 모든 태그를 대상으로 할 수 있습니까? 한 페이지의 모든 태그를 대상으로 하고 싶습니다.이런 식으로 할 수 있다는 걸 알아요 h1, h2, h3, h4, h5, h6 { font: 32px/42px trajan-pro-1,trajan-pro-2; } 그러나 고급 CSS 셀렉터를 사용하여 이를 수행하는 더 효율적인 방법이 있습니까? 예를 들어 다음과 같은 것이 있습니다. [att^=h] { font: 32px/42px trajan-pro-1,trajan-pro-2; } (하지만 분명히 이것은 효과가 없습니다.)아니요, 쉼표로 구분된 목록이 이 경우 원하는 목록입니다.SASS를 사용하는 경우 다음 믹스를 사용할 수도 있습니다. @mixin headings { h1, h2, h3, h4, h5..

오버레이를 위해 CSS 글래스/블러 효과가 작동하도록 하려면 어떻게 해야 합니까? 반투명 오버레이 디브에 블러 효과를 적용하는 데 어려움을 겪고 있습니다.디브 뒤에 있는 모든 것들을 흐릿하게 해주세요, 이런 식으로. 여기 작동하지 않는 jsfiddle http://jsfiddle.net/u2y2091z/ 이 있습니다. 어떻게 하면 이 일을 해낼 수 있을까요?이것을 가능한 한 복잡하게 유지하고 크로스 브라우저로 만들고 싶습니다.제가 사용하고 있는 CSS는 다음과 같습니다. #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px);..

커서를 손가락 포인터로 변경 나는 이것을 가지고 있다.a커서가 일반 링크처럼 손가락 포인터로 변경되도록 "on mouseover"에 삽입해야 하는지 모르겠습니다. A 나는 내가 써야 할 곳을 읽었습니다: onmouseover="cursor: hand (a pointing hand)" 하지만 저한테는 효과가 없어요. 게다가 나는 이것이 자바스크립트, CSS, 아니면 그냥 평범한 HTML로 간주되는지 확신할 수 없습니다. A CSS입니다. 또는 스타일시트에서: a.menu_links { cursor: pointer; } CSS에서 이 작업을 수행할 수 있습니다. a.menu_links { cursor: pointer; } 이것은 실제로 링크의 기본 동작입니다.의 다른 "" "" "" "" "" "" "" "..

부모 내부의 마지막 자식이 아닌 특정 클래스가 있는 마지막 요소를 선택하려면 어떻게 해야 합니까? hello 선택합니다.#com19? .comment { width:470px; border-bottom:1px dotted #f0f0f0; margin-bottom:10px; } .comment:last-child { border-bottom:none; margin-bottom:0; } 그것은 다른 것이 있는 한 작동하지 않습니다.div.something댓글 목록의 실제 마지막 아이로 표시됩니다.이 경우 마지막 자식 선택기를 사용하여 마지막 모양을 선택할 수 있습니까?article.comment? jsFiddle:last-child문제의 요소가 특정 유형의 요소의 마지막 자식이 아닌 컨테이너의 마지막 자식인..

텍스트 입력 필드에 대한 CSS 선택기? CSS 선택기를 사용하여 '텍스트' 유형의 입력 필드를 어떻게 대상으로 지정할 수 있습니까?input[type=text] 또는 양식 내부의 텍스트 입력으로 제한합니다. form input[type=text] 또는 ID가 있다고 가정하여 특정 형식으로 더 제한합니다.myForm #myForm input[type=text] 주의: IE6에서는 지원되지 않으므로 IE6용으로 개발하려면 IE7.js(이장이 제안한 대로)를 사용하거나 모든 텍스트 입력에 클래스를 추가하십시오. 참조: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors 속성 선택기로 기본 속성 값을 항상 선택할 수 있는 것은 아니므로 텍스트 입력이 렌더..

텍스트 영역 - x 또는 y에서 크기 조정을 비활성화하시겠습니까? 의 크기 조정을 사용하지 않을 수 있습니다.textarea사용: textarea { resize: none; } 하지만 둘 다 사용하지 않고 x 또는 y 중 하나를 사용하지 않도록 설정할 수 있습니까?resize: vertical; 또는 resize: horizontal; 빠른 바이올린: http://jsfiddle.net/LLrh7Lte/물론 css와 jquery로 가능합니다. CSS: resize: vertical; resize: horizontal; jQuery $('textarea').css("resize", "vertical"); $('textarea').css("resize", "horizontal"); 부트스트랩이 방금 클래스..

div 높이를 배경 크기로 자동 조정하려면 어떻게 해야 합니까? div가 특정 높이(또는 최소 높이)를 설정하지 않고 설정한 배경 크기에 자동으로 조정되도록 하려면 어떻게 해야 합니까?배경 이미지가 마치 컴퓨터처럼 작동하도록 만드는 아주 멋지고 멋진 방법이 있습니다.img할 수 .height. 이미지를 알아야 .width그리고.height비율을 설정합니다.height합니다.padding-top이미지 비율을 기준으로 한 백분율입니다. 다음과 같이 표시됩니다. div { background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg'); ..

두 줄의 텍스트 오버플로 줄임표 CSS 규칙의 조합을 사용하여 넘칠 때 텍스트를 줄임표(...)로 끝낼 수 있다는 것을 알고 있습니다(부모의 경계에서 벗어남). 동일한 효과를 달성하는 것이 가능합니까(자유롭게 아니오라고 말하십시오), 그러나 텍스트를 두 줄 이상으로 묶어야 합니까? 여기 데모가 있습니다. div { width: 300px; height: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 보시다시피, 텍스트는 div의 너비보다 넓을 때 생략형으로 끝납니다.그러나 텍스트를 두 번째 줄로 묶고 계속할 수 있는 충분한 공간이 있습니다.이 작업은 다음에 의해 중단됩니다.white-space: nowrap그것은 타원이 작..

Chrome의 CSS 사용자 지정 스타일 단추에서 파란색 테두리 제거 웹 페이지에서 작업 중이며 맞춤형으로 제작하고 싶습니다.그래서 CSS를 사용해서 다음과 같이 말했어요.border: none사파리에서는 완벽하게 작동하지만 크롬에서는 버튼 중 하나를 클릭하면 짜증나는 파란색 테두리가 둘러져 있습니다.내 생각에는 말이지…button:active { outline: none }또는button:focus { outline:none }효과는 있겠지만, 둘 다 그렇지 않습니다.아이디어 있어요? 다음은 클릭하기 전의 상태입니다(클릭된 후에도 계속 표시하기를 원합니다). 여기가 제가 말하는 국경입니다. 여기 제 CSS가 있습니다. button.launch { background-color: #F9A300; bord..

Flexbox 항목 간의 거리를 설정하려면 어떻게 해야 합니까? 하려면 사용 flexbox 항목을 사용합니다.margin: 0 5px.item그리고.margin: 0 -5px요.이건 해킹인 것 같아요.이 목표를 달성하기 위한 다른 속성이나 방법이 있습니까? #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } gap속성: 이제 새로운 브라우저에서 작동하는 다중 열, 플렉스박스 및 그리드 레이아웃을 위한 새로운 CSS 속성이 있습니다! (링크 1; 링크 2 참조).의 줄임말입니다.row-gap그리고.column-gap. #box { disp..