CSS 튜토리얼 - CSS 인접 선택기. 인접 선택기 이 코드에서 인접한 태그는 무엇입니까?
CSS 구문은 간단하며 이를 이해하기 위해 IT 분야 박사 학위가 필요하지 않습니다. 그러나 이는 진정한 의미에서 논리적이지 않은 몇 안 되는 인기 언어 중 하나입니다. JavaScript, PHP 등 다른 웹 프로그래밍 언어와 달리 CSS는 기존 논리를 사용하여 문제를 해결하지 않습니다. "X라면 Y를 수행하고 그렇지 않으면 Z를 수행합니다" 또는 "Y를 모두 선택한 다음 Y를 수행합니다"와 같은 알고리즘은 CSS와 같은 언어로 구현할 수 없습니다. 간단히 말해서, 디자인을 위해 만들어진 언어, 개발자가 아닌 디자이너를 위한 언어입니다. 나와 함께 일했던 숙련된 프로그래머 중 일부는 바로 이러한 이유로 CSS를 익히는 데 많은 노력을 기울였습니다.
CSS 학습은 클래스와 ID, 사용법부터 시작됩니다. # 요소를 직접 지정하는 경우입니다. 이는 완전한 기능을 갖춘 웹 사이트를 구축하기에 충분하지만 디자인이 완전히 변경되는 경우에는 충분히 유연한 솔루션이 아닙니다. 이러한 접근하기 어려운 항목을 관리하는 대체 접근 방식을 살펴보겠습니다.
이웃 관련 결합자
복잡한 상황에서 편리한 선택자, 즉 인접 관련 결합자부터 시작해 보겠습니다. 인접한 관련 결합자는 + 기호를 사용하여 두 요소를 연결하여 표시됩니다.H1+p
그러면 DOM에서 h1 요소 바로 뒤에 위치한 다음 p 요소가 선택됩니다. 타이포그래피 이론에서는 텍스트 단락에서 들여쓰기를 사용해야 하지만 다른 단락 뒤에 오는 경우에만 들여쓰기를 사용해야 한다고 제안합니다. 실제로 이것은 첫 번째 단락을 제외한 모든 단락을 들여쓰는 데 사용할 수 있습니다.
p + p (텍스트 들여쓰기: 1em; )
이는 class="first"를 사용하여 첫 번째 단락을 강조 표시하는 것보다 훨씬 편리합니다. 세 줄, 클래스 없음, 전체 브라우저 지원. p 태그 안에 사이트 콘텐츠와 관련된 img 태그를 배치하는 경우(실제로 그렇게 해야 함) -1em의 음수 값을 사용하여 왼쪽 여백을 뒤로 이동할 수 있습니다.
p + p img (왼쪽 여백: -1em; )
아주 간단하죠? 다른 모든 단락을 변경하지 않고 제목 바로 뒤에 오는 모든 단락의 첫 번째 줄을 선택하려면 어떻게 해야 합니까? 다시 뷰 클래스를 사용할 수 있습니다. 인접한 복합 결합자와 의사 요소로 만든 간단한 선택기가 해당 작업을 수행합니다.
h1 + p::첫 번째 줄( 글꼴 변형: 작은 대문자; )
참고: pseudo-element:first-line은 CSS 2.1에서 채택되었지만 CSS 3에서는 표기법::을 사용하여 의사 클래스와 의사 요소를 구별합니다.
유전적 결합자
일반적인 마크업 프로토콜은 #page 또는 #wrap의 일부 명명된 요소에 섹션을 배치하는 것입니다.설명
웹 페이지의 요소는 문서 코드에서 서로 바로 뒤에 오는 경우 인접이라고 합니다.
통사론
E + F (스타일 규칙 설명)
인접한 요소의 스타일을 제어하려면 두 선택기 E와 F 사이에 있는 더하기 기호(+)를 사용하세요. 더하기 주위의 공백은 선택 사항입니다. 이 스타일은 요소 F에 적용되지만 요소 E에 인접하고 바로 뒤에 오는 경우에만 적용됩니다. 몇 가지 예를 살펴보겠습니다.
로렘 입숨 슬픔앉아라.
꼬리표 태그의 하위 항목입니다.
이 용기 안에 들어있으니까요. 각기
부모 역할을 함 .
로렘 입숨 슬픔 앉다 amet.
태그 그리고 어떤 식으로든 겹치지 않으며 인접한 요소를 나타냅니다. 컨테이너 내부에 있다는 사실 그들의 태도에는 영향을 미치지 않습니다. 로렘 입숨슬퍼 앉아 amet, 연결자아디 피싱 엘리트.
여기의 이웃 태그는 다음과 같습니다. 그리고 , 그리고 그리고 . 여기서 그리고 인접한 요소는 그 사이에 컨테이너가 있으므로 처리되지 않습니다. .
HTML5 CSS 2.1 IE Cr Op Sa Fx
로렘 입숨슬퍼 앉아 amet, 연결자아디피싱 엘리트.
Lorem ipsum dolor sit amet, 연결자아디피싱 엘리트.
이 예의 결과는 그림 1에 나와 있습니다. 1.
쌀. 1. 인접 선택자의 빨간색 텍스트 색상
브라우저
Internet Explorer 7에서는 선택기(B + /* + */ I) 사이에 주석이 있는 경우 스타일을 적용하지 않습니다.
안녕하세요, 동료 여러분, 오늘 우리는 두 가지 추가 연구를 할 것입니다 선택자라고 불리는 하위 및 인접 CSS 선택기. 더 큰 범위에서는 그것들 없이도 할 수 있지만, 발전을 위해서는 그것들을 배우고 때로는 기억에 남을 수 있도록 적용해야 합니다. 그러므로 무엇인지 토론해 보자. 선택자이웃하고, 어떤 것이 어린이인지, 예를 들어 분석하겠습니다.
하위 CSS 선택기- 상위 요소 내부에 있는 요소입니다. 이에 대한 예는 다음과 같습니다. 문단, 또 다른 블록, 그림을 포함하는 블록이 있습니다. 이 세 가지 요소는 자식입니다. 하위 블록에 다른 요소도 있는 경우 해당 요소는 더 이상 첫 번째 블록의 하위가 아니고 직접 위치한 블록의 하위입니다. 나는 당신이 요점을 이해하기를 바랍니다.
인접한 CSS 선택기- 문서 코드에 차례로 위치한 요소입니다. 이에 대한 예는 다음과 같습니다. 단락과 다음 태그가 있습니다. 기간. 모든 것이 매우 명확하므로 실제 예를 사용하여 모든 것을 살펴보기만 하면 됩니다.
단락의 텍스트
범위 내 텍스트
단락에 더 이상 하위 텍스트가 없습니다.
스타일을 사용하여 태그에 동일한 결과를 추가합니다. 기간
사업부 >스팬(
글꼴 크기: 200%;
}
피 +스팬(
색상: 빨간색;
}
두 경우 모두 코드 실행 결과가 태그에 적용됩니다. 기간, 태그의 하위 항목이기 때문입니다. div그리고 태그 다음 피. 따라서 글꼴이 두 배로 커지고 빨간색이 되었습니다. 이제 우리는 완전히 처리했습니다 CSS의 자식 및 이웃 선택기, 그리고 당신이 해야 할 일은 실제로 지식을 강화하는 것뿐입니다. 곧 만나요!
안녕하세요, 독자 여러분. 이전 글에서는 주로 CSS 스타일 속성을 연구했습니다. 그것들이 많이 있습니다. 일부는 글꼴 매개변수를 설정하고 다른 일부는 배경 매개변수를 설정하며 다른 일부는 들여쓰기 및 프레임 매개변수를 설정합니다.
이번 포스팅에서는 스타일 선택자에 대해 알아보겠습니다. 우리가 이미 다룬 기사 중 하나에서. 오늘은 스타일 규칙을 웹 페이지 요소에 명시적으로 바인딩하지 않는 몇 가지 유형의 선택기를 더 살펴보겠습니다. 이는 소위 특수 선택자입니다. 여러 유형이 있습니다.
CSS의 결합자(인접, 하위 및 컨텍스트 선택자)
결합자다른 요소에 대한 상대적인 위치를 기반으로 웹 페이지 요소에 스타일 규칙을 바인딩하는 CSS 선택기 유형입니다.
첫 번째 결합자 기호 ...을 더한(+) 또는 인접 선택자. Plus는 두 선택기 사이에 설정됩니다.
<селектор 1> + <селектор 2> { <стиль> }
이 경우 스타일이 적용됩니다. 선택기 2, 그러나 인접해 있는 경우에만 해당 선택기 1그리고 바로 뒤에 옵니다. 예를 살펴보겠습니다:
강함 + 나 (
}
...
이는 일반 텍스트입니다. 굵은 글씨입니다, 일반 텍스트, 빨간색 텍스트
이는 일반 텍스트입니다. 굵은 글씨입니다, 일반 텍스트, 그리고 이건 일반 텍스트야.
결과:
예시에 설명된 스타일은 태그에 포함된 첫 번째 텍스트에만 적용됩니다. , 왜냐하면 태그 바로 뒤에 옵니다. .
결합자 틸데(~)는 인접한 선택자에도 적용되지만 이번에는 그 사이에 다른 요소가 있을 수 있습니다. 이 경우 두 선택기는 모두 동일한 상위 태그에 중첩되어야 합니다.
<селектор 1> ~ <селектор 2> { <стиль> }
스타일이 적용됩니다. 선택기 2따라야 할 것 선택기 1. 예를 들어보자:
힘내~나(
색상: 빨간색; /* 빨간색 텍스트 색상 */
}
...
이는 일반 텍스트입니다. 굵은 글씨입니다, 일반 텍스트, 빨간색 텍스트인접 선택기 규칙이 적용됩니다.
이는 일반 텍스트입니다. 굵은 글씨입니다, 일반 텍스트, 그리고 이건 빨간색 글씨야.
결과:
보시다시피 이번에는 스타일 규칙이 태그에 포함된 두 텍스트 모두에 적용되었습니다. , 태그 사이의 두 번째 경우에도 불구하고 그리고 태그의 가치가 있는 .
결합자 > ~을 참고하여 자식 선택자. CSS 스타일을 다른 요소 내에 직접 중첩된 웹 페이지 요소에 바인딩할 수 있습니다.
<селектор 1> > <селектор 2> { <стиль> }
스타일에 묶여있을 것이다 선택기 2에 직접 중첩되어 있습니다. 선택기 1.
div > 강한 (
}
...
이는 일반 텍스트입니다. 그리고 이것은 일반적인 굵은 텍스트입니다.
결과는 다음과 같습니다.
그림에서 볼 수 있듯이 스타일 규칙은 첫 번째 태그에만 영향을 미쳤습니다.
, 태그 내에 직접 중첩됨
, 따라서 규칙은 그에게 적용되지 않습니다. 다음으로 살펴보겠습니다. 컨텍스트 선택기<пробел>
. 이를 통해 CSS 스타일을 다른 요소 내에 중첩된 요소에 바인딩할 수 있으며 어떤 수준의 중첩도 있을 수 있습니다. <селектор 1> <селектор 2> { <стиль> } 스타일이 적용됩니다. 선택기 2, 어떤 식으로든 중첩되어 있는 경우 선택기 1. 이전 예제를 살펴보겠습니다. CSS 규칙을 설명할 때만 컨텍스트 선택기를 사용합니다. div 강한( 이는 일반 텍스트입니다. 그리고 이것도 이탤릭체의 굵은 텍스트입니다. 일반 텍스트 및 그냥 굵은 글씨 결과: 보시다시피 이번에는 규칙이 두 태그 모두에 영향을 미쳤습니다.
, 컨테이너에 중첩된 것조차도
. 태그하려면
, 이는 단순히 단락 내에 중첩되어 있습니다.
CSS 규칙이 전혀 작동하지 않습니다. 속성 선택자는 특정 속성이 포함되어 있는지 또는 특정 값이 있는지 여부에 따라 스타일을 요소에 바인딩하는 특수 선택자입니다. 이러한 선택기를 사용하는 데는 여러 가지 옵션이 있습니다. 다음과 같습니다: <селектор>[<имя атрибута тега>] { <стиль> } 그리고 지정된 속성이 추가된 요소에 스타일을 바인딩합니다. 예를 들어: 강한( 자동차이것은 기계식 모터 트랙리스입니다. 도로 차량최소한 4개의 바퀴가 있어야 합니다. 결과: 그림에서 CSS 규칙(빨간색 텍스트 색상)이 요소에 적용된 것을 볼 수 있습니다. 강한, 속성이 추가됨 제목. 이 선택기의 구문은 다음과 같습니다. <селектор>[<имя атрибута тега>=<значение>] { <стиль> } 바인드 스타일태그에 지정된 속성이 있는 요소에 이름그리고 의미. 예: ㅏ( 결과: 보시다시피 하이퍼링크 유형의 두 요소 모두 속성이 있습니다. 표적, 그러나 태그에는 링크 텍스트를 1.5배 확대하고 색상을 빨간색으로 변경하는 CSS 규칙이 적용됩니다.
누구의 속성 표적의미가있다 "_공백". 클래스 이름 등 일부 속성 값은 공백으로 구분될 수 있습니다. 필수 값이 속성 값 목록에 있을 때 스타일 규칙을 설정하려면 다음 선택기를 사용하십시오. [<имя атрибута тега>~=<значение>] { <стиль> } 속성에 필수 값이 있거나 공백으로 구분된 값 목록의 일부인 경우 스타일이 적용됩니다. 예를 들어: { 우리 전화 : 777-77-77 우리 주소: 모스크바 거리 소베츠카야 5 다음과 같은 결과를 얻게 됩니다: 이 규칙은 속성 값에 다음이 포함된 요소에 적용됩니다. 수업의미가 있다 전화. 식별자 및 클래스 값에는 하이픈이 허용됩니다. 속성 값에 하이픈이 포함될 수 있는 요소에 스타일을 바인딩하려면 다음 구성을 사용할 수 있습니다. [속성|="값"] ( 스타일 ) 스타일은 속성 값이 지정된 값으로 시작하고 뒤에 하이픈이 오는 요소에 적용됩니다. 예를 들어: { 결과: 예제에서 스타일 규칙은 클래스 이름이 value로 시작하는 목록 요소에만 적용됩니다. "메뉴 - ". 이 선택기는 태그 속성 값이 특정 값으로 시작하는 경우 요소의 스타일을 설정합니다. 두 가지 옵션이 있을 수 있습니다. [<имя атрибута тега>^=<подстрока>] { <стиль> } 첫 번째 경우 스타일태그에 지정된 속성이 있는 모든 요소에 적용됩니다. 이름지정된 값으로 시작하는 값 하위 문자열. 두 번째 경우에도 동일합니다. 지정된 특정 요소에만 적용됩니다. 메인 선택기. 예: ㅏ( 결과: 이 예에서는 외부 링크와 내부 링크를 다르게 표시하는 방법을 보여줍니다. 외부 링크는 항상 "http://" 문자열로 시작됩니다. 따라서 선택기에서는 스타일이 속성이 있는 링크에만 적용됨을 나타냅니다. href의미로 시작된다 http://. 속성 값이 지정된 텍스트로 끝나는 요소에 스타일을 바인딩합니다. 다음과 같은 구문이 있습니다. [<имя атрибута тега>$=<подстрока>] { <стиль> } 첫 번째 경우 스타일다음을 갖는 모든 요소에 적용됩니다. 기인하다지정된 이름지정된 것으로 끝나는 의미를 갖습니다. 하위 문자열. 두 번째 경우에도 동일한 내용이 표시됩니다. 선택자. 예를 들어 이러한 방식으로 다양한 그래픽 이미지 형식을 다르게 표시할 수 있습니다. 예를 들어: IMG( GIF 이미지 그림 형식 png 결과: 이 예에서는 gif 확장자를 가진 모든 이미지가 5픽셀 두께의 빨간색 테두리로 표시됩니다. 이 선택기는 속성 값에 특정 텍스트가 포함된 태그에 스타일을 바인딩합니다. 통사론: [<имя атрибута тега>*=<подстрока>] { <стиль> } 스타일다음과 같은 요소에 바인딩됩니다. 기인하다지정된 이름이 있고 그 값에 지정된 내용이 포함되어 있음 하위 문자열. 예를 들어: IMG( 갤러리 폴더의 사진 다른 폴더의 사진 결과: 예제에서는 폴더에서 로드된 사진에 스타일이 적용됩니다. "갤러리". 이것이 속성 선택기에 관한 모든 것입니다. 위의 모든 방법은 서로 결합될 수 있습니다. 선택기[attribute1="value1"][attribute2="value2"] ( 스타일 ) 또한 특수 CSS 선택기에 대해 알려드리겠습니다. 향후 기사에서는 강력한 스타일 관리 도구를 제공하는 의사 요소와 의사 클래스도 살펴보겠습니다. 그게 다야, 또 보자.
글꼴 스타일: 기울임꼴 /* 기울임꼴 */
}
...
태그 속성별 선택기
1. 간단한 속성 선택기
색상: 빨간색;
}
...
2. 값이 있는 속성 선택기
색상: 빨간색;
글꼴 크기:150%;
}
...
.ru" target="_blank">새 창에서 링크
3. 여러 속성 값 중 하나
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
색상: 빨간색;
글꼴 크기:150%;
}
...
4. 속성 값의 하이픈
선택기[속성|="값"] ( 스타일 )
색상: 빨간색;
글꼴 크기:150%;
}
...
5. 속성 값은 특정 텍스트로 시작됩니다.
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
색상:녹색;
글꼴 두께:굵게;
}
...
6. 속성 값은 특정 텍스트로 끝납니다.
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
테두리: 5px 단색 빨간색;
}
...
7. 속성 값에는 지정된 문자열이 포함되어 있습니다.
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
테두리: 5px 단색 빨간색;
}
...
