关于css选择器

首先先捋一捋都有哪些选择器

1、通配符选择器

  举例   

      *{width:100px;}

2、元素选择器

    (在 W3C 标准中,元素选择器又称为类型选择器,看清楚啦是类型选择选器,区别于类选择器)

  举例

    h1 { color:black; }

3、类选择器

     举例

    

我是标题

    

我是段落

    

我是段落

    

我是段落

    .important{ color:red; }   

    *.important {color:red;} 表示匹配 class 属性包含 important 的所有元素(通配符+类选择器)

    p.important {color:red;} 表示匹配 class 属性包含 important 的所有 p 元素(元素+类选择器)

    .important .urgent{color:red;} (多类选择器)

4、ID选择器

举例

This is a paragraph of introduction.

#intro {font-weight:bold;}

5、后代选择器

    后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。

    举例

    h1 em { color:red;}

6、子元素选择器

    举例

    h1>strong {color:red;}

7、相邻兄弟元素选择器

    举例

    h1 + p {margin-top:50px;}

    选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素

8、通用兄弟选择器

    h1 ~ p {

        width:200px;

        height:200px;

        background-color:red;

    }

9、群组选择器

    section > article,

    section > aside,

    section > div {

         color: #f00;

         margin-top: 10px;

        background: #abcdef;

    }

10、属性选择器

    [attribute] 用于选取带有指定属性的元素。

    [attribute=value] 用于选取带有指定属性和值的元素。

    [attribute~=value] 用于选取属性值中包含指定词汇的元素。

    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

    [attribute^=value] 匹配属性值以指定值开头的每个元素。

    [attribute$=value] 匹配属性值以指定值结尾的每个元素。

    [attribute*=value] 匹配属性值中包含指定值的每个元素。

    p[class~="important"]{ color: red;}

    可以应用样式:


    无法应用样式:


11、伪类选择器

     A、动态伪类 (这些伪类并不存在HTML中,只有当用户和网站交互的时候才能体现)

           锚点伪类(:link[ 未访问链接 ]  :visited[ 已访问链接 ])

           用户行为伪类(:hover [ 当鼠标悬停 ] :active[ 正在进行的被选择的链接 ] :focus[ 规定获得焦点的输入字段的颜色 输入框内的颜色] )

     B、UI元素状态伪类(css3新增)

           :enabled(表单可选中) 

                input:enabled{}   

            :disabled(表单不可选中disabled=“disabled”)  

                 input:disabled{}

            :checked

      C、CSS结构类

         type类的就是数数的时候不管什么元素都一起算个数

        :first-child【父元素的首个以及最后一个子元素】

                section > div:first-child {color: #f00;}

                配合前面的元素去写 否则很容易乱

                :last-child、

                某元素的最后一个元素

        :nth-child ( n )

            无论元素类型 ,匹配属于其父元素的第n个元素

        (2n)even偶数 (2n+1)odd奇数

        :nth-last-child( )

            无论元素类型 ,从最后一个子元素开始计数,且从1开始计数

         :nth-of-type( )

            匹配属于父元素的特定类型的第n个子元素的每个元素

                【如果指定div  那就只数div  不管还有什么元素】

          :nth-last-of-type( )

                如果指定div  那就只数div  不管还有什么元素 倒数的哦

          :first-of-type、:last-of-type(正数)

          :only-child、

            匹配属于其父元素唯一子元素的每个元素 同一个父元素中有其他兄弟元素也不行

           :only-of-type、

            有兄弟元素也没关系啦  只要父元素里指定的元素只有一个就好啦

                :empty

                    div:empty {background: #f00; }

                把空的找出来 就可以给样式啦

        否定选择器,被选中的 执行

                举例

                导航中不要最后一条线啦

            nav > a:not(:last-of-type) { border-right: 1px solid red; }

   12、伪元素 (伪造出来的,在html中找不到)两个冒号是为区别选择器

          ::first-line 文本首行

            div::first-line {

                    color: #f00;

                    font-weight: bold;

                    }   

           ::first-letter 文本首字母

            div::first-letter {

                        color: #f00;

                        font-size: 24px;

                        font-weight: bold;

                      }

            ::before 元素前插入内容 行内元素

            div::before {

                        content: "我在内容的前面";

                                }

             ::after 元素前插入内容  行内元素  多用于清除浮动

            div::after {

                    content: "我在内容的后面";

                            }


              ::seletion  控制被选中的样式

            div::selection {

                    background: red;

                    color: #ff0;

                    }



选择器权重问题

       () 行内样式1000 > ID选择器 100 > 类、属性选择器和伪类选择器10  >元素和伪元素 1 > 通配符选择器。

带有上下文关系的选择器比单纯的元素选择器权重更高!

后面会覆盖前面的有冲突的选择器!

无论多少个元素组成的选择器 都没有一个class权重高!

你可能感兴趣的:(关于css选择器)