简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1215—css有三种引入到html文档中的方式、选择器的用法
Blogger Information
Blog 64
fans 2
comment 1
visits 46827
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
1215—css有三种引入到html文档中的方式、选择器的用法
Y的博客
Original
614 people have browsed it

1.实例演示css规则的三种引入到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.         h2{
  9.             background-color: lightblue;
  10.         }
  11.     </style>
  12.     <link rel="stylesheet" href="style/style.css">
  13. </head>
  14. <body>
  15.     <h2>css引入规则</h2>
  16.     <div style="background-color: lightgreen;">
  17.     <p>1.内部样式：仅对当前文档的元素有效，使用style标签  </p>
  18.     <p> 2.外部样式：适用于所有引入的css样式表的html文档，使用link标签</p>  
  19.     <p>3.行内样式：使用于当前元素中的指定元素，使用style属性</p> 
  20.     </div>  
  21. </body>
  22. </html>

2.实例演示标签选择器，class选择器,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>选择器</title>
  7.     <style>
  8.         li{
  9.             background-color: lightgreen;
  10.         }
  11.         .cc{
  12.             background-color: lightgrey;
  13.         }
  14.         #bb{
  15.             background-color: lightsalmon;
  16.         }
  17.         ol li{
  18.             background-color: lightgray;
  19.         }
  20.         body>ol>li{
  21.             color:blue;
  22.         }
  23.         .start+li{
  24.             background-color: chocolate;
  25.         }
  26.         .all~li{
  27.             color:red;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <ul>简单选择器
  33.         <li>标签选择器：返回一组</li>
  34.         <li class="cc">类选择器：返回一组</li>
  35.         <li id="bb">id选择器：返回一个</li>
  36.     </ul>
  37.     <ol>上下文选择器
  38.         <li>后代选择器</li>
  39.         <li class="start">子元素选择器：仅父子层级</li>
  40.         <li class="all">同级相邻选择器：仅选中与之相邻的第一个兄弟元素</li>
  41.         <li>1.空格：所有层级</li>
  42.         <li>2.>：父子级</li>
  43.         <li>3.+：相邻的兄弟</li>
  44.         <li>3.~：相邻的所有兄弟</li>
  45.     </ol>
  46. </body>
  47. </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>伪类选择器</title>
  7. </head>
  8.     <style>
  9.         /* 选择第几个选择 */
  10.         ul li:nth-of-type(2){
  11.             background-color: lightgrey;
  12.         }
  13.         /* 选择所有元素 */
  14.         ul li:nth-of-type(1n){
  15.             background-color: lightseagreen;
  16.         }
  17.         /* 选择第四个以后所有元素 */
  18.         ul li:nth-of-type(n+4){
  19.             background-color: lightpink;
  20.         }
  21.         /* 反向选择，选择后两个 */
  22.         ul li:nth-last-of-type(-n+2){
  23.             background-color: lightgreen
  24.         }
  25.         /* 选择所有为偶数的元素 */
  26.         ul li:nth-of-type(2n){
  27.             background-color: lightcoral
  28.         }
  29.         /* 选择所有为奇数的元素 */
  30.         ul li:nth-of-type(2n+1){
  31.             background-color:white
  32.         }
  33.         /* 选择第一个的元素 */
  34.         ul li:first-of-type{
  35.             background-color:lightsalmon
  36.         }
  37.         /* 选择所最后一个的元素 */
  38.         ul li:last-of-type{
  39.             background-color:lightsalmon
  40.         }
  41.         ul li:only-of-type{
  42.             background-color:lightskyblue
  43.         }
  44.     </style>
  45. <body>
  46.     <ul>
  47.         <li>1.匹配任意位置的元素：nth-of-type（an+b）(an是起点，b是偏移量，n=（0.1.2.3……）)</li>
  48.         <li>2.反向选择任意元素：nth-last-of-type(an+b)</li>
  49.         <li>3.选择所有为偶数的元素：nth-of-type(2n)(也可以用nth-of-type(even))，选择所有为奇数的元素：nth-of-type(2n+1)(也可以用nth-of-type(odd)</li>
  50.         <li>4.选择第一个元素：first-of-type</li>
  51.         <li>5.选择最后一个元素：last-of-type</li>
  52.         <li>6.如果只想匹配元素中的唯一子元素，用：only-of-type</li>
  53.     </ul>
  54.     <ul>
  55.         <li>
  56.             only-of-type
  57.         </li>
  58.     </ul>
  59. </body>
  60. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！