devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端-css-2

作者：盐析白兔 | 2024-07-04 08:32:48

赞

踩

前端-css-2

1.背景样式

属性名作用属性值
background-color背景颜色颜色
background-image设置背景图像地址url(地址)
background-repeat设置背景图像重复方式

repeat：重复。

repeat-x：横向重复。

repeat-y：纵向重复。

no-repeat：不重复。

background-position设置背景图像位置关键字。两个长度表示的坐标。百分比
background-attachment背景图像固定scroll：随元素滚动，默认值。fixed：固定。
background背景复合属性多个值使用空格分隔

1.1背景颜色

1. 元素默认背景颜色是透明,background-color的默认值是 transparent（透明）
2. 给 body 设置背景色就是给整个页面设置背景色

  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>Document</title>
  7.     <style>
  8.         div{
  9.             width: 500px;
  10.             height: 600px;
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="box">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aliquam? Iste nihil quis veniam sapiente eius ex commodi ipsam, ratione, est esse unde?</div>
  17. </body>
  18. </html>

 1.2设置背景图像的位置 background-position

1.2.1使用关键字设置属性值：

  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>Document</title>
  7.     <style>
  8.        .box {
  9.             display: inline-block;
  10.             padding: 10px;
  11.             width: 800px;
  12.             height: 500px;
  13.             border: 2px solid #900;
  14.             background-color: #ccc;
  15.             background-repeat: no-repeat;
  16.  
  17.             /* 使用关键字设置背景图像位置 */
  18.             /* 
  19.                 x轴位置：left right center
  20.                 y轴位置：top bottom center
  21.             */
  22.             /* 使用两个值 */
  23.             background-position: left top;
  24.             background-position: right bottom;
  25.             background-position: right center;
  26.             background-position: right top;
  27.             /* 使用一个值  另一个值默认center*/
  28.             background-position: left;   /* left center */
  29.             background-position: bottom; /* center bottom */
  30.             background-position: center; /* center center */
  31.         }
  32.  
  33.         .box01{
  34.             background-image: url(../images/bg5.jpg);
  35.         }
  36.         .box02{
  37.             background-image: url(../images/bg4.jpg);
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <h1>背景图像位置</h1>
  43.     <h2>使用关键字设置背景图像位置</h2>
  44.     <div class="box box01">法友奔遗，慷等能游。</div>
  45.     <div class="box box02">她之间为，朋找极娘。</div>
  46. </body>
  47. </html>

1.2.2通过指定坐标（用长度）设置属性值： 

web的x与y轴

  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>Document</title>
  7.     <style>
  8.        .box {
  9.             display: inline-block;
  10.             padding: 10px;
  11.             width: 500px;
  12.             height: 300px;
  13.             border: 2px solid #900;
  14.             background-color: #ccc;
  15.             background-repeat: no-repeat;
  16.  
  17.             /* 使用关键字设置背景图像位置 */
  18.             /* 
  19.                 x轴位置：left right center
  20.                 y轴位置：top bottom center
  21.             */
  22.             /* 使用两个值 */
  23.             background-position: left top;
  24.             background-position: right bottom;
  25.             background-position: right center;
  26.             background-position: right top;
  27.             /* 使用一个值  另一个值默认center*/
  28.             background-position: left;   /* left center */
  29.             background-position: bottom; /* center bottom */
  30.             background-position: center; /* center center */
  31.         }
  32.         .item {
  33.             display: inline-block;
  34.             padding: 10px;
  35.             width: 500px;
  36.             height: 300px;
  37.             border: 2px solid #900;
  38.             background-color: #791e1e;
  39.             background-repeat: no-repeat;
  40.  
  41.             /* 使用坐标设置背景图像位置 */
  42.             /* 设置的是图像的左上角位置 */
  43.             /* 使用两个长度（px、em） 分别是x坐标 y 坐标 */
  44.             background-position: 0 0;
  45.             background-position: 100px 20px;
  46.             background-position: 520px 320px;
  47.             background-position: -100px 100px;
  48.             /* 只设置一个长度， 被认为是x坐标 y轴位置默认取center */
  49.             background-position: 100px;
  50.             /* 长度表示的坐标和关键字混搭 */
  51.             /* background-position: right -50px;
  52.             background-position: 100px bottom; */
  53.             background-position: right -50px;
  54.             background-position: 100px bottom;
  55.         }
  56.  
  57.         .box01{
  58.             background-image: url(../images/bg5.jpg);
  59.         }
  60.         .box02{
  61.             background-image: url(../images/bg4.jpg);
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <h1>背景图像位置</h1>
  67.     <h2>使用关键字设置背景图像位置</h2>
  68.     <div class="item box box01">法友奔遗，慷等能游。</div>
  69.     <div class="item box box02">她之间为，朋找极娘。</div>
  70. </body>
  71. </html>

 

 1.2.3使用百分比设置属性值：

  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>Document</title>
  7.     <style>
  8.        .box {
  9.             display: inline-block;
  10.             padding: 10px;
  11.             width: 500px;
  12.             height: 300px;
  13.             border: 2px solid #900;
  14.             background-color: #ccc;
  15.             background-repeat: no-repeat;
  16.  
  17.             /* 使用关键字设置背景图像位置 */
  18.             /* 
  19.                 x轴位置：left right center
  20.                 y轴位置：top bottom center
  21.             */
  22.             /* 使用两个值 */
  23.             background-position: left top;
  24.             background-position: right bottom;
  25.             background-position: right center;
  26.             background-position: right top;
  27.             /* 使用一个值  另一个值默认center*/
  28.             background-position: left;   /* left center */
  29.             background-position: bottom; /* center bottom */
  30.             background-position: center; /* center center */
  31.         }
  32.         .item {
  33.             display: inline-block;
  34.             padding: 10px;
  35.             width: 500px;
  36.             height: 300px;
  37.             border: 2px solid #900;
  38.             background-color: #ccc;
  39.             background-repeat: no-repeat;
  40.             /* 使用百分比设置图像位置 */
  41.             /* 
  42.                 元素和图像各自创建一个坐标系
  43.                 原点在各自的左上角，x轴从左到右，y轴从上到下
  44.                 根据百分比从元素上找到坐标点，根据百分比从图像上找到坐标点，两点重合
  45.             */
  46.             /* 两个百分比 */
  47.             /* background-position: 0% 0%;
  48.             background-position: 50% 50%;
  49.             background-position: 20% 10%;
  50.             background-position: 100% 100%; */
  51.             background-position: 50% 50%;
  52.             background-position: 100% 100%;
  53.  
  54.             /* 百分比和其他混搭 */
  55.             /* background-position: 100% 100px;
  56.             background-position: left 100%; */
  57.             background-position: 100% 100px;
  58.             background-position: left 100%;
  59.             /* 值使用一个百分比 被认为x方向位置，另一个方向默认center */
  60.             /* background-position: 10%; */
  61.             background-position: 10%;
  62.         }
  63.  
  64.         .box01{
  65.             background-image: url(../images/bg5.jpg);
  66.         }
  67.         .box02{
  68.             background-image: url(../images/bg4.jpg);
  69.         }
  70.     </style>
  71. </head>
  72. <body>
  73.     <h1>背景图像位置</h1>
  74.     <h2>使用关键字设置背景图像位置</h2>
  75.     <div class="item box box01">法友奔遗，慷等能游。</div>
  76.     <div class="item box box02">她之间为，朋找极娘。</div>
  77. </body>
  78. </html>

1.3背景图像固定 background-attachment

如果设置 background-attachment 为 fixed， 背景图像定位的坐标原点是视口的左上角
背景图像只能显示图像与元素位置重合的位置

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .section-con {
  10.             height: 400px;
  11.             background: #099;
  12.         }
  13.  
  14.         .section-bg {
  15.             height: 300px;
  16.             background-color: #eee;
  17.             background-repeat: no-repeat;
  18.             background-position: center;
  19.  
  20.             /* 设置背景图像固定 */
  21.             background-attachment: fixed;
  22.         }
  23.  
  24.         .section-bg01 {
  25.             background-image: url(../images/bg5.jpg);
  26.         }
  27.  
  28.         .section-bg02 {
  29.             background-image: url(../images/bg4.jpg);
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="section section-con"></div>
  35.     <div class="section section-bg section-bg01"></div>
  36.     <div class="section section-con"></div>
  37.     <div class="section section-bg section-bg02"></div>
  38.     <div class="section section-con"></div>
  39.  
  40.  
  41. </body>
  42. </html>

2.鼠标光标样式 

属性名作用属性值
cursor设置鼠标光标

pointer：小手。

move：移动图标。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             width: 600px;
  11.             height: 250px;
  12.             background: #900;
  13.  
  14.             /* cursor: default;
  15.             cursor: none;  
  16.             cursor: pointer;
  17.             cursor: move; */
  18.             cursor: pointer;
  19.             cursor: move;
  20.             /* cursor: text;  
  21.             cursor: wait;   */
  22.  
  23.             /* 自定义鼠标光标 */
  24.             /* cursor: url(../images/arrow03.png),pointer; */
  25.             /* cursor: url(../images/arrow04.png),pointer; */
  26.         }
  27.  
  28.         p {
  29.             padding: 20px;
  30.             width: 560px;
  31.             background: #ccc;
  32.         }
  33.  
  34.         a {
  35.             cursor: wait;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="box"></div>
  41.     <p>何逝单手爻生的洞德愚罪帝胆易，承连德判想陀回道怒生他，笔丈亓正向投间国轻才珍明至也赏，说是救司陀变，往承作帝胆色为你贼老世斯后，是生而五风在书鲜勉争和视以若非活说丑会，一大卅出丐不为极你赐流己极尺王种车游，大骂丰是说有是的五位，感韩者若尝逃了郭，的常子们。</p>
  42.     <a href="#">超链接</a>
  43. </body>
  44. </html>

3.表格样式 

属性名作用属性值
table-layout设置列宽固定

auto：默认值。

fixed：固定。

border-spacing设置单元格之间的距离长度
border-collapse合并单元格边框

separate：默认值。

collapse：合并

caption-sidecaption-side

top：表格上面。

bottom：表格下面

empty-cells没有内容的单元格显示还是隐藏

show：显示，默认值。

hide：隐藏

注意：表格相关的属性只能设置到 table 标签上才生效！ 

3.1table-layout列宽固定

未设置列宽固定（文字的长度自动适配列宽，不会换行）

 设置列宽固定

  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>Document</title>
  7.     <style>
  8.         .n1{
  9.             width: 800px;
  10.             table-layout: fixed; 
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <table class="n1">
  16.         <!-- 表格标题 -->
  17.         <caption>用户信息表</caption>
  18.         <!-- 表格头 -->
  19.         <thead>
  20.             <tr>
  21.                 <th>序号</th>
  22.                 <th>姓名</th>
  23.                 <th>性别</th>
  24.                 <th>电话</th>
  25.                 <th>地址</th>
  26.             </tr>
  27.         </thead>
  28.         <!-- 表格体 -->
  29.         <tbody>
  30.             <tr>
  31.                 <td>1</td>
  32.                 <td>曹操</td>
  33.                 <td>男</td>
  34.                 <td>13378652389</td>
  35.                 <td>上海市松江区</td>
  36.             </tr>
  37.             <tr>
  38.                 <td>2</td>
  39.                 <td>刘备</td>
  40.                 <td>男</td>
  41.                 <td>13378652388</td>
  42.                 <td>上海市浦东区</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>3</td>
  46.                 <td>高</td>
  47.                 <td>男</td>
  48.                 <td></td>
  49.                 <td>新疆维吾尔自治区伊犁哈萨克自治州</td>
  50.             </tr>
  51.             <tr>
  52.                 <td>4</td>
  53.                 <td>孙悟空</td>
  54.                 <td>男</td>
  55.                 <td>13378652386</td>
  56.                 <td>上海市黄浦区</td>
  57.             </tr>
  58. </body>
  59. </html>

3.2border-spacing  设置单元格之间的距离

  1. <style>
  2.         .n1{
  3.             width: 800px;
  4.             table-layout: fixed; 
  5.             border-spacing: 5px;
  6.         }
  7.     </style>

3.3border-collapse 合并单元格边框

不合并时

合并后 

  1. .n1{
  2.             width: 800px;
  3.             table-layout: fixed; 
  4.             border-spacing: 5px;
  5.             border-collapse: collapse; 
  6.         }
  7.         th,td{
  8.             padding: 10px;
  9.             border: 1px solid #223344;
  10.         }

3.4caption-side 标题位置

将标题放到底部

  1. .n1{
  2.             width: 800px;
  3.             table-layout: fixed; 
  4.             border-spacing: 5px;
  5.             border-collapse: collapse; 
  6.         }
  7.         th,td{
  8.             padding: 10px;
  9.             border: 1px solid #223344;
  10.         }
  11.         caption{
  12.             caption-side: bottom;
  13.         }

3.5empty-cells 没有内容的单元格显示还是隐藏

  1. <style>
  2.         .n1{
  3.             width: 800px;
  4.             table-layout: fixed; 
  5.             border-spacing: 5px;
  6.             /* border-collapse: collapse;  */
  7.             empty-cells: hide;
  8.         }
  9.         th,td{
  10.             padding: 10px;
  11.             border: 1px solid #223344;
  12.         }
  13.         caption{
  14.             caption-side: bottom;
  15.         }
  16.     </style>

 4、列表样式

注意：只有 ul、ol、li 这些标签设置列表样式才有效果！

属性名作用属性值
list-style-type设置列表项图标none：无
list-style-position设置列表项图标位置

outside：在li外面。

inside：在li里面。

list-style-image自定义列表项图标url(图片地址)
list-style复合属性多个值使用空格分隔

 4.1list-style-type，设置列表项图标

  1.  <style>
  2.             li {
  3.             width: 600px;
  4.             padding: 10px;
  5.             margin-bottom: 10px;
  6.             background: #ccc;
  7.         }
  8.         .news{
  9.             list-style-type: square;
  10.         }
  11.     </style>
  12.  <ul class="news">
  13.         <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  14.         <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  15.         <li class="active">留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  16.         <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  17.         <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  18.         <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
  19.     </ul>

 4.2.list-style-position 设置列表项图标位置

  1.  <style>
  2.             li {
  3.             width: 600px;
  4.             padding: 10px;
  5.             margin-bottom: 10px;
  6.             background: #ccc;
  7.         }
  8.         .news{
  9.             list-style-type: square;
  10.             list-style-position: inside;
  11.         }
  12.     </style>

4.3.list-style-image  url(图片地址)

  1.  <style>
  2.             li {
  3.             width: 600px;
  4.             padding: 10px;
  5.             margin-bottom: 10px;
  6.             background: #ccc;
  7.         }
  8.         .news{
  9.             list-style-type: square;
  10.             list-style-position: outside;
  11.             list-style-image: url(../images/hot-icon.png);
  12.         }
  13.     </style>

5.选择器的种类

5.1后代元素选择器

最外面的标签里面所有符合要求的标签都会被修改格式

选择器1 选择器2 {}

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul {
  10.             margin-bottom: 100px;
  11.         }
  12.  
  13.         li {
  14.             margin-top: 10px;
  15.             width: 600px;
  16.             padding: 10px;
  17.             border: 1px solid #999;
  18.         }
  19.  
  20.         /* .news后代中的 li */
  21.         .news li {
  22.             border: 2px solid #900;
  23.         }
  24.         /* .news li{
  25.             border: 3px solid #900;
  26.         } */
  27.  
  28.         /* ol 后代中的 li */
  29.         /* ol li {
  30.             border: 2px solid #900;
  31.         } */
  32.  
  33.         /* .news .item {
  34.             border: 2px solid #900;
  35.         } */
  36.  
  37.         .news ol .item {
  38.             border: 2px solid #900;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <ul class="news">
  44.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  45.         <li class="item">今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  46.         <li>
  47.             今则让奔找，马死程看必沫活，乏俭气，笔。
  48.             <ol class="item">
  49.                 <li>Lorem ipsum dolor sit amet.</li>
  50.                 <li>Lorem ipsum dolor sit amet.</li>
  51.                 <li class="item">Lorem ipsum dolor sit amet.</li>
  52.                 <li class="item">Lorem ipsum dolor sit amet.</li>
  53.                 <li>Lorem ipsum dolor sit amet.</li>
  54.             </ol>
  55.         </li>
  56.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  57.         <li class="item">
  58.             今则让奔找，马死程看必沫活，乏俭气，笔。
  59.             <ul>
  60.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  61.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  62.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  63.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  64.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  65.             </ul>
  66.         </li>
  67.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  68.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  69.     </ul>
  70.  
  71.     <ol class="musics">
  72.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  73.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  74.         <li class="item">妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  75.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  76.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  77.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  78.     </ol>
  79. </body>
  80. </html>

 

5.2子元素选择器

只能一级一级向下找

选择器1 > 选择器2 {}

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul {
  10.             margin-bottom: 100px;
  11.         }
  12.  
  13.         li {
  14.             margin-top: 10px;
  15.             width: 600px;
  16.             padding: 10px;
  17.             border: 1px solid #999;
  18.         }
  19.  
  20.         /* 先找.news 从它的子元素中找li */
  21.         /* .news > li {
  22.             border: 2px solid #900;
  23.         } */
  24.         /* .news > li{
  25.             border: 8px dashed #090;
  26.         } */
  27.         /* ul > li {
  28.             border: 2px solid #900;
  29.         } */
  30.  
  31.         /* .news ol {
  32.             border: 2px solid #900;
  33.         } */
  34.          /* .news ol{
  35.             border:3px solid #009
  36.          } */
  37.         /* .news > li > ol {
  38.             border: 2px solid #900;
  39.         } */
  40.         /* .news > li >ol>.item{
  41.             border: 2px solid #900;
  42.         } */
  43.         .news ul > li {
  44.             border: 2px solid #900;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <ul class="news">
  50.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  51.         <li class="item">今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  52.         <li>
  53.             今则让奔找，马死程看必沫活，乏俭气，笔。
  54.             <ol class="item">
  55.                 <li>Lorem ipsum dolor sit amet.</li>
  56.                 <li>Lorem ipsum dolor sit amet.</li>
  57.                 <li class="item">Lorem ipsum dolor sit amet.</li>
  58.                 <li class="item">Lorem ipsum dolor sit amet.</li>
  59.                 <li>Lorem ipsum dolor sit amet.</li>
  60.             </ol>
  61.         </li>
  62.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  63.         <li class="item">
  64.             今则让奔找，马死程看必沫活，乏俭气，笔。
  65.             <ul>
  66.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  67.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  68.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  69.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  70.                 <li>Lorem ipsum dolor sit amet consectetur.</li>
  71.             </ul>
  72.         </li>
  73.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  74.         <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
  75.     </ul>
  76.  
  77.     <ol class="musics">
  78.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  79.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  80.         <li class="item">妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  81.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  82.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  83.         <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
  84.     </ol>
  85. </body>
  86. </html>

5.3交集选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrapper {
  10.             width: 600px;
  11.             padding: 20px;
  12.             background: #aaa;
  13.         }
  14.  
  15.         p {
  16.             padding: 10px;
  17.             width: 560px;
  18.             background: #ccc;
  19.         }
  20.  
  21.         /* 标签名是p 类名是item */
  22.         /* p.item {
  23.             color: #fff;
  24.             background: #900;
  25.         } */
  26.         /* .wrapper p.item {
  27.             color: #fff;
  28.             background: #900;
  29.         } */
  30.        
  31.         /* 类既是item又是active */
  32.         /* .item.active {
  33.             font-size: 2em;
  34.         } */
  35.         .active.item {
  36.             font-size: 2em;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="wrapper">
  42.         <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  43.         <p class="item active">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  44.         <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  45.         <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  46.         <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  47.         <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  48.         <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  49.     </div>
  50.  
  51.     <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  52.     <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  53.     <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  54.     <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
  55.  
  56.     <ul>
  57.         <li class="item">尚所秦病者，绛非自。</li>
  58.         <li class="item active">尚所秦病者，绛非自。</li>
  59.         <li class="item">尚所秦病者，绛非自。</li>
  60.         <li class="item active">尚所秦病者，绛非自。</li>
  61.         <li class="item">尚所秦病者，绛非自。</li>
  62.     </ul>
  63. </body>
  64. </html>

选择器1选择器2 {}

.item.active {}
.active.item {}
div.item {}

5.4并集选择器

  1. h1,h2,h3,h4,h5,h6 {
  2.             font-weight: normal;
  3.         }

选择器1, 选择器2 {}

5.5 伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         :link {
  10.             color: pink;
  11.         }
  12.  
  13.         :visited {
  14.             color: #099;
  15.         }
  16.         a:link{
  17.             color: chartreuse;
  18.         }
  19.         a:visited{
  20.             color: pink;
  21.         }
  22.         a:hover{
  23.             color: aqua;
  24.         }
  25.         a:active{
  26.             color: black;
  27.         }
  28. /* 
  29.         a:hover {
  30.             color: #990;
  31.         }
  33.         a:active {
  34.             color: #900;
  35.         }
  37.         .news {
  38.             width: 600px;
  39.             padding: 0;
  40.             list-style: none;
  41.         }
  43.         .news li {
  44.             padding: 10px;
  45.         }
  47.         .news li:hover {
  48.             color: #fff;
  49.             background: #900;
  50.         } */
  51.     </style>
  52. </head>
  53. <body>
  54.     <h1>伪类选择器</h1>
  55.     <a href="http://www.baidu.com">百度</a>
  56.     <a href="http://www.atguigu.com">尚硅谷</a>
  57.     <a href="http://www.douban.com">豆瓣网</a>
  58.     <a href="http://www.4399.com">4399小游戏</a>
  59.     <a href="http://www.fackbook.com">fackbook</a>
  60.  
  61.     <ul class="news">
  62.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  63.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  64.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  65.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  66.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  67.         <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
  68.     </ul>
  69. </body>
  70. </html>

:link            选择未访问过的超链接
:visited        选择已访问过的超链接
:hover            鼠标悬停在元素上
:active            鼠标悬停在元素上且鼠标按键按下不抬起

多个伪类选择器一起使用，请按照 :link、:visited、:hover、:active 顺序书写 (love hate 记忆法) 

5.2选择器权重（优先级）

5.2.1 单个选择器之间的权重

ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

5.2.2组合选择器优先级比较规则

1. 两个组合选择器，先比较ID的数量，数量多者权重高，比较结束
2. ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束
3. 类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高， 比较结束
4. 两个选择器权重一致，后面覆盖前面

组合： 并集选择器的组合，各自计算各自的权重，不会放在一起计算

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/786237
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号