search

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

css引入方式与选择器

陈强
陈强原创
2020年12月16日 10:43:55523浏览

css引入方式

  • 引入外部样式表
  1.  <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>Document</title>
  5.     <!-- 外部样式表也叫公共样式表，可多个页面引用 -->
  6.     <link rel="stylesheet" href="css/style.css" />
  7.   </head>
  • 内联样式
  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>Document</title>
  5.     <style>
  6.       /* 内联样式通过<style>标签声明，只应用于当前页面 */
  7.         ul>li {
  8.           background-color: chartreuse;
  9.         }
  10.     </style>
  11.   </head>
  • style样式属性
  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>Document</title>
  5.   </head>
  6.   <body>
  7.   <!--style样式属性只作用于当前元素 -->
  8.     <h1 style="color: red">css样式</h1>
  9.   </body>

标签选择器

  1.  /* 定义标签元素  */
  2.  li {
  3.     background-color: red;
  4. }

效果截图

上下文选择器

  1. <style>
  2.   ul li p {
  3.       background-color: darkcyan;
  4. }
  5. </style>
  6. <ul>
  7.    <li>
  8.         <dl>
  9.             <dt>标签1</dt>
  10.             </dl>
  11.         <p>这里是一个P标签</p>
  12.    </li>
  13.    <li id="site">标签2</li>
  14.    <li>标签3</li>
  15.    <li class="top">标签4</li>
  16.    <li>标签5</li>
  17.    <li>标签6</li>
  18.    <li>标签7</li>
  19.    <li>标签8</li>
  20. </ul>

效果截图

子选择器

  1. <style>
  2.   ul>li {
  3.       background-color: lemonchiffon;
  4. }
  5. </style>
  6. <ul>
  7.    <li>
  8.         <dl>
  9.             <dt>标签1</dt>
  10.             </dl>
  11.         <p>这里是一个P标签</p>
  12.    </li>
  13.    <li id="site">标签2</li>
  14.    <li>标签3</li>
  15.    <li class="top">标签4</li>
  16.    <li>标签5</li>
  17.    <li>标签6</li>
  18.    <li>标签7</li>
  19.    <li>标签8</li>
  20.    <ul>
  21.         <li>内容</li>
  22.    </ul>
  23. </ul>

效果截图

类选择器

  1. <style>
  2.  /* 根据类定义元素  */
  3.  .top {
  4.    background-color: blueviolet;
  5. }
  6. </style>
  7.  <ul>
  8.       <li>标签1</li>
  9.       <li>标签2</li>
  10.       <li>标签3</li>
  11.       <li class="top">标签4</li>
  12.       <li>标签5</li>
  13.       <li>标签6</li>
  14.       <li>标签7</li>
  15.       <li>标签8</li>
  16.     </ul>

效果截图

id选择器

  1. <style>
  2.  /* 根据id定义元素  */
  3.  #site {
  4.    background-color: crimson;
  5. }
  6. </style>
  7. <ul>
  8.    <li>标签1</li>
  9.    <li id="site">标签2</li>
  10.    <li>标签3</li>
  11.    <li class="top">标签4</li>
  12.    <li>标签5</li>
  13.    <li>标签6</li>
  14.    <li>标签7</li>
  15.    <li>标签8</li>
  16. </ul>

效果截图

一般同胞选择器

  1. <style>
  2.  .top ~ li {
  3.    background-color: darkcyan;
  4. }
  5. </style>
  6. <ul>
  7.    <li>标签1</li>
  8.    <li id="site">标签2</li>
  9.    <li>标签3</li>
  10.    <li class="top">标签4</li>
  11.    <li>标签5</li>
  12.    <li>标签6</li>
  13.    <li>标签7</li>
  14.    <li>标签8</li>
  15. </ul>

效果截图

相邻同胞选择器

  1. <style>
  2.  .top + li {
  3.    background-color: darkcyan;
  4. }
  5. </style>
  6. <ul>
  7.    <li>标签1</li>
  8.    <li id="site">标签2</li>
  9.    <li>标签3</li>
  10.    <li class="top">标签4</li>
  11.    <li>标签5</li>
  12.    <li>标签6</li>
  13.    <li>标签7</li>
  14.    <li>标签8</li>
  15. </ul>

效果截图

伪类选择器

  • 定义第一个元素 :first-of-tpye
  1. <style>
  2.   /* 定义第一个元素  */
  3.   ul > li:first-of-type {
  4.   background-color: chocolate;
  5. }
  6. </style>

效果截图

  • 定义最后一个元素 :last-of-type
    1. <style>
    2. /* 定义最后一个元素  */
    3. ul > li:last-of-type {
    4. background-color: violet;
    5. }
    6. </style>

    效果截图

  • 定义偶数元素 :nth-of-type(2n)

    1. <style>
    2. /* 定义偶数元素  */
    3. ul > li:nth-of-type(2n) {
    4. background-color: chocolate;
    5. }
    6. </style>

    效果截图

  • 定义奇数元素 :nth-of-type(2n-1)

    1. <style>
    2. /* 定义奇数元素  */
    3. ul > li:nth-of-type(2n-1) {
    4. background-color: green;
    5. }
    6. </style>

    效果截图

上一条：CSS样式表的引入方式与选择器练习下一条：1118 关于PHP常量的总结以及变量过滤器的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多