search

博客列表 >CSS引入方式和选择器

CSS引入方式和选择器

残破的蛋蛋
残破的蛋蛋原创
2020年12月17日 16:34:08686浏览

一、CSS引入HTML文档的三种方式

1.通过<style>标签引入HTML文档

  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>CSS基础语法</title>
  7.     <style>
  8.         h1 {
  9.             color: violet;
  10.             border: 1px solid #000;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1>php.cn</h1>
  16. </body>
  17. </html>
  • 效果图：
    php.cn

2.通过外部样式表引入

  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>CSS引入方式：外部样式表（公共样式表、共享样式表）</title>
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <h1>php.cn</h1>
  11. </body>
  12. </html>
  • 效果图
    通过外部样式表引入样式

3.通过style属性设置元素样式

  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>CSS引入方式：style属性设置样式</title>
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <h1>toutiao.com</h1>
  11.     <h1 style="color: yellow;">Hello World</h1>
  12. </body>
  13. </html>
  • 效果图：
    通过style属性给元素自定义/定制样式

二、选择器

1.标签选择器

  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>选择器1：简单选择器</title>
  7.     <style>
  8.         li {
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>item1</li>
  16.         <li>item2</li>
  17.         <li>item3</li>
  18.         <li>item4</li>
  19.         <li>item5</li>
  20.     </ul>
  21. </body>
  22. </html>
  • 效果图：
    标签选择器

2.class选择器

  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>选择器1：简单选择器</title>
  7.     <style>
  8.         /* li[class="on"] {
  9.             background-color: #ffffff;
  10.         } */
  11.         /* class选择器可以简化为 */
  12.         li.on {
  13.             background-color: yellow;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <ul>
  19.         <li id="foo">item1</li>
  20.         <li class="on">item2</li>
  21.         <li id="foo">item3</li>
  22.         <li class="on">item4</li>
  23.         <li class="on">item5</li>
  24.     </ul>
  25. </body>
  26. </html>
  • 效果图：
    class选择器

3.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>选择器1：简单选择器</title>
  7.     <style>
  8.         /* ---------------------------------------------- */
  9.         /* id选择器：返回一个 */
  10.         /* li[id="foo"] {
  11.             background-color: violet;
  12.         } */
  13.         /* id选择器可以简化为 */
  14.         #foo {
  15.             background-color: violet;
  16.         }
  17.         /* 浏览器并不检查id选择器的唯一性，由开发者自行保证它的唯一性。 */
  18.     </style>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li id="foo">item1</li>
  23.         <li class="on">item2</li>
  24.         <li id="foo">item3</li>
  25.         <li class="on">item4</li>
  26.         <li class="on">item5</li>
  27.     </ul>
  28. </body>
  29. </html>

id选择器

需要注意的是，这里面有一个坑，我通过学习发现id选择器，在页面中不能重复使用，跟class选择器是不一样的，它需要在页面中保证它的唯一性，这个浏览器并不会检查id的唯一性，需要开发者自行保证。

4.上下文选择器

  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>选择器1：上下午选择器</title>
  7.     <style>
  8.         /* 1.后代选择器：所有层级 */
  9.         ul li {
  10.             background-color: lightblue;
  11.         }
  13.         /* 2.子元素选择器 */
  14.         body > ul > li {
  15.             background-color: teal;
  16.         }
  18.         /* 3.同级相邻选择器：仅选中与之相邻的第一个元素 */
  19.         .start+li {
  20.             background-color: #000;
  21.             color: #ffffff;
  22.         }
  24.         /* ------------------------------ */
  25.         /* 4.同级所有选择器：选中与之相邻的后面所有兄弟元素 */
  26.         .start~li {
  27.             background-color: tomato;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <ul>
  33.         <li id="foo">item1</li>
  34.         <li class="start">item2</li>
  35.         <li id="foo">item3</li>
  36.         <li class="on">item4
  37.             <ul>
  38.                 <li>item4-1</li>
  39.                 <li>item4-2</li>
  40.                 <li>item4-3</li>
  41.             </ul>
  42.         </li>
  43.         <li class="on">item5</li>
  44.     </ul>
  45. </body>
  46. </html>
  • 效果图：
    上下文选择器

总结，上下午选择器用到的符号：

  1. 空格：所有层级；

  2. >：父子级；

  3. +：仅选中与之相邻的第一个元素

  4. ~：选中与之相邻的后面所有兄弟元素

5.伪类选择器
匹配任意位置的元素：nth-of-type(an + b)，其中an表示起点，b是偏移量，n为从0开始的正整数。

  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>伪类选择器：结构伪类（重难点）</title>
  7.     <style>
  8.         /* 1.匹配任意位置的元素：`:nth-of-type(an+b)` */
  10.         /* 0乘以任何数都等于0，通常直接写偏移量就可以 */
  11.         /* ul li:nth-of-type(3) {
  12.             background-color: tomato;
  13.         } */
  15.         /* 选择li的所有元素 */
  16.         /* ul li:nth-of-type(1n) {
  17.             background-color: yellow;
  18.         } */
  20.         /* 如果只是为了全选，这样做没意义，还不如标签选择器来的直接，但是一旦带上偏移量就完全不同了。 */
  21.         /* 1乘以任何数都等于自己，所以省去1 */
  22.         /* ul li:nth-of-type(1n + 3) {
  23.             background-color: yellowgreen;
  24.         } */
  26.         /* ul li:nth-of-type(n + 8) {
  27.             background-color: springgreen;
  28.         } */
  30.         /* ----------------------------------------------------------------- */
  32.         /* 2. 反向获取任意位置的元素：`nth-last-of-type(an + b)` */
  33.         /* ul li:nth-last-of-type(-n + 3) {
  34.             background-color: wheat;
  35.         } */
  36.         /* 只选择倒数第3个，直接命中 */
  37.         /* ul li:nth-last-of-type(-0n + 3) {
  38.             background: wheat;
  39.         } */
  41.         /* 3.选择所有索引为偶数的子元素：2，4，6，8 */
  42.         /* ul li:nth-of-type(2n) {
  43.             background-color: yellow;
  44.         } */
  45.         /* 选择所有奇数行的子元素：1，3，5，7，9 */
  46.         /* ul li:nth-of-type(2n - 1) {
  47.             background-color: yellow;
  48.         } */
  50.         /* 这里2n - 1 也是对的，为什么呢？ */
  51.         /* 偶数行：even */
  52.         /* ul li:nth-of-type(even) {
  53.             background-color: violet;
  54.         } */
  55.         /* 奇数行：odd */
  56.         /* ul li:nth-of-type(odd) {
  57.             background-color: yellowgreen;
  58.         } */
  60.         /* ----------------------------------------------------------------- */
  61.         /* 3.选择第一个子元素： */
  62.         /* :nth-of-type(1) 的语法糖：first-of-type */
  63.         /* ul li:first-of-type {
  64.             background-color: turquoise;
  65.         } */
  66.         /* 选中最后一个：last-of-type */
  67.         ul li:last-of-type {
  68.             background-color: #000;
  69.         }
  71.         /* :nth-of-type(an + b) 这是最核心的一个选择器，其他的相关选择器都是它的语法糖 */
  72.         /* :nth-last-of-type(), :first-of-type, :last-of-type这些都是快捷方式 */
  75.         /* ul:last-of-type li {
  76.             background-color: turquoise;
  77.         } */
  78.         /* 如果只想匹配父元素中唯一子元素，使用:only-of-type就可以快速实现 */
  79.         ul li:only-of-type {
  80.             background-color: violet;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     <ul>
  86.         <li>item1</li>
  87.         <li>item2</li>
  88.         <li>item3</li>
  89.         <li>item4</li>
  90.         <li>item5</li>
  91.         <li>item6</li>
  92.         <li>item7</li>
  93.         <li>item8</li>
  94.         <li>item9</li>
  95.         <li>item10</li>
  96.     </ul>
  97.     <ul>
  98.         <li>Hello  ssssWorld!</li>
  99.         <li>Hello  ssssWorld!</li>
  100.     </ul>
  101.     <ul>
  102.         <li>Hello World!</li>
  103.     </ul>
  104. </body>
  105. </html>
  • 效果图：
    伪类选择器
上一条：1216 优先级提权方式.+字体与字体图标+盒模型属性的缩写下一条：1215-css引入和选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多