CSS 선택기에는 어떤 유형이 있나요? 일반적인 CSS 선택기에 대한 간략한 소개-CSS 튜토리얼-php.cn

CSS 선택기에는 어떤 유형이 있나요? 일반적인 CSS 선택기에 대한 간략한 소개

不言

풀어 주다： 2018-08-09 15:59:48

원래의

4066명이 탐색했습니다.

이 글에서는 CSS 선택기 사용 방법에 대한 정보를 제공합니다. 어떤 유형이 있나요? 일반적으로 사용되는 CSS 선택기에 대한 간략한 소개는 특정 참조 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

css 태그 선택기

기능: 페이지에 지정된 모든 요소 선택

구문: 태그 이름: {}

id selector

기능: id 속성 값을 통해 요소에서 유일한 요소 선택

구문: #id{}

css 클래스 선택기

기능: 요소의 클래스 속성 값을 통해 요소 그룹 선택

구문: .class 속성 값{}

에서 한 요소에 대해 여러 요소를 설정할 수 있습니다. 동일한 시간 클래스 속성 값, 여러 값은 공백으로 구분됩니다

선택자 그룹화(Union Selector)

기능: 선택자 그룹화를 통해 여러 선택자에 해당하는 요소를 동시에 선택할 수 있습니다

Syntax: Selector 1, Selector 2, Selector N{}

예: ID를 p3으로 선택하고 클래스 속성 값에 p2 및 h1 태그가 포함됨

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

로그인 후 복사

css 와일드카드 선택기

기능: 페이지의 모든 요소 선택

구문: *{}

css 교차 선택기(복합 선택기)

기능: 여러 선택기를 동시에 만족하는 요소를 선택할 수 있습니다.

구문: Selector 1 Selector 2 Selector N{}

참고: id는 고유하게 요소를 결정하려면 ID에 대한 교차 선택기를 사용하지 마세요.

예: 클래스 속성 값에 p4

span.p4{
                                    background-color:#4169E1;
                           }

로그인 후 복사

가 포함된 범위를 선택하세요.

요소 간의 관계:

상위 요소: 하위 요소를 직접 포함하는 요소입니다.

하위 요소: 상위 요소에 직접 포함된 요소입니다.

조상 요소: 하위 요소를 직접 또는 간략하게 포함하는 요소입니다. 상위 요소도 상위 요소입니다.

하위 요소: 상위 요소에 직접 또는 간접적으로 포함되는 요소와 하위 요소도 하위 요소입니다.

형제 요소: 동일한 상위 요소를 가진 요소입니다.

css 하위 요소 선택기

기능: 지정된 요소의 하위 요소 선택

구문: 상위 요소 하위 요소 {}

예: div에서 범위 선택

  div span {
                                        color: chartreuse;
                                }

로그인 후 복사

css 하위 요소 선택기(IE6 및 다음 브라우저는 지원하지 않습니다)

기능: 지정된 상위 요소의 지정된 하위 요소 선택

구문: 상위 요소>하위 요소

예: div에서 범위 선택

                 div>span{
                              background-color: yellow;
                     }

로그인 후 복사

의사 클래스 선택기를 사용하여 요소는 특별한 상태입니다.

예: 방문한 하이퍼링크, 일반 하이퍼링크, 포커스가 있는 텍스트 상자

이러한 특수 상태의 요소에 대한 스타일을 설정해야 하는 경우 의사 클래스를 사용하여 연결 스타일을 정의할 수 있습니다

일반 링크: a: link

방문한 링크: a:visited (색상만 정의 가능)

마우스가 슬라이드된 링크: a:hover

클릭 중인 링크: a:active

a:link 및 a: 방문한 순서 지정되지는 않았지만 a:hover 및 a:active 앞에 있어야 하며 a:hover는 a:active

hover 앞에 있어야 하며 p:hover p:와 같은 다른 요소에 대해서도 active를 설정할 수 있습니다. active 그러나 IE6 이하는

을 지원하지 않습니다. 다른 가상 클래스:

:focus 포커스 가져오기

:before 요소 지정 전

:after 요소 지정 후

::selection 선택한 요소(이것은 Firefox에서 사용됨::- moz-selection)

의사 요소를 사용하여 요소의 일부 특수 위치를 나타냅니다

:first-letter: 첫 번째 문자

:fist-line: 첫 번째 문자 줄

:before: 요소의 앞부분을 나타냅니다.

일반적으로 before는 콘텐츠 스타일과 함께 사용해야 합니다.

content를 통해 before 또는 after 위치에 일부 콘텐츠를 추가할 수 있습니다.

:after:를 나타냅니다. 요소의 마지막 면

p 태그에 첫 번째 문자 넣기 노란색으로 설정 25px

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

로그인 후 복사

css 속성 선택기

기능: 요소의 속성 또는 속성 값을 기반으로 지정된 요소를 선택할 수 있습니다

구문: [속성 이름] 지정된 속성을 가진 요소 선택

[속성 이름 =속성 값] 지정된 속성 값을 포함하는 요소 선택

[속성 이름^=속성 값] 속성 값이 지정된 콘텐츠로 시작하는 요소 선택

[속성명$=속성값] 속성값이 지정된 콘텐츠로 끝나는 요소 선택

[속성값*=속성값] 지정된 콘텐츠가 속성값에 포함된 요소 선택

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

로그인 후 복사

의사 클래스 하위 요소 선택기

:first-child : 첫 번째 하위 요소를 선택할 수 있습니다.

:last-child : 마지막 요소를 선택할 수 있습니다.

:nth-child : 임의 위치에서 하위 요소를 선택할 수 있습니다.

매개변수를 지정할 수 있습니다. 선택할 요소를 지정하는 선택기 뒤에

even: 짝수

odd: 홀수 -of-type

last-of-type

nth-of-type

은 xxx-chlid와 유사하지만 xxx -child는 모든 요소 중에서 선택되고, xxx-of-type은 지정된 유형에서 선택됩니다

예: 첫 번째 p 태그 선택

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

로그인 후 복사

다음 형제 요소 선택기

기능: 바로 뒤에 지정된 형제 요소를 선택할 수 있습니다. 요소

语法：前一个+后一个

例：选中p标签后的相邻的兄弟span（p和span不一定相邻）

  p+span{
                                     color:red;
                            }

로그인 후 복사

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

로그인 후 복사