search

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

CSS引入方式与选择器

一代宗师
一代宗师原创
2021年02月07日 01:35:51554浏览

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>
上一条：移动端h5常用的几款插件下一条：iframe与css基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多