博客列表 >1215(css引入、简单选择器、上下文选择器、伪类选择器)

1215(css引入、简单选择器、上下文选择器、伪类选择器)

手机用户1576673622
手机用户1576673622原创
2020年12月27日 16:50:14548浏览

1.css引入

任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外

  • 引入方法:
    1.外部样式:适用于所有文档。使用:使用link标签,或者@import url();
    2.内部样式:仅适用当前文档。使用:使用style标签在文档内编写。
    3.行内样式:只对当前行起效。使用:在当前标签内用style属性直接编写。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css的基本语法</title>
  6. <!-- 内部样式 -->
  7. <style>
  8. h1 {
  9. color: violet;
  10. border: 1px solid #000;
  11. }
  12. </style>
  13. <!-- 外部样式 -->
  14. <link rel="stylesheet" href="">
  15. </head>
  16. <body>
  17. <!-- 行内样式 -->
  18. <h1 style="color: #000;">php.cn</h1>
  19. </body>
  20. </html>

2.简单选择器

  • 标签选择器
    根据元素标签名称进行匹配,返回一组。比如:
    h1 {…}
  • 类选择器
    根据元素class属性进行匹配,返回一组。比如:
    li[class:”on”] {…} 。 可简化class为“ . ”比如:li.on
  • id选择器
    根据元素id属性进行匹配,返回一个。比如:
    li[id:”foo”]。可简化id为#,比如:#foo
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选择器1: 简单选择器</title>
  6. <style>
  7. /* 1. 标签选择器, 返回一组 */
  8. li {
  9. background-color: violet;
  10. }
  11. /* 2. 类选择器: 返回一组 */
  12. .on {
  13. background-color: violet;
  14. }
  15. /* 3. id选择器: 返回一个 */
  16. #foo {
  17. background-color: violet;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <ul>
  23. <li id="foo">item1</li>
  24. <li class="on">item2</li>
  25. <li id="foo">item3</li>
  26. <li class="on">item4</li>
  27. <li class="on">item5</li>
  28. </ul>
  29. </body>
  30. </html>

3.上下文选择器

  • 后代选择器:选择标签下所有此元素。
    使用:空格。
  • 子元素选择器:只选择所有子元素,不管其他级别元素。
    使用: >
  • 同级相邻选择器:仅选中与之相邻的第一个兄弟元素。
    使用:+
  • 同级所有选择器:选择与之相邻后面的所有兄弟元素。
    使用:~

    1. <head>
    2. <meta charset="UTF-8">
    3. <title>上下文选择器</title>
    4. <style>
    5. ul li {
    6. background-color: lightblue;
    7. }
    8. body>ul>li {
    9. background-color: teal;
    10. }
    11. .start+li {
    12. background-color: lightgreen;
    13. }
    14. .start~li {
    15. background-color: yellow;
    16. }
    17. </style>
    18. </head>
    19. <body>
    20. <ul>
    21. <li>item1</li>
    22. <li class="start">item2</li>
    23. <li>item3</li>
    24. <li>item4
    25. <ul>
    26. <li>item4-1</li>
    27. <li>item4-2</li>
    28. <li>item4-3</li>
    29. </ul>
    30. </li>
    31. <li>item5</li>
    32. </ul>
    33. </body>

    4.伪类选择器

  • 匹配任意位置的元素:(:nth-of-type(an+b))
    an+b: an起点,b是偏移量, n = (0,1,2,3…)
    匹配单个元素:匹配第三个li,(0n+3)可简化为(3),直接写偏移量就好。

    1. ul li:nth-of-type(0n+3) {
    2. background-color: violet;
    3. }

    匹配所有元素::nth-of-type(1n)

    1. ul li:nth-of-type(1n) {
    2. background-color: violet;
    3. }

    匹配某位元素后面所有元素::nth-of-type(1n+某位)

    1. ul li:nth-of-type(n+3) {
    2. background-color: violet;
    3. }
  • 反向获取任意位置的元素:(:nth-last-of-type(an+b))
    1. ul li:nth-last-of-type(-n+3) {
    2. background-color: violet;
    3. }
  • 选择所有为偶数的子元素:(:nth-of-type(2n))或:nth-of-type(even)
  • 选择所有为奇数的子元素:(:nth-of-type(2n-1))或:nth-of-type(2n+1)或:nth-of-type(odd)
  • 选取第一个元素的快捷方式:(:first-of-type)
    -选取最后一个元素的快捷方式:(:last-of-type)
  • 匹配父元素唯一子元素:(:only-of-type)
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议