css3选择器

标签：fir   体验   增强   版本   功能   c99   css   针对   selection   

1、渐进增强:(从小到大)
                 先保证最基本的功能 ~> 用户体验的提升
    优雅降级:(从大到小)
                先针对版本较高的设备进行项目构建,保证用户体验的完美 ~>牺牲一些效果,保证最基本的功能
2、选择器(选择符):
id  class   类型(div span...)    后代选择器    伪类选择器    伪元素选择器...
（1）属性选择器:
            e[attr] 选中e元素,且e元素有attr属性      例如：li[class]{background: pink;}

            e[attr="value"] 选中e元素,且e元素有attr属性,值为value       例如：li[title="list"]{color:yellow;}

            e[attr~="value"] 选中e元素,且e元素有attr属性,包含值value   例如：li[class~="list3"]{background: blue;color:yellow;font-size:40px;}

            e[attr^="value"] 选中e元素,且元素有attr属性,以value值开头    例如：li[class^="list3"]{background: purple;color:#fff;font-size:30px;}

            e[attr$="value"] 选中e元素,且有attr属性,以value值结尾      例如：li[class$="list2"]{font-size:40px;color:skyblue;background: gold;}

            e[attr*="value"] 选中e元素,且有attr属性,包含value值
            e[attr|="value"] 选中e元素,且有attr属性,仅有value值,或者以value-开头

（2）结构伪类选择器:

          :first-child{} 选中第一个元素
          :last-child() 选中最后一个元素
          :nth-child(n){} n是从0开始的,
                               2n 偶数列 even
                              2n-1 奇数列 odd
         :only-child{} 选中只有本身一个同级的元素，

                             有很多同级元素,但是只有一个a标签   a :only-of-type{};
                             没有其他同级元素,只有一个a标签    a:only-child{};

         :nth-last-child(n){} 倒数第n个元素

        分类：span的第一个span: first-of-type{}

                 p中的第一个 p:first-of-type{}
(3)uI元素状态伪类选择器

        :enabled{} 选中可以输入的元素   例如：input:enabled{background: red;

        :disabled{} 选中不可输入的元素

        :checked{} 选中被选中的元素

        ::selection{} 被用户选中的内容处于高亮的状态     例如：p::selection{background: yellow;color:red;}

(4)动态伪类选择器

  链接伪类选择器
          :link{} 初始状态
          :visited{} 访问过后的状态
 用户行为选择器
         :hover{} 鼠标移入的状态
         :active{} 鼠标按下的状态
         :focus{} 选中获取了焦点(光标在哪里跳动)的元素

（5）层级选择器

         .box a{color:red;font-size:30px;} box下的所有a标签都会被选中

         .box>a{color:red;font-size:30px;}box下的a标签会被选中，但a标签里的a标签不会被选中，即儿子会被选中，孙子不会被选中。

         p + a{color:red;font-size:30px;}选中紧跟在p后面的第一个a标签

         p ~ a{color:red;font-size:30px;}选中紧跟在p后面的所有a标签

css3选择器

标签：fir   体验   增强   版本   功能   c99   css   针对   selection   

原文地址：https://www.cnblogs.com/xsqlj/p/12537470.html