web 前端

3、新增选择器

1）属性选择器

• css2属性选择器

  • ele[attr]{ } 指定了属性名为attr的ele元素

  • ele[attr=value]{ } 指定了属性名为attr且属性值为value的ele元素

  • ele[attr~=value]{ } 指定了属性名称attr,并且属性值词列表中包含value的ele元素

  • 注意：要有词列表的时候，属性名=属性值是选择不上的

      /*带有class属性的div元素*/
      .wrap div[class]{
          background: red;
      }
      /*带有class属性，并且属性值为box的div元素*/
      .wrap div[class=box]{
          background: pink;
      }
      /* 带有class属性，并且属性值的词列表中包含box的div元素 */
      .wrap div[class~=box]{
          background: yellow;
      }
      /*带有type属性，并且属性值为text的input元素*/
      .wrap input[type=text] {
          border: 10px solid red;
      }
  ​
      /*带有type属性，并且属性值为password的input元素*/
      .wrap input[type=password] {
          border: 10px dotted blue;
      }
  ​
  注意：
  ​
          /*要有词列表的时候，属性名=属性值是选择不上的，用~选*/
         /* 选不上 */
          .warp div[class=box2] {
              background-color: burlywood;
          }
  ​
          .warp div[class~=box2] {
              background-color: burlywood;
          }
  ​
  ​
     <div class="box1 box2">box2</div>
     <div class="box3 box4">box4</div>

• css3新增属性选择器

  • ele[attr^=value]{ } 指定了属性名attr，且属性值为value开头的ele元素

  • ele[attr$=value]{ } 指定了属性名attr，且属性值为value结尾的ele元素

  • ele[attr*=value]{ } 指定了属性名attr，且属性值包含value的ele元素

• 注意哦：不能以数字结尾和开头

    div {
              width: 100px;
              height: 100px;
          }
  ​
          /*带有class属性类名以box开头的div元素*/
          .warp div[class^=box] {
              background-color: tomato;
          }
  ​
          /*带有class属性类名以b结尾的div元素*/
          .warp div[class$=b] {
              background-color: yellow;
          }
  ​
          /*带有id属性id名为box3的div元素*/
          .warp div[id=box3] {
              background-color: violet;
          }
  ​
          /*带有class属性，并且属性值有b的div元素*/
          .warp div[class*=b] {
              font-size: 30px;
          }
  ​
          /*带有id属性，并且属性值有b的div元素*/
          .warp div[id*=b] {
              font-size: 40px;
          }