Blogger Information
Blog 11
fans 0
comment 0
visits 3158
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
伪类选择器和选择器的权重详解
至亲难忘
Original
374 people have browsed it
  1. 伪类选择器
    1.1 结构伪类
    1. 1.:nth-child()
    1. <ul class="demo" style="border: 1;">
    2. <li class="itme">红色</li>
    3. <li class="itme">蓝色</li>
    4. <li class="itme">绿色</li>
    5. <li class="itme">粉色</li>
    6. <li class="itme">中国
    7. <ul>
    8. <li class="itme">北京</li>
    9. <li class="itme">上海</li>
    10. <li class="itme">河南</li>
    11. <li class="itme">广州</li>
    12. </ul>
    13. </li>
    14. <li class="itme">美国</li>
    15. <li class="itme">韩国</li>
    16. </ul>
    17. - 获取第1个元素
    18. .demo>.itme:nth-child(1){
    19. background-color: hsl(327, 83%, 48%);
    20. }
    21. - 获取第5个元素
    22. .demo>.itme:nth-child(5){
    23. background-color: hsl(327, 83%, 48%);
    24. }
    25. - 获取最后一个元素
    26. .demo>.itme:nth-child(7){
    27. background-color: hsl(327, 83%, 48%);
    28. }
    29. -获取前三个元素
    30. .demo>.itme:nth-child(-n+3){
    31. background-color: hsl(327, 83%, 48%);
    32. }
    33. - 获取最后3个
    34. .demo>.itme:nth-last-child(-n+3){
    35. background-color: hsl(243, 94%, 44%);
    36. }
    37. - 取偶数
    38. .demo>.itme:nth-child(even){
    39. background-color: hsl(314, 82%, 46%);
    40. }
    41. - 取奇数
    42. .demo>.itme:nth-child(odd){
    43. background-color: hsl(0, 93%, 50%);
    44. }
    1. 获取任意位置的元素
      nth-child(1)
      nth-child(5)
      nth-child(7)
      获取前3个元素
      获取最后3个元素
      取偶数元素
      取奇数
      2.:first-child
      1. - 获取第一个元素
      2. .demo>.itme:first-child{
      3. background-color: hsl(327, 83%, 48%);
      4. }
      first-child
      3.last-child
      • 获取最后一个元素
        .demo>.itme:last-child{
        background-color: hsl(241, 94%, 37%);
        1. }
        last-child
        4.nth-last-child()
        1.2 状态伪类
        1.:hover(鼠标悬停)
        1. <form action="">
        2. <fieldset class="login">
        3. <legend class="title">用户登录</legend>
        4. <label for="uname">呢称:</label>
        5. <input type="text" name="uname" autofocus required />
        6. <label for="email">邮箱:</label>
        7. <input type="email" name="email" required />
        8. <label for="tel">电话:</label>
        9. <input type="tel" name="tel" />
        10. <div class="remember">
        11. <input type="checkbox" name="remember" id="rem" />
        12. <label for="rem">记住我</label>
        13. </div>
        14. <button class="submit">提交</button>
        15. </fieldset>
        16. </form>
        17. - css 样式
        18. .login > .submit:hover {
        19. cursor: pointer;
        20. background-color: seagreen;
        21. color: white;
        22. }
        2.:enabled(有效控件)
        3.:disabled(禁用控件)
        4.:checked(选中控件)
        5.:required(必选控件)
        6.:focus(焦点控件)
        7.:not(过滤某些元素)
        8.:empty(空)

  1. 选择器的权重
    2.1.盒子
    1. 1.盒子是页面中可见的“矩形”
    2.2.五个属性
    1. 1.width:宽
    2. 2.height:高
    3. 3.padding:内边距
    4. 3.1:不可见属性
    5. 3.2:仅可设置`width`
    6. 3.3:大多数内置元素都有默认`padding/margin`
    7. 3.4:建议全部重置为0,方便自定义布局
    8. 4.border:边框
    9. 4.1:可见属性
    10. 4.2:可以设置`width`/`height`/`color`
    11. 5.margin:外边距
    12. 5.1:不可见属性
    13. 5.2:仅可设置`width`
    14. 5.3:大多数内置元素都有默认`padding/margin`
    15. 5.4:建议全部重置为0,方便自定义布局
    2.3 .box-sizing
    1. 1.box-sizing:设计盒模型计算边界
    2. 2.content-box:默认值,仅包括内容区
    3. 3.border-box:推荐值,宽高扩展到可视边框
    2.4 通用初始化
    1. {
    2. margin:0;
    3. padding:0;
    4. box-sizing:border-box;
    5. }
Correcting teacher:PHPzPHPz

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