css选择器有哪些？

1.css选择器
2.id选择器
3.tag（标签选择器）
4.伪类选择器
5.属性选择器
6.子元素选择器
7.包含选择器
8.兄弟选择器
9.相邻选择器
10.群选择器

选择器的优先级

!important>行内>id>class>tag>通配符*

语法

<!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style type="text/css">
               .lis{
               background-color:red;
               }
               #lis{
               background-color:#000;
               }
               div{
               background-color:pink;
               }
               ul>li{
               color:red;
               }
               ul li{
               color:green;
               }
               </style>
          </head>
          <body>
             <div class="lis">
>                "我是class选择器缩写.lis"
             </div>
           <div id="lis">
>               "我是id选择器缩写为#lis"
           </div>
           <div>
           "我是tag标签选择器"
           </div>
           <ul>
           <li>item1</li>
           <li>item2</li>
           <li>itme3</li>
           <li>item4</li>
           <li>
           <ul>
           <li>item_1</li>
           <li>item_2</li>
           </ul>
           </li>
           </ul>
          </body>
          </html>

类选择器要有一个父元素作为查询起点

伪类选择器语法

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style type="text/css">
          /*选中ul的所有子元素*/
             ul>li{
              color:red;
          } 
          /*选中最后一个li*/
             ul li:last-child{
               background-color: red;
           }
           /*选中第三个li*/
          .list :nth-child(3){
           background-color: pink;
          }
          /*选中第三个li同上*/
           .list > li:nth-of-type(3){
               background-color: red;
           }
           /*选中唯一li*/
           ul li:only-of-type{
               background-color: green;
           }
            /*.first之后相邻兄弟元素*/
            .first+p{
                background-color: #000;
               }
               /*.first所有的兄弟元素*/
               .first~p{
                   background-color: #ccc;
               }
          </style>
      </head>
      <body>
      <ul class="list">
           <li>item1</li>
           <li>item2</li>
           <li>item3</li>
           <li>item4</li>
           <li>item5</li>
           <li>item6</li>
           <li>item7</li>
           <p class="first">我是第一个p元素</p>
           <p>我是第二个p元素</p>
           <p>我是第三个p元素</p>
           <li>item8</li>
           <li>item9</li>
           </ul>
           <ul>
          <li>我是p元素</li>
          </ul>
          </body>
      </html>

总结：

选择任何一个元素：:nth-of-type(n)
选择第一个：:first-of-type
选择最后一个：:last-of-type
选择倒数某一个：:nth-last-of-type(n)
唯一子元素：:only-of-type

批改老师：

天蓬老师

批改状态：合格

老师批语：代码有点少

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

flex的属性描述

2021-03-26 18:31:34