Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css的基本语法 和样式引用 标签选择器 上下文选择器 以及结构伪类选择器
Blogger Information
Blog 16
fans 0
comment 0
visits 15850
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css的基本语法 和样式引用 标签选择器 上下文选择器 以及结构伪类选择器
Allen在php中文网的学习笔记
Original
655 people have browsed it

作业内容

  1. 实例演示css规则的三种引入到html文档中的方式;
  2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

演示地址: https://php.gzj2001.com/day5/index.html

效果展示

image.png

作业代码

  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>1215作业内容</title>
  7.     <style>
  8.         /* 1.内联样式 */
  9.         h1 {
  10.             background: lightseagreen;
  11.         }
  12.         /* 属性选择器 */
  13.         .class{
  14.             background: #777;
  15.         }
  16.         /* id选择器 */
  17.         #id{
  18.             background-color:#548;
  19.         }
  20.         /* 后代选择器 */
  21.         span p{
  22.             background-color: mediumaquamarine;
  23.         }
  24.         /* 子元素选择器 */
  25.         span>span{
  26.             background-color: #6998;
  27.         }
  28.         /* 同级相邻选择器 */
  29.         .class + p{
  30.             font-style: oblique;
  31.         }
  32.         /* 同级所有选择器 */
  33.         #id ~ span {
  34.             font-size: 36px;
  35.         }
  37.         /* 结构伪类选择器 */
  38.         /* 选择第一个 */
  39.         ul li:nth-of-type(1){
  40.             background-color: mediumaquamarine;
  41.         }
  42.         /* 选择最后一个 */
  43.         ul li:nth-last-of-type(1){
  44.             background-color: red;
  45.         }
  46.         /* 选择偶数 */
  47.         ul li:nth-of-type(even){
  48.             font-size: 24px;
  49.         }
  51.         /* 选择单数 */
  52.         ul li:nth-of-type(odd){
  53.             font-size: 12px;
  54.         }
  56.         /* 选择第N个 */
  57.         ul li:nth-of-type(3){
  58.             border: 1px solid #548;
  59.         }
  60.     </style>
  61.     <!-- 2.外部样式 -->
  62.     <link rel="stylesheet" href="css/1215.css">
  63. </head>
  64. <body>
  65.     <h1>1.欢迎来到城南博客作业展示！【内联样式】</h1>
  66.     <p>2.我的博客是gzj2001.com【外部样式】</p>
  67.     <!-- 3.style定义属性样式 -->
  68.     <p style="background: magenta;">3.祝您腰好腿好身体好！【style属性定义】</p>
  69.     <p class="class">4.我是属性选择器class的结果</p>
  70.     <p id="id">5.我是id选择器/8.我是同级相邻选择器</p>
  71.     <hr>
  72.     上下文选择器
  73.     <span>
  74.         <p>6.后代选择器/9.同级所有选择器</p>
  75.         <p>6.后代选择器/9.同级所有选择器</p>
  76.         <p>6.后代选择器/9.同级所有选择器</p>
  77.         <span>7.子元素选择器</span>
  78.     </span>
  79.     <br>
  80.   <hr>
  81.   结构伪类选择器
  83.   <ul>
  84.       <li>1结构伪类选择器</li>
  85.       <li>2结构伪类选择器</li>
  86.       <li>3结构伪类选择器</li>
  87.       <li>4结构伪类选择器</li>
  88.       <li>5结构伪类选择器</li>
  89.       <li>6结构伪类选择器</li>
  90.   </ul>
  91. </body>
  92. </html>

其他信息

My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html

Correcting teacher：天蓬老师天蓬老师

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