search

博客列表 >CSS基本语法、引入方式及常用选择器

CSS基本语法、引入方式及常用选择器

小狐的博客
小狐的博客原创
2020年12月16日 23:14:14856浏览

CSS 语法

css：层叠样式表，用来设置页面中元素的样式、布局。

一、基本语法

  1. h1 {
  2.   color: violet;
  3.   border: 1px solid #000;
  4. }

h1：选择器
{...}：声明块，由一个或多个样式声明组成，各声明由分号分隔
h1 + {...}：选择器 + 声明块 = 规则

二、引入方式

  • 1、内部样式

    1. <style>
    2.   h1 {
    3.     /* 声明：属性和值组成 */
    4.     color: violet;
    5.     border: 1px solid #000;
    6.   }
    7. </style>

  • 2、外部样式

    1. <style>
    2.   /* 通过指令引入外部 css 样式（不推荐使用） */
    3.   /* 常用于 css 模块化 */
    4.   @import url(css/style.css);
    5.   @import "css/style.css";
    6. </style>
    7. <!-- 通过 link 引入css 样式（推荐使用） -->
    8. <link rel="stylesheet" href="css/style.css" />

  • 3、内联样式

    1. <h1 style="color: violet;">css真的非常好玩</h1>

  • 4、小结

    • 内部样式：通过 style 引入，仅适用于当前页面（html 文档）
    • 外部样式：适用于所有引入了这个 css 样式表的 html 文档,使用 link 标签
    • 内联样式：也叫 行内样式 通过标签的style属性，仅适用于当前的页面中的指定的元素
    • 外部知识点：link 和@import 的区别

三、模块化

  • html 页面

    1. <!--导入公共样式表-->
    2. <link rel="stylesheet" href="style.css" />

  • css 样式表

    1. /*导入公共页眉*/
    2. @import url(header.css);
    4. /*导入公共页脚*/
    5. @import "footer.css";
    7. /*主体样式*/
    8. main {
    9.   min-height: 500px;
    10.   background-color: lightcyan;
    11. }

  • 小结

    • 1、将公共样式部分进行分离，并创建一些独立的样式表来保存
    • 2、使用@import 指令将这些独立的公共样式表引入到指定的 css 文档或标签中

四、普通选择器

  1. <body>
  2.   <!--示范结构代码-->
  3.   <ul>
  4.     <li id="foo">item1</li>
  5.     <li class="on">item2</li>
  6.     <li id="foo">item3</li>
  7.     <li class="on">item4</li>
  8.     <li class="on">item5</li>
  9.   </ul>
  10. </body>

  • 1、标签选择器

    1. <style>
    2.   /* 标签选择器，返回一组 */
    3.   li {
    4.     background-color: violet;
    5.   }
    6. </style>
    • 效果展示

  • 2、类选择器

    1. <style>
    2.   /* 类选择器: 返回一组（所有 class = "on" 的标签） */
    3.   li[class="on"] {
    4.     background-color: violet;
    5.   }
    6.   /* class选择器可简化为 .  */
    7.   .on {
    8.     background-color: violet;
    9.   }
    10. </style>
    • 效果展示

  • 3、id 选择器

    1. <style>
    2.   /* id选择器: 返回一个 */
    3.   li[id="foo"] {
    4.     background-color: violet;
    5.   }
    7.   /* 因为浏览器不检查id的唯一性,必须由开发者自行保证 */
    9.   /* id选择器使用 # 简化 */
    10.   #foo {
    11.     background-color: violet;
    12.   }
    13. </style>
    • 效果展示

  • 4、上下文选择器

    因为 html 是一个结构化的文档：每个元素在文档中有确切的位置
    因此，可以根据元素的上下文环境来选择元素

    1. <body>
    2.   <!--示范结构代码-->
    3.   <ul>
    4.     <li>item1</li>
    5.     <li class="start">item2</li>
    6.     <li>item3</li>
    7.     <li>
    8.       item4
    9.       <ul>
    10.         <li>item4-1</li>
    11.         <li>item4-2</li>
    12.         <li>item4-3</li>
    13.       </ul>
    14.     </li>
    15.     <li>item5</li>
    16.   </ul>
    17. </body>

    • 后代选择器

      1. <style>
      2.   /* 后代选择器: 所有ul下的li层级 */
      3.   ul li {
      4.     background-color: lightblue;
      5.   }
      6. </style>
      • 效果展示

    • 子元素选择器

      1. <style>
      2.   /* 子元素选择器: 仅父子层级 */
      3.   /* 选择 body 下的 ul 标签 中的 所有 li 标签 */
      4.   body > ul > li {
      5.     background-color: teal;
      6.   }
      7. </style>

      注：如果没有其他选择器对里层的 li 进行选择，这里的 item4 下的 li 也会被选择

      • 效果展示

    • 同级相邻选择器

      1. <style>
      2.   /* 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 */
      3.   /* 根据 item2 的类名，选择与之相邻的 li，最终选中 item3 */
      4.   /* 也可以写成 .start+*，选择与 .start 相邻的任意一个元素 */
      5.   .start + li {
      6.     background-color: lightgreen;
      7.   }
      8. </style>
      • 效果展示

    • 同级所有选择器

      1. <style>
      2.   /* 同级所有选择器: 选中与之相邻的后面所有兄弟元素 */
      3.   .start ~ li {
      4.     background-color: yellow;
      5.   }
      6. </style>
      • 效果展示

    • 上下文选择器小结

      • 空格：所有层级
      • > ：父子级
      • + ：相邻的兄弟
      • ~ ：所有相邻兄弟

