CSS 셀렉터. 선택기의 유형

, 특정 색상을 설정하려면 각각의. 그것을 어떻게? 표준 CSS 선택기은 한 번에 모든 블록에 대한 매개 변수를 표시, 태그 적합하지 않습니다. 해결책은 간단하다. 클래스 멤버를 지정합니다. 클래스 = '블루', 세 번째 - - 클래스 = '녹색'예를 들어, 첫 번째 '빨간색', 두 번째 = DIV 클래스를 받았다. 이제 그들은 CSS 테이블을 사용하여 선택할 수 있습니다.

구문은 다음과 같습니다 클래스의 이름을 기록하여 뒤에 점 ( ".")를 나타냅니다. 첫 번째 장치를 관리하려면 .red 건설을 사용합니다. 둘째 - 등등 .blue합니다.

중요! 클래스 속성의 의미있는 값을 사용하는 것이 좋습니다. 음역 (예를 들어, krasiviy-BLOK) 또는 문자 / 숫자의 임의 조합 (ojfh834871)를 사용하는 것은 좋지 않습니다. 이 코드에서, 당신은 후 프로젝트에 종사 할 것이다 사람들을 직면하게 될 어려움은 말할 것도없고, 혼란스러워하는 바인딩됩니다. 가장 좋은 방법은 - 같은 BEM로, 어떤 방법을 사용할 수 있습니다.

장점 - 상대적으로 높은 유연성을 제공합니다.

단점 - 상기 복수의 요소들은 하나들이 동시에 편집되는 것을 의미 동일한 클래스 일 수있다. 문제는 전처리의 방법뿐만 아니라 상속을 사용하여 해결된다. 그들은 크게 작업을 단순화, 말대꾸 또는 다른 전처리, 손이 덜 얻을해야합니다.

ID 선택

이 버전에 대한 의견 코더와 프로그래머는 모호하다. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. 부정확 한 응용 프로그램에서 그들이 상속 문제가 발생할 수 있기 때문에 일부 CSS 자습서, ID의 사용을 권장하지 않습니다. 그러나 많은 전문가들은 적극적있는 레이아웃을 통해 그것들을 배열합니다. 당신이 결정. # »), затем имя блока. 파운드 기호 ( "#"), 블록의 다음 이름을 : 구문은 다음과 같습니다. #red. 예를 들어, #red.

отличается от класса по нескольким параметрам. ID는 여러 가지 방법으로 클래스 다르다. ID. 먼저, 두 페이지 ID와 동일 할 수 없다. 그들은 고유 한 이름을 할당됩니다. 둘째로, 이러한 선택은 높은 우선 순위를 갖는다. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. 이것은 당신이 빨간 단위 클래스를 지정하고 CSS 테이블에 빨간색 지정하면 것을 의미 배경색을, 다음 파란색 여기에 같은 ID를 지정하고 블루 색상을 지정, 장치가 파란색으로 바뀝니다.

장점 - 당신은 태그와 클래스의 스타일을 무시하고, 특정 요소를 제어 할 수 있습니다.

ID и class. 단점 - 쉬운 ID와 클래스의 많은 수에서 분실합니다.

중요! ID вам, в общем-то, не нужны. 당신이 당신에게 BEM 방법론 (또는 유사), ID를 사용하는 경우, 일반적으로 필요하지 않습니다. 이 기술은 레이아웃의 고유 클래스 훨씬 더 편리의 사용을 포함한다.

보편적 인 선택

{}. 구문 : 여배우 기호 ( "*")와 중괄호, 즉, {*} ...

특정 번 속성 페이지의 모든 요소를 지정하는 데 사용됩니다. 이 유용 할 수 있습니까? box-sizing: border-box. 예를 들어, 당신은 페이지의 속성 상자 크기 조정 설정하려면 : 경계 상자를. div *{}. 단지 문서의 모든 구성 요소를 관리하는 데 사용할 수 없습니다뿐만 아니라 예를 들어 지정된 블록의 모든 아이들을, 제어, 사업부의 * {}.

장점 - 당신은 한 번에 많은 수의 항목을 제어 할 수 있습니다.

단점 - 충분하지 유연한 옵션을 선택합니다. 또한,이 셀렉터의 사용은, 어떤 경우에는 페이지 작업 속도를 느리게.

속성 별

그것이 가능한 특정 속성을 가진 요소를 제어 할 수 있습니다. 예를 들어, 다른 속성 유형 입력 태그의 번호를 가지고있다. 그 중 하나 - 텍스트, 두 번째 - 암호, 세 번째 - 수. 물론, 각 클래스 나 ID를 설정할 수 있지만 항상 편리하지 않습니다. 속성의 CSS 선택기는 가능한 최대 정밀도로 특정 태그의 값을 지정 할 수 있습니다. 예를 들어, 다음과 같습니다 :

입력 [타입 = '문자'] {}

이 선택은 입력 텍스트의 유형을 가진 모든 속성을 선택합니다.

