css-seletor

CSS - 选择器

1. 标签选择器

   HTML标签作为标签选择器的名称

2. 类选择器

   .div01{},class利用空格可以使用多个样式,空格表示并列

   注意:多个类样式应用时,与引用顺序无关,与定义顺序无关,后面样式会覆盖前面

3. ID选择器

   #div01{}

4. 复合选择器

   1. 后代选择器

      h3 strong{
      color:blue;
      }

   2. 交集选择器

      p .txt{
      color:blue;
      }

   3. 并集选择器

      h3,first{
      color:blue;
      }

   4. 通配符*:表示所有元素

      *{
      color:green;
      }

5. 权重

   针对相同CSS样式属性设置时产生冲突，需要根据权重决定属性值

   !important最大

   行内:1000

   id:0100

   类:0010

   标签&伪类:0001

6. 超链接伪类

   设置伪类的顺序：a:link->a:visited->a:hover->a:active

   为什么换顺序后效果有失:优先级相同.后面的覆盖前面的

7. 选择器

   1. 属性选择器 []

   条件	说明
   [attar]	选择具有attr属性名的元素
   [attar=“val”]	同第一项，且值等于val的元素
   [attar^=“val”]	同第一项，且值等于val开始的元素
   [attar$=“val”]	同第一项，且值等于val结束的元素
   [attar*=“val”]	同第一项，且值包含val的元素
   [attar~=“val”]	同第一项，属性有多值，其中一个等于val的元素

   .container [id^='book00']{
       color: blue;
   }
   

   2. 层次选择器

      .container+div{} : 后面一个

      .container~div{} : 后面所有

      下拉导航:

      .container div{
          width: 300px;
          height: 50px;
          background: gray;
      }
      .div01+div{
          opacity: 0;   /*用透明度占位,或者用display:none*/
      }
      .div01:hover+div{
          opacity: 1;
      }
      

   3. 伪选择器

      选择器类型	说明
      : : first-line	选择文档块中的第一行
      : : first-letter	选择文档块中的首字母
      : before	在选中元素的内容之前插入内容
      : after	在选中元素的内容之后插入内容

      1. 伪类选择器

         选择器类型	说明
         : root	相当于html{}
         : first-child	匹配父元素的第一个子元素(table tr td:first-child:第一列)
         : last-child	匹配父元素的最后一个子元素
         : only-child	匹配父元素包含的唯一子元素
         : only-of-type	匹配父元素包含的唯一类型的子元素
         : nth-child(n)	匹配父元素中第n个子元素(不分类型),2n偶数行,2n+1奇数行,3n三的倍数行
         : nth-last-child(n)	匹配父元素中倒数第n个子元素
         : nth-of-type(n)	匹配父元素中定义类型倒数第n个子元素
         : nth-last-of-type(n)	匹配父元素中定义类型倒数第n个子元素

      2. UI伪类选择器

         选择器类型	说明
         : enabled	匹配处于启用状态的元素
         : disabled	匹配处于禁用状态的元素
         : checked	匹配处于选中状态的元素
         : default	匹配默认状态的元素

      3. 动态伪类选择器

         选择器类型	说明
         : link	匹配链接的元素
         : visited	匹配已访问的链接元素
         : hover	匹配处于鼠标悬停状态的元素
         : active	匹配用户激活的元素
         : focus	匹配当前获得焦点的元素

         demo:focus实现下拉

         .container-list{
             width: 300px;
             height: 300px;
         }
         .container-list .txt-css{
             width: 300px;
             height: 50px;
             outline: none;
             border: solid 1px black;
             box-sizing: border-box;
             background: url("../images/down.svg");
             background-repeat: no-repeat;
             background-position: 90% 10px;
             cursor: default;
         }
         .container-list .list-item{
             width: 260px;
             height: 200px;
             background: gray;
             position: relative;
             display: none;
         }
         .container-list .txt-css:focus{
             background: url("../images/up.svg");
             background-repeat: no-repeat;
             background-position: 90% 10px;
         }
         .container-list .txt-css:focus+div{
             display: block;
         }
         
         <div class="container-list">
             <input type="text" class="txt-css">
             <div class="list-item"></div>
         </div>
         

      4. 补充

         选中文字效果

         p::selection{
             color:red
         }
         

         无效效果

         input[type='email']:invalid{
             color:green
         }
         

         超出范围

         input[type='number']:out-of-range{
             color:red
         }