Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器
Blogger Information
Blog 10
fans 0
comment 0
visits 10287
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS选择器
xsrsblog
Original
692 people have browsed it

简单选择器

元素<class<id（*属于元素级别）

  1. 复合类样式选择器（中间不能有空格） (.A.B)
  2. id、class选择器默认可以添加到任何元素上
  3. 层叠样式表，相同选择器，后面追加会覆盖前面的样式
    #id1{…}
    #id1{…} 覆盖上面的
  4. 优先级：（#id等价于#id） < .class#id 【.class优先级高于】
    .class#id 等价于 #id.class
    id选择器主要用于：表单和锚点

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         #container{
  9.             position: absolute;
  10.             top: 300px;
  11.             left: 300px;
  12.             width: 156px;
  13.             height: 156px;
  15.         }
  16.         .items{
  17.             width: 50px;
  18.             height: 50px;
  19.             margin: 1px;
  20.             background-color: lightblue;
  21.             float: left;
  22.             line-height: 50px;
  23.             text-align: center;
  24.         }
  26.         .items.blue{
  27.             background-color: blue;
  28.         }
  29.         .items#red{
  30.             background-color: lightpink;
  31.         }
  32.         body{
  33.             background-color: lightslategray;
  34.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div id="container">
  40.         <div class="items">1</div>
  41.         <div class="items">2</div>
  42.         <div class="items">3</div>
  43.         <div class="items">4</div>
  44.         <div class="items blue">5</div>
  45.         <div class="items" id="red">6</div>
  46.         <div class="items">7</div>
  47.         <div class="items">8</div>
  48.         <div class="items">9</div>
  49.     </div>
  50. </body>
  51. </html>

效果图：

[========]
[========]

上下文选择器

  • 后代选择器：中间用空格
    .container .item-us{…} 选择 .container(起点） 下的所有.item-us类

  • 父子选择器 >
    .container > .item-us 选择 .container(起点） 下的子.item-us类

  • 同级相邻选择器 +
    .item.5_3_2 + li 选择 .item.5_3_2(起点） 同级兄弟li

  • 同级所有选择器 ~
    .item.5_3_2 + li 选择 .item.5_3_2(起点） 之后的所有li

结构伪类选择器：不分组，进行递归遍历

父类 > ：first-child(){…}

父类 > ：last-child(){…}

父类 > ：nth-child(expr(n)) n == 0

父类 > ：nth-last-child(expr(n)) n == 0

结构伪类选择器：分组（区分元素类型）//按子类进行分组，会进行递归遍历

父类 > 子类:last-of-type(#) 分组中最后一个

父类 > 子类:nth-of-type(expr(n)) n ==0

父类 > 子类:nth-last-of-type(expr(n)) n ==0

伪类

  • :target 配合，实现锚点操作ID使用

    #id:target{…}当前id元素被锚点点击执行

  • :focus

    input:focus{…}获取焦点时执行

  • ::seletciton
    input::selection{…}选中时执行

  • :not(条件） 对匹配的元素进行排除

伪元素

  • ::before
  • ::after
Correcting teacher：WJWJ

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