css选择器有哪些？

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

选择器的优先级

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

    语法

    1. <!DOCTYPE html>
    2.           <html lang="en">
    3.           <head>
    4.               <meta charset="UTF-8">
    5.               <title>Document</title>
    6.               <style type="text/css">
    7.                .lis{
    8.                background-color:red;
    9.                }
    10.                #lis{
    11.                background-color:#000;
    12.                }
    13.                div{
    14.                background-color:pink;
    15.                }
    16.                ul>li{
    17.                color:red;
    18.                }
    19.                ul li{
    20.                color:green;
    21.                }
    22.                </style>
    23.           </head>
    24.           <body>
    25.              <div class="lis">
    26. >                "我是class选择器缩写.lis"
    27.              </div>
    28.            <div id="lis">
    29. >               "我是id选择器缩写为#lis"
    30.            </div>
    31.            <div>
    32.            "我是tag标签选择器"
    33.            </div>
    34.            <ul>
    35.            <li>item1</li>
    36.            <li>item2</li>
    37.            <li>itme3</li>
    38.            <li>item4</li>
    39.            <li>
    40.            <ul>
    41.            <li>item_1</li>
    42.            <li>item_2</li>
    43.            </ul>
    44.            </li>
    45.            </ul>
    46.           </body>
    47.           </html>

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

    伪类选择器语法

    1.       <!DOCTYPE html>
    2.       <html lang="en">
    3.       <head>
    4.           <meta charset="UTF-8">
    5.           <title>Document</title>
    6.           <style type="text/css">
    7.           /*选中ul的所有子元素*/
    8.              ul>li{
    9.               color:red;
    10.           } 
    11.           /*选中最后一个li*/
    12.              ul li:last-child{
    13.                background-color: red;
    14.            }
    15.            /*选中第三个li*/
    16.           .list :nth-child(3){
    17.            background-color: pink;
    18.           }
    19.           /*选中第三个li同上*/
    20.            .list > li:nth-of-type(3){
    21.                background-color: red;
    22.            }
    23.            /*选中唯一li*/
    24.            ul li:only-of-type{
    25.                background-color: green;
    26.            }
    27.             /*.first之后相邻兄弟元素*/
    28.             .first+p{
    29.                 background-color: #000;
    30.                }
    31.                /*.first所有的兄弟元素*/
    32.                .first~p{
    33.                    background-color: #ccc;
    34.                }
    35.           </style>
    36.       </head>
    37.       <body>
    38.       <ul class="list">
    39.            <li>item1</li>
    40.            <li>item2</li>
    41.            <li>item3</li>
    42.            <li>item4</li>
    43.            <li>item5</li>
    44.            <li>item6</li>
    45.            <li>item7</li>
    46.            <p class="first">我是第一个p元素</p>
    47.            <p>我是第二个p元素</p>
    48.            <p>我是第三个p元素</p>
    49.            <li>item8</li>
    50.            <li>item9</li>
    51.            </ul>
    52.            <ul>
    53.           <li>我是p元素</li>
    54.           </ul>
    55.           </body>
    56.       </html>

    总结：

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

更多相关文章

  1. 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
  2. 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
  3. 0322作业-css基本语法、选择器及模块化开发
  4. css基础、选择器、模块化组件
  5. css第一课
  6. 【CSS入门】CSS基本语法和选择器优先级学习总结简介
  7. CSS3选择器 :nth-child()的用法
  8. web前端：常用的js语法
  9. 4.基础数据类型

随机推荐

  1. PXE+kickstart无人值守装机
  2. 超全的pandas数据分析常用函数总结：下篇
  3. 小型的编程项目有哪些值得推荐？这本神书写
  4. 聊聊 print 的前世今生
  5. java基础知识
  6. Java常用的时间工具类DateTimeUtils.java
  7. 手把手带你爬天猫，获取杜蕾斯评论数据
  8. Oracle19c_cdb数据库自动安装部署脚本
  9. 当谈论迭代器时，我谈些什么？
  10. Python 之父撰文回忆：为什么要创造 pgen