CSS选择器

Posted 2020-07-12

1、选择器有以下几类：

     1、ID选择器   #aaaa{}

     2、类选择器    .aaaa{}

     3、属性选择器  

          简单 ：h1[属性名]{}

          具体 ：h1[属性名=""]{}

          部分：h1[属性名~=""]{}

          开头 ：h1[属性名^=""]{}

          结尾 ：h1[属性名$=""]{}

          包含 ：h1[属性名*=""]{}

          特定 ：h1[属性名|=""]{}（以属性值开头）

  4、后代选择器  

          基本 ： body h1{}

          精确 ：h1>strong{}

          相邻 ：h1+p{}   (两元素必须相邻切要有共同的父元素)

   5、伪类选择器

          :伪类{} 

                    静态

                  ：like（超链接并指向一个还未访问的地址）

                  ：visited（已访问的地址）

                  ：first-child(选择第一个子元素)

                  ：lang（语言选择）

                    动态
                  ：focus（当前有输入焦点的元素）

                  ：hover（鼠标停留的元素）

                  ：active（被用户激活的元素）

    6、伪元素选择器

               手写字母样式：   元素：first-letter{}  （只能应用于标记或段落之类的块级元素，不能用于超链接等行内元素）

               第一行样式   :    元素：firs-line{}（只能应用于标记或段落之类的块级元素，不能用于超链接等行内元素）

               设置之前     ：   元素：before{content：" 内容 "; 样式}

               设置之后     ：   元素：after{content：" 内容 "; 样式}