이 도구는 매우 유연하고 속성이있을 수있는 태그의 사용할 수 있습니다. 하지만 그게 전부가 아니에요! CSS의 사양은 더욱 편리 요소를 제어 할 수있는 능력이있다!

"이름을 입력"을 입력 자리 = "비밀번호를 입력"= 페이지가 속성의 자리로 입력을 가지고 있다고 상상해보십시오. 그들은 또한 선택기를 사용하여 선택할 수 있습니다! 이렇게하려면 다음과 같은 구조를 사용합니다 :

입력 [자리 = "이름을 입력하세요"{} 또는 입력 [자리 = "비밀번호를 입력"]

속성 아마도 더 유연한 작업. 의 당신이 유사한 속성 제목 (예를 들어, "카스피"와 "카스피")와 태그의 번호를 가지고 있다고 가정 해 봅시다. 모두를 선택하려면 다음 선택 항목을 사용 :

[타이틀 * = "카스 피스크"]

CSS는 "카스피", 즉. E., 그리고 '카스피'와 '카스피'의 상징이있는의 제목에있는 모든 항목을 선택합니다.

또한 특정 문자 속성을 시작 태그를 선택할 수 있습니다 :

[제목 ^ = "문자 당신이 원하는"] {}

하거나 종료 :

[제목 $ = "잘 자"] {}.

장점 - 최대의 유연성을 제공합니다. 당신은 클래스 덤비는없이 기존의 페이지 요소를 선택할 수 있습니다.

단점 - 특정 경우에, 상대적으로 거의 사용하지 않습니다. 포인트 클래스는 많은 준비하는 것보다 더 쉽게이기 때문에 많은 웹 디자이너는 방법을 선호 대괄호 "동일한"징후. 또한, 이러한 선택자는 Internet Explorer 버전 7 이하에서 작동하지 않습니다. 그러나 지금은 이전 Internet Explorer를 필요로하는 사람인가?

의사 클래스 선택기

의사 상태 요소를 나타냅니다. 예를 들어, : 호버를 들어 - 당신이 마우스를 가져 가면 페이지의 일부가 어떻게되는지, : 방문 - 방문한 링크를. 첫 아이 : 마지막 아이는 또한 다음과 같은 요소를 포함한다.

그 덕분에 자바 스크립트를 사용하지 않고 페이지 "라이브"를 만들 수 있기 때문에 선택의이 유형은 적극적으로 현대 레이아웃에 사용됩니다. 예를 들어, 당신은 당신이 그것의 색깔이 변경 BTN의 클래스와 버튼 위에 마우스를 가져 가면 있는지 확인하려면. 이를 위해 우리는 다음과 같은 구조를 사용 :

.btn : 가져가 {

배경 색상 : 빨강;

}

이 경우, 버튼을 즉시 부끄러워하지 않으며, 0.5 초 이내 - 뷰티 예를 들어, 0.5 초, 버튼, 전환 속성의 기본 속성에 지정할 수 있습니다.

미덕은 - 널리 페이지의 "부활"에 사용됩니다. 사용하기 쉽습니다.

단점 - 그들은하지 않습니다. 이것은 정말 편리한 도구입니다. 그러나 경험이 웹 디자이너는 의사 클래스의 풍부에서 분실 할 수 있습니다. 문제는 연구와 연습을 해결된다.

의사 선택기

"의사는"- 다음은 HTML에없는 페이지의 부분입니다,하지만 그들은 여전히 관리 할 수 있습니다. 당신은 이해하지 못했다? 그것은 것보다 훨씬 쉽다. 예를 들어, 다른 작은 검은 색 텍스트를 떠나, 문자열의 첫 번째 문자가 크고 붉은 만들고 싶어. 물론, 특정 클래스가있는 범위에서 그 편지를 체결 할 수 있지만, 그것은 길고 지루한입니다. 전체 단락을 선택하고 의사 :: 첫 번째 문자를 사용하는 것이 훨씬 쉽습니다. 그것은 첫 글자의 모양을 제어 할 수있는 기회를 제공합니다.

의사 요소의 꽤 많은 수 있습니다. 하나의 기사에서 그 (것)들을 나열하는 것은 성공하기 어렵다. 당신은 당신의 마음에 드는 검색 엔진에서 관련 정보를 찾을 수 있습니다.

장점 - 페이지의 모양을 사용자 정의 할 수있는 유연성을 제공한다.

단점 - 그들에게 새로운 종종 혼동된다. 특정 브라우저에서 이런 종류의 작업의 많은 선택.

요약하면

선택기 - 문서 흐름 제어를위한 강력한 도구입니다. 그 덕분에, 당신은 페이지의 모든 단일 구성 요소를 선택할 수 있습니다 (부분적도있다). 사용할 수있는 모든 옵션을 보려면, 또는 그것들을 적어주십시오. 복잡한 현대적인 디자인과 페이지와 상호 작용 요소를 많이 만들 경우에 특히 중요합니다.