五、伪类选择器

  1. <body>
  2.   <!--示范结构代码-->
  3.   <ul class="list">
  4.     <li>item1</li>
  5.     <li>item2</li>
  6.     <li>item3</li>
  7.     <li>item4</li>
  8.     <li>item5</li>
  9.     <li>item6</li>
  10.     <li>item7</li>
  11.     <li>item8</li>
  12.     <li>item9</li>
  13.     <li>item10</li>
  14.   </ul>
  16.   <ul>
  17.     <li>我是一个流浪汉</li>
  18.   </ul>
  19. </body>

  • 1、结构伪类选择器

    • （1）正向获取元素：:nth-of-type(an+b)

      • 匹配任意位置的元素

        1. <style>
        2.   /* an+b: an是起点，b是偏移量，n = (0,1,2,3...) */
        3.   /* 匹配第3个 li (0 * n + 3) */
        4.   ul li:nth-of-type(0n + 3) {
        5.     background-color: violet;
        6.   }
        8.   /* 0乘以任何数都等于0，通常直接写偏移量就可以 */
        9.   ul li:nth-of-type(3) {
        10.     background-color: violet;
        11.   }
        12. </style>
        • 效果展示

      • 匹配所有元素

        1. <style>
        2.   /* 选择所有元素 */
        3.   ul li:nth-of-type(1n) {
        4.     background-color: violet;
        5.   }
        7.   /* 如果只是为了全选,这样做没意义，还不如标签选择器来得直接，但是一旦带上偏移量就完全不同了 */
        8.   /* 选择第三个及之后的所有元素 */
        9.   ul li:nth-of-type(1n + 3) {
        10.     background-color: violet;
        11.   }
        12.   /* 1乘以任何数都等于自己，所以省去1 */
        13.   ul li:nth-of-type(n + 3) {
        14.     background-color: violet;
        15.   }
        16. </style>
        • 效果展示

    • （2）反向获取元素：nth-last-of-type(an+b)

      1. <style>
      2.   /* 反向获取任意位置的元素: `nth-last-of-type(an+b)` */
      4.   /* 获取倒数三个元素 */
      5.   ul li:nth-last-of-type(-n + 3) {
      6.     background-color: violet;
      7.   }
      8.   /* -n没有意义，可以直接写 3 */
      9.   ul li:nth-last-of-type(3) {
      10.     background-color: violet;
      11.   }
      12. </style>
      • 效果展示

  • （3）奇偶数

    1. <style>
    2.   /* 选择偶数行 */
    3.   ul li:nth-of-type(2n) {
    4.     background-color: violet;
    5.   }
    7.   /* 2*0 = 0
    8.     2*1 = 2
    9.     2*2 = 4
    10.     2*3 = 6 */
    12.   /* 选择奇数行 */
    13.   /* 或 2n+1 */
    14.   ul li:nth-of-type(2n-1) {
    15.     background-color: violet;
    16.   }
    18.   /* 也可以用关键字方式 */
    19.   /* 偶数行: even  */
    20.   ul li:nth-of-type(even) {
    21.     background-color: violet;
    22.   }
    23.   /* 奇数行: odd  */
    24.   ul li:nth-of-type(odd) {
    25.     background-color: violet;
    26.   }
    27. </style>
    • 效果展示_偶数
    • 效果展示_奇数

  • （4）语法糖(为简化而生的语法方式)

    :nth-of-type(an+b) 这是最核心的一个选择器，其它的相关选择器都是它的语法糖。
    :nth-last-of-type()，:first-of-type， :last-of-type，这些都是快捷方式。

    1. <style>
    2.   /* 选择第一个子元素: :first-of-type */
    3.   /* :nth-of-type(1) 的语法糖 :first-of-type */
    4.   ul li:first-of-type {
    5.     background-color: violet;
    6.   }
    8.   /* -------------------------------------------- */
    10.   /* 选中最后一个: :last-of-type */
    11.   ul li:last-of-type {
    12.     background-color: violet;
    13.   }
    15.   /* -------------------------------------------- */
    17.   /* 选中最后一个 ul 中的 li */
    18.   ul:last-of-type li:first-of-type {
    19.     background-color: violet;
    20.   }
    22.   /* 如果只想匹配父元素中唯一子元素，使用：`only-of-type` 就可快速实现（用的不多） */
    23.   ul li:only-of-type {
    24.     background-color: violet;
    25.   }
    26. </style>
上一条：window系统手动激活方法（适用于各种版本的window 10 系统）下一条：选择器优先级及字体属性和盒模型属性的缩写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多