Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS引入方式与选择器
Blogger Information
Blog 11
fans 0
comment 1
visits 7823
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引入方式与选择器
一代宗师
Original
553 people have browsed it

CSS引入方式

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>CSS三种引入方式</title>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!--外部样式-->
  8.     <link type="text/css" rel="stylesheet" href="style.css" />
  9.     <!--内嵌样式-->
  10.     <style>
  11.       .head{
  12.           width: 100px;
  13.           height: 100px;
  14.       }
  15.     </style>
  16. </head>
  17. <body>
  18.     <!--行内样式-->
  19.     <p style="color:#F00; "></p>
  20.     <div class="head"></div>
  21.     <div></div>
  22. </body>
  23. </html>

选择器

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器</title>
  7.     <style>
  8.         p{color: darkmagenta;}
  9.         .header{
  10.             width: 1920px;
  11.         }
  12.         #main{
  13.             width: 1920px;
  14.         }
  15.        /* 同级相邻选择器 */
  16.         .str+li{color: deepskyblue;}
  17.         /* 同级所有选择器 */
  18.         .int~li{color: gold;}
  19.         /* 后代选择器 */
  20.         ul li{
  21.           color: hotpink;
  22.         }
  23.         /* 子元素选择器 */
  24.         body>ul>li{
  25.           color: rgb(228, 51, 20);
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <p>标签选择器</p>
  31.     <div class="header">class选择器</div>
  32.     <div id="main"></div>
  33.     <ul>
  34.         <li>text1</li>
  35.         <li class="str">text2</li>
  36.         <li>text3</li>
  37.         <ul>
  38.             <li class="int">text4</li>
  39.             <li>text5</li>
  40.             <li>text6</li>
  41.         </ul>
  42.     </ul>
  43. </body>
  44. </html>

伪类选择器

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>伪类选择器</title>
  7.     <style>
  8.         ul li:nth-of-type(3){
  9.             color: hotpink;
  10.         }
  12.         ul li:nth-of-type(n){
  13.             color: hotpink;
  14.         }
  16.         ul li:nth-of-type(2n){
  17.             color: #000;
  18.         }
  20.         ul li:nth-of-type(2n+1){
  21.            color: lawngreen;
  22.         }
  24.         ul li:nth-of-type(even){
  25.            color: lightcoral;
  26.         }
  27.         ul li:nth-of-type(odd){
  28.             color: lightgray;
  29.         }
  31.         ul li:first-of-type{color: mediumvioletred;}
  32.         ul li:last-of-type{color: midnightblue;}
  33.         ul li:nth-of-type(n+5){color: blue;}
  34.         ul li:nth-last-of-type(-n+3){color: brown;}
  35.         ul li:nth-last-of-type(4){color: rgb(243, 16, 84);}
  37.         ul li:only-of-type{color: darkblue;}
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul>
  43.         <li>text1</li>
  44.         <li>text2</li>
  45.         <li>text3</li>
  46.         <li>text4</li>
  47.         <li>text5</li>
  48.         <li>text6</li>
  49.         <li>text7</li>
  50.         <li>text8</li>
  51.         <li>text9</li>
  53.     </ul>
  54.     <ul>
  55.         <li>texts</li>
  56.     </ul>
  57. </body>
  58. </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