>웹 프론트엔드 >CSS 튜토리얼 >CSS 선택기 정렬, 의사 클래스 및 의사 객체

CSS 선택기 정렬, 의사 클래스 및 의사 객체

高洛峰
高洛峰원래의
2017-02-09 11:17:342595검색

css 선택자 구성

  • 1. 와일드카드 *

       *{
               margin: 0;
               padding: 0;
           }

    기능: 페이지의 모든 요소의 내부 및 외부 패치를 0으로 설정합니다.

       .class * {
           color:#ffffff;
       }

    클래스 클래스 아래의 모든 요소의 글꼴 색상을 흰색으로 설정합니다.

  • 2. 태그 선택기

        p,
        p,
        a,
        span,
        h1 {
            color: #FFFFFF;
        }

html에 태그가 많습니다. , 태그 선택기를 사용하여 직접 스타일을 지정할 수 있지만 태그 선택기와 와일드카드는 선택 범위가 넓으므로 다른 선택기와 함께 사용하는 것이 좋습니다.

  • 3. 클래스 선택기
    페이지에서 레이블에 속성인 class-class를 추가하고 <p class="myClass"></p>과 같은 클래스 이름을 사용자 정의한 다음 CSS의 클래스 선택기를 사용하여 이 클래스에 원하는 속성을 추가할 수 있습니다.

           .myClass{
               color: #FFFFFF;
           }
  • 4. ID 선택자
    ID 선택자는 클래스 선택자 <p id="myClass"></p>

           #myClass{
               color: #FFFFFF;
           }

    앞에 # 접두어가 붙는 것과 다소 유사합니다. from class 잘못된 점은 id가 HTML에서 한 번만 나타날 수 있다는 것입니다. 아마도 id의 고유성을 이해하고 있지만 동일한 클래스와 ID를 사용하여 두 개의 p를 작성했을 것입니다. 그러나 ID를 사용하여 스타일을 추가할 때 두 ID 모두에 대해 일반 스타일이 성공적으로 나타나고 오류가 보고되지 않는 것을 발견했습니다. 그러나 동일한 ID는 JavaScript 등의 스크립트 언어 판단에 오류를 발생시킵니다. id 선택기가 두 개의 동일한 p에 스타일을 추가할 수 있다는 것을 설명하는 것은 불가능할 수 있지만 여기 포털을 보면 간단히 말하면 국가에 고유한 법률이 있는 것과 마찬가지로 원칙입니다(의도적으로 오타, I). 시스템에 걸릴까 두렵습니다) Shield) 법을 위반할 수 없습니다. 그렇지 않으면 우리는 당신을 용납하지 않습니다. [1]

  • 5. 포함 선택자
    포함 선택자는 요소의 하위 요소에 작용하므로 파생 선택자 또는 하위 선택자라고도 합니다.

        .class1 span{
           
       }
  • 6. 하위 선택자
    는 하위 요소 개체의 스타일을 정의하는 데 사용됩니다. 하위 요소 이외의 개체는 정의할 수 없습니다. (책에서는 이렇게 말합니다.) 요소의 직계 하위 요소 개체의 스타일을 정의하는 단어를 추가하고 싶습니다. 예를 들어, 내가 재산을 소유하고 있는데, 그것은 내 손자가 아닌 내 아들에게만 물려줄 수 있습니다. 예를 들어, 나는 집이 없습니다. / 눈물이 터졌다.
    상위 요소와 하위 요소에 '>' 기호를 직접 추가하세요.

     .class1 > span{
        
    }
  • 7. 인접 선택자
    는 동일한 상위 요소 아래에 있는 요소의 다음 요소와 일치합니다.
    (여기서는 왜 다음 요소인데 인접 선택자라고 부르는지 묻고 싶습니다. 인접한 요소는 서로 인접한 것이 아닌가요? 하위 선택자라고 부르는 것이 더 낫습니다. 하하하 농담입니다.) 인접 요소는 '+' 기호로 직접 연결됩니다.

    .myClass + p{
        color: red;
    }
  • 8. 속성 선택기
    모든 HTML 태그에는 속성이 있으며 각 속성에는 속성 값이 있습니다. 예:

    <p class="myClass" id="zz" style="color: #FFFFFF;"></p>

    속성 선택기는 7가지(4+3) 모드로 나뉩니다:

    1.E[attr]

       p[class] {
           color: #FFFFFF;
       }
       --具有class属性的p字体颜色白色(忽略attr的值);

    2.E[attr="value"]

       p[class="myClass"] {
           color: #FFFFFF;
       }
       --class的值为'myClass'的p字体颜色白色;

    3.E[attr~="value"]

       p[class~="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
       ex:
       <p class="myClass zz"></p>
       <p class="myClass cc"></p>

    4.E[attr|="value"]

       p[class|="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>

    5.E[attr^="value" ]

       p[class^="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
       ex:
       <p class="myClasszz"></p>
       <p class="myClasscc"></p>

    6.E[attr$="value"]

       p[class$="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
       ex:
       <p class="zzmyClass"></p>
       <p class="ccmyClass"></p>

    7.E[attr*="value"]

       p[class*="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值含有value的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>
  • 9. 선택기 조합
    선택기의 가장 큰 장점은 특정 요소나 특정 유형의 요소에 대한 스타일을 작성할 수 있다는 것이 아니라, 다양한 페이지 구조에 맞게 다양한 조합으로 조합할 수 있다는 점입니다.
    제가 언급해야 할 것은 선택기 조합의 중첩 수준 수입니다. 중첩 수준을 초과할 수 없는 수에 대한 직접적인 규정은 없지만 너무 많은 수준을 중첩하면 쉽게 정크 코드가 생성될 수 있으며 포함에 도움이 되지 않습니다.

  • 10. CSS 선택자 가중치
    구체성을 4개 수준으로 나누고, 각 수준은 선택자의 유형을 나타내며, 각 수준의 값은 그것이 나타내는 선택의 수입니다. 선택자에 이 수준의 가중치를 곱하고 마지막으로 모든 수준의 값을 더해 선택자의 특별한 값을 얻습니다.

네 가지 레벨은 다음과 같이 정의됩니다.

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如p p,权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

CSS 조합을 사용할 때 가중치는 각 레이어의 가중치의 합과 같습니다.

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为: 10 + 100 + 1 = 111 ;
  • 11. 의사 클래스, 의사 객체 선택기

    일반적인 의사 클래스:

       :link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。
       :visited:指示作为已访问地址超链接的所有锚。
       :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。
       :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上
       :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。
       :first-letter:设置对象内的第一个字符的样式表属性。 
       :first-line:设置对象内的第一行的样式表属性。 
       :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 
       :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
       :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
       :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
       :lang:设置对象使用特殊语言的内容样式表属性。

    구조적 의사 클래스:

       E:nth-child(n):匹配父元素中的第n个子元素E。
       E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
       E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
       E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
       E:last-child:匹配父元素中最后一个E元素。
       E:first-of-type:匹配同级兄弟元素中的第一个E元素。
       E:only-child:匹配属于父元素中唯一子元素的E。
       E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
       E:empty:匹配没有任何子元素(包括text节点)的元素E。

    UI 요소 상태 의사 클래스:

       E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E
       E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素
       E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素
       E:selection:匹配E元素中被用户选中或处于高亮状态的部分

    부정 의사 클래스:

        E:not(s):匹配所有不匹配简单选择符s的元素E

    대상 의사 클래스:

       E:target:匹配相关URL指向的E元素

    범용 형제 요소 선택기:

       E ~ F:匹配E元素之后的F元素

    의사 객체:

       :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
       :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

참고: 이 문서에서는 "CSS Things" 및 css2/css3 참조 매뉴얼을 참조합니다. 지극히 개인적인 의견이므로 잘못된 내용이나 부적절한 내용이 있으면 지적해 주시기 바랍니다. 전재시 출처를 꼭 밝혀주시기 바라며, 협조 부탁드립니다!

css 선택자 구성

  • 1. 와일드카드 *

       *{
               margin: 0;
               padding: 0;
           }

    기능: 페이지의 모든 요소를 ​​결합합니다. 내부 및 외부 패치를 0으로 설정합니다.

       .class * {
           color:#ffffff;
       }

    클래스 클래스 아래의 모든 요소의 글꼴 색상을 흰색으로 설정합니다.

  • 2. 태그 선택기

        p,
        p,
        a,
        span,
        h1 {
            color: #FFFFFF;
        }

html에는 태그가 많기 때문에 태그 선택기를 직접 사용하여 스타일을 추가할 수 있지만 태그 선택기와 와일드카드의 선택 범위가 매우 크기 때문에 사용하는 것이 좋습니다. 다른 선택자와 함께.

  • 三、类选择符
      在页面中,我们可以给标签加上一个属性,class-类,自定义一个类名,比如<p class="myClass"></p>,然后我就可以在css中用类选择符给这个类加上我们想要的属性。

           .myClass{
               color: #FFFFFF;
           }
  • 四、id选择符
      id选择符与类选择符有点相似<p id="myClass"></p>

           #myClass{
               color: #FFFFFF;
           }

    前面是一个 # 的前缀,与class不同的是,id在html中只允许出现一次,可能你明白id的唯一性,但是你写了两个p,相同class、id。却发现用id添加样式的时候,两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式,但是看这里传送门,简单点说,这就是个原则,就好像一个国家有它的法率(故意错别字,我怕被系统屏蔽)你不能违反法率,否则就容不下你。[1]

  • 五、包含选择符
      包含选择符也可以叫派生选择符或后代选择器,因为作用是在某元素的子元素上。

        .class1 span{
           
       }
  • 六、子选择符
      作用是定义子元素对象的样式,无法定义子元素以外的对象。(书上是这么说的)我想加个词,定义某元素的直接子元素对象的样式。打个比方,我有一处房产,但是只能给我儿子,不能给我孙子。打个比方哈,我没有房子。/泪崩。
    父元素子元素直接加个'>'符号。

     .class1 > span{
        
    }
  • 七、相邻选择符
      匹配同一个父级下某元素的下一个元素。
    (这里我想问问既然是下一个元素为什么要叫相邻选择符,相邻不是前后左右相邻吗,叫下级选择符好了,哈哈哈,开个玩笑。)相邻元素直接用'+'符号连接。

    .myClass + p{
        color: red;
    }
  • 八、属性选择符
      任何一个HTML标签都会有属性存在,且每个属性都具有属性值;比如:

    <p class="myClass" id="zz" style="color: #FFFFFF;"></p>

    属性选择符分为七(4+3)种模式:

    1.E[attr]

       p[class] {
           color: #FFFFFF;
       }
       --具有class属性的p字体颜色白色(忽略attr的值);

    2.E[attr="value"]

       p[class="myClass"] {
           color: #FFFFFF;
       }
       --class的值为'myClass'的p字体颜色白色;

    3.E[attr~="value"]

       p[class~="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
       ex:
       <p class="myClass zz"></p>
       <p class="myClass cc"></p>

    4.E[attr|="value"]

       p[class|="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>

    5.E[attr^="value"]

       p[class^="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
       ex:
       <p class="myClasszz"></p>
       <p class="myClasscc"></p>

    6.E[attr$="value"]

       p[class$="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
       ex:
       <p class="zzmyClass"></p>
       <p class="ccmyClass"></p>

    7.E[attr*="value"]

       p[class*="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值含有value的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>
  • 九、选择符组合
      选择符最大的优势不是可以给某元素或某类元素书写样式,而已针对不同的页面结构组合成各种组合。
      不得不提的就是选择符组合的嵌套层数,虽然没有哪里直接规定嵌套层数不能超过多少,但是,嵌套过多层数容易产生垃圾代码也不利于收录会。

  • 十、css选择符权重
      把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如p p,权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

使用css组合的时候,权值等于每一层的权值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为: 10 + 100 + 1 = 111 ;
  • 十一、伪类、伪对象选择符

    常见伪类:

       :link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。
       :visited:指示作为已访问地址超链接的所有锚。
       :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。
       :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上
       :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。
       :first-letter:设置对象内的第一个字符的样式表属性。 
       :first-line:设置对象内的第一行的样式表属性。 
       :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 
       :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
       :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
       :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
       :lang:设置对象使用特殊语言的内容样式表属性。

    结构性伪类:

       E:nth-child(n):匹配父元素中的第n个子元素E。
       E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
       E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
       E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
       E:last-child:匹配父元素中最后一个E元素。
       E:first-of-type:匹配同级兄弟元素中的第一个E元素。
       E:only-child:匹配属于父元素中唯一子元素的E。
       E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
       E:empty:匹配没有任何子元素(包括text节点)的元素E。

    UI元素状态伪类:

       E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E
       E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素
       E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素
       E:selection:匹配E元素中被用户选中或处于高亮状态的部分

    否定伪类:

        E:not(s):匹配所有不匹配简单选择符s的元素E

    目标伪类:

       E:target:匹配相关URL指向的E元素

    通用兄弟元素选择器:

       E ~ F:匹配E元素之后的F元素

    伪对象:

       :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
       :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

更多css选择符整理及伪类、伪对象 相关文章请关注PHP中文网!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.