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

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：代码有点少

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

flex的属性描述

2021-03-26 18:31:34