CSS 선택기 예제 공유

이제 CSS의 대부분의 선택기와 유사한 jquery 선택기를 사용하는 방법을 배우고 있습니다. 다음은 향후 비교 및 ​​연구를 위한 CSS 선택기에 대한 요약입니다. ： 첫째, 요소 선택기: yuan yuan 패턴 선택 장치:*{}는 일반적으로 브라우저 자체 효과를 전역적으로 제거하는 데 사용됩니다. 특정 브라우저에는 효과가 제공됩니다.

ID 선택기: #MyId {}는 일반적으로 특정 효과를 지정하는 데 사용됩니다. 또는 지정된 특별 지역의 경우. 단 하나의 ID 특성을 활용하는 방법을 배웁니다

클래스 선택기: .myclass{}는 주로 특수 효과를 설정하는 데 사용되며, 클래스를 사용하면 여러 특성을 사용하여 웹 페이지 레이아웃을 구성할 수 있습니다.

두 번째, 관계 선택기: F 포함 선택기 : E f(여기서 기호는 공백, 관계 선택기임)는 웹페이지 효과 시간을 설정할 때 오랫동안 사용되는 것으로 알고 있습니다. 현재는 정확한 위치를 찾는 데 사용되는 것으로 알고 있습니다.

참고: 선택기를 포함하여 어떤 곳에서는 서브클래스 선택자라고도 불리며, 여기의 서브클래스는 아래와 같이 아무리 깊게 중첩되어도 구현됩니다.                          ‐ ‐ ‐  ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​이것은 하위 요소의 하위 요소가 아닌 상위 요소의 다음 수준 하위 요소일 수 있습니다. 요소. 위의 하위 클래스 선택기와 구별하시기 바랍니다. 인접 선택자: E+F 다른 요소 뒤에 있는 요소를 선택하고 두 요소가 동일한 상위 요소를 갖고 있는 경우 인접 형제 선택자를 사용할 수 있습니다. E 형제 선택 장치: E ~ F E 요소 중 모든 형제 요소 f를 선택합니다.了 참고: 여기서는 개발에 일반적으로 사용되지 않는 E를 제외하고 동일한 요소를 모두 선택합니다.

셋째, 속성 선택자: (덜 자주 사용됨)

                                속성 선택자 분류: E[att], E[att="val"] , E[att~ ="발" ], E[att^="val"], E[att$="val"], E[att*="val"]
, E[att|="val"]

                                                                                        E [att]: att 속성이 있는 E 요소를 선택하세요

: att 속성과 속성 값이 val

인 E 요소를 선택하세요.
주어진 E 요소가 val과 동일한 단어 목록입니다.

                                    

             ~                                                        ​

val로 끝나는 문자열의 E 요소

                                                                                        E [att|="val"]: t 속성과 속성 값은 val로 시작하고 커넥터 "-"로 구분된 문자열입니다.

요약: 공백에는 ~를 사용하고 시작과 끝에는 각각 ^ 및 $를 사용하고 포함에는 *를 사용하고 특수 |
넷째, 의사 클래스 선택기: ( Focus, 일부 특별한 레이아웃 효과에 사용됨)                                                E:visited 방문 후 스타일

E: 하이퍼링크 위에 마우스를 올리면 (종종 사용)
V E: 마우스 클릭과 놓기 사이에 활성 이벤트가 발생했습니다. E: 포커스를 얻었을 때 포커스가 해제됩니다. ​​​​E:not() 특정 항목을 취소하는 데 사용되는 s 선택자를 포함하지 않는 요소 E와 일치합니다. 선택기

                                                                                    ~                                                       이후 html에서 루트 요소는 항상 html입니다. ㅋㅋ                                                                           ​요소 E 참고: 콘텐츠의 양이 많을 때 특정 특수 효과를 설정합니다

C E: Last-Child는 상위 요소의 마지막 하위 요소와 일치합니다. (여기서 jquery에서 사용하는 것을 기억하세요)

E: NTH-Child (n) 상위 요소와 일치하는 nn 하위 요소 참고: 여기에서는 짝수 또는 홀수의 문법 설정을 통해 설정할 수 있습니다. (기본)

E:n번째-마지막-자식 (n) 상위 요소의 맨 아래부터 n번째 하위 요소 E와 일치합니다.

🎜🎜 O E의 첫 번째 형제 요소 E: Last-OF-TYPE 🎜 동일한 유형 e에 있는 동일한 클래스의 마지막 형제 요소와 일치합니다🎜 🎜🎜🎜🎜🎜🎜 🎜E: only-of-type 🎜🎜 동일한 유형의 Brother 요소 E🎜🎜🎜🎜🎜에 있는 유일한 항목과 일치​​​​E:nth-last-of-type 동일한 유형과 일치 n번째 형제 요소 E

하위 요소 없이 요소 E와 일치합니다. 참고: 하위 요소가 없을 뿐만 아니라 또한 내부에는 아무것도 표시되지 않습니다. ~                                                      E: 선택함 (입력 유형이 라디오 및 체크박스일 때 사용)

                                                                                   ~                                                   . 말 그대로
                                                                                                                                                                                      말 그대로

                                                                                           이메일 ee

다섯번째, 의사 객체 선택자: 일반적으로 사용되는 항목:
::이전에는 이중 콜론을 쓰는 것이 권장되는 작성 방식이지만, 단일 콜론도 여전히 적용 가능합니다C E :: SELECTION 객체 선택 시 객체 설정 (일반적으로 B, 진지한 얼굴의 일부 특수 효과 텍스트 표시를 표시하는 데 사용됩니다. 두 개의 콜로니에 주의하세요)

E: first-line/e :: first-line settings 객체 내부의 첫 번째 줄 스타일(쓰기에는 너무 게으르고 어차피 많이 사용하지 않습니다. 도움말 문서를 볼 수 있습니다.)

E: FIRST-LTTER/E :: FIRSET-LTTER 개체의 첫 번째 문자를 설정합니다(이것은 글이 많이 쓰이고, 확실히 지금은 덜 쓰인다)

관련 추천:

CSS 선택기의 새로운 사용법에 대한 자세한 설명

CSS 선택기 필드 파싱 구현 방법

CSS 선택기 Selector에 대한 자세한 설명

위 내용은 CSS 선택기 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!