search

博客列表 >CSS引入到HTML方式和CSS伪类选择器

CSS引入到HTML方式和CSS伪类选择器

Jerry
Jerry原创
2020年12月16日 16:46:08753浏览

CSS引入到HTML的三种方式

1.直接通过<style>标签引入 

  1. <style>
  2.         h2 {
  3.             color: green;
  4.         }
  5. </style>

2.通过<link>标签引入外部共享样式表

  1. <link rel="stylesheet" href="css/style.css">

3.通过style属性设置样式

  1. <h2 style="color:bule">蓝色钻石一样的颜色</h2>

CSS选择器

CSS选择器- 标签 类和ID

比较简单的选择器 包括标签 类和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>CSS选择器:标签 类和ID</title>
  7.     <style>
  8.       li {
  9.         background-color: aqua;
  10.       }
  11.       .hehe {
  12.         background-color: greenyellow;
  13.       }
  15.       #four {
  16.         background-color: blue;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <ul>
  22.       <li>item1</li>
  23.       <li class="hehe">item2</li>
  24.       <li>item3</li>
  25.       <li id="four">item4</li>
  26.       <li>item5</li>
  27.     </ul>
  28.   </body>
  29. </html>

CSS选择器-上下文选择器

空格: 所有层级, >: 仅父子层级, +: 后面相邻一个兄弟, ~: 后面相邻所有兄弟

  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.       /* 空格: 所有层级 */
  9.       ul li {
  10.         background-color: blueviolet;
  11.       }
  12.       /* >: 仅父子层级 */
  13.       body > ul > li {
  14.         background-color: burlywood;
  15.       }
  16.       /* +: 后面相邻一个兄弟 */
  17.       .third + li {
  18.         background-color: chartreuse;
  19.       }
  20.       /* ~: 后面相邻所有兄弟 */
  21.       .third ~ li {
  22.         background-color: darkcyan;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <ul>
  28.       <li>列表1</li>
  29.       <li>列表2</li>
  30.       <li class="third">列表3</li>
  31.       <li>列表4</li>
  32.       <ul>
  33.         <li>列表4-1</li>
  34.         <li>列表4-2</li>
  35.         <li>列表4-3</li>
  36.       </ul>
  37.       <li>列表5</li>
  38.     </ul>
  39.   </body>
  40. </html>

css选择器-伪类选择器

主要语法： nth-of-type()

  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.       /* 匹配第5个 正序  */
  9.       ul li:nth-of-type(5) {
  10.         background-color: aqua;
  11.       }
  12.       /* 倒数第一个 倒序 */
  13.       ul li:nth-last-of-type(1) {
  14.         background-color: brown;
  15.       }
  16.       /* 偶数行 even或者2n  */
  17.       ul li:nth-of-type(even) {
  18.         background-color: coral;
  19.       }
  20.       /* 奇数行 odd或者2n-1  */
  21.       ul li:nth-of-type(odd) {
  22.         background-color: cornflowerblue;
  23.       }
  24.       /* 带偏移量 移动8  an+b  */
  25.       ul li:nth-of-type(n + 8) {
  26.         background-color: darkorange;
  27.       }
  28.       /* 第一个  */
  29.       ul li:first-of-type {
  30.         background-color: darkseagreen;
  31.       }
  32.       /* 最后一个  */
  33.       ul li:last-of-type {
  34.         background-color: darkseagreen;
  35.       }
  36.       /* 只对含有一个元素的有效  */
  37.       ul li:only-of-type {
  38.         background-color: darkgreen;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <ul>
  44.       <li>列表1</li>
  45.       <li>列表2</li>
  46.       <li>列表3</li>
  47.       <li>列表4</li>
  48.       <li>列表5</li>
  49.       <li>列表6</li>
  50.       <li>列表7</li>
  51.       <li>列表8</li>
  52.       <li>列表9</li>
  53.       <li>列表10</li>
  54.     </ul>
  55.     <ul>
  56.       <li>只有这个一个li</li>
  57.     </ul>
  58.   </body>
  59. </html>
上一条：CSS样式规则下一条：css引入方式和css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多