ASCII码 ASCII码

样式分类与选择器详解

发布于：2022-07-08 13:28:48  栏目：技术文档

样式分类与选择器详解

样式分类

1.内联样式

1.1 默认样式：用户代理样式，是浏览器为每个元素预置的样式1.2 继承样式：颜色，字体等样式，可由父级进行设置，子级直接继承1.3 自定义样式：就是元素中的style属性设置的样式1.4 优先级：自定义样式 > 继承样式 > 默认样式

内敛样式实例

  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>样式选择器练习</title>
  8. </head>
  9. <body style="color:red ;">
  10.     <h1 style="color:blue ;">好好学习，天天向上</h1>
  11. </body>
  12. </html>

2.外部样式

2.1 通过link（属性即为静态样式管理，无位置要求）标签引入外部css代码文档，对html文件中的标签进行样式管理2.2 html引入的css文档，为直接引用，无需html等开始或停止标签，直接书写标签对象+{样式内容}2.3 优先级：自定义样式 > 外部样式 > 继承样式 > 默认样式，外部样式（css文档）通过权重区分优先级

外部样式>继承样式实例

  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>样式选择器练习</title>
  8.     <link rel="stylesheet" href="style2.css">
  9. </head>
  10. <body style="color:red ;">
  11.     <h1>好好学习，天天向上</h1>
  12. </body>
  13. </html>

css代码

  1. h1 {
  2.     color: blueviolet;
  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>样式选择器练习</title>
  8.     <link rel="stylesheet" href="style2.css">
  9. </head>
  10. <body style="color:red ;">
  11.     <h1 style="color: blue;">好好学习，天天向上</h1>
  12. </body>
  13. </html>

css代码

  1. h1 {
  2.     color: blueviolet;
  3. }

效果

3外部样式优先级

3.1 id，class(或者属性)，tag对应（百，十，个），优先级比较按照数学思维即可，举例：如（1,0,0）> (0,9,0) > (0,8,0) > (0,0,9)3.2 (1,1,1)表示有一个id，一个class（属性），一个tag3.3 !important:临时提高权重，调试使用，不建议商业代码使用，并且区分三级权重时候无法都用!important3.4 在权重相同的情况，外部样式按照由上倒下，由左向右读取，后面的样式会覆盖前面的样式，相当于顺序执行css3.5 其中群组选择器的权重，由各自标签的id或者class（属性）决定，之间互不干扰

权重比较实例

  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>样式选择器练习</title>
  8.     <link rel="stylesheet" href="style2.css">
  9. </head>
  10. <body style="color:red ;">
  11.     <h1 id="aaa"; class="bbb";>
  12.         好好学习天天向上
  13.     </h1>
  14. </html>

css代码

  1. h1#aaa.bbb{
  2.     color: violet;
  3. }
  4. h1#aaa{
  5.     color: brown;
  6. }
  7. h1 {
  8.     color: blueviolet;
  9. }

效果

4. 外部样式选择器

4.1 标签选择器，格式：标签名{css元素}，例：h1 {color:red;}4.2 属性选择器，格式：标签名[属性]{css元素}，例：h1[title=”welcome”]{color:red}4.3 群组选择器，格式：标签名1,2,3+id,class,或者[属性]{css元素}，例：h1#aaa,h2#aaa{color：red}4.4 通配选择器，格式：父标签+{css元素}，通配的是子标签，通配多层标签，例：bdoy {color:red}

外部样式选择器实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>样式选择器练习</title>
  9.     <link rel="stylesheet" href="style2.css">
  10. </head>
  11. <body style="color:red ;">
  12.         <h1 id="aaa" ; class="bbb" ; >
  13.                 好好学习天天向上
  14.         </h1>
  15.         <h2 id="ccc" ; class="ddd" ; title="name">
  16.                 同学们好
  17.         </h2>
  18.         <h2 id="eee" ; class="fff" ;>
  19.             你在干什么
  20.         </h2>
  21.         <h3 class="ggg">
  22.             老师好
  23.         </h3>
  24.         <div>
  25.             <h2>
  26.                 今天上班真忙
  27.             </h2>
  28.             <h2>
  29.                 今天上班真闲
  30.             </h2>
  31.             <h2>
  32.                 今天上班不忙不闲
  33.             </h2>
  34.         </div>
  35. </body>
  36. </html>

css代码

  1. h1{
  2.     color:red;
  3. }
  5. h2[title="name"]{
  6.     color: blue;
  7. }
  9. h2#eee,h3.ggg{
  10.     color: green;
  11.     }
  13. div *{
  14.     color: aqua;
  15. }

效果

5.上下文选择器

5.1 子元素选择，用 > 号连接，格式: .list > .item{},对父类list，下面的子类item，进行选择,子类的子类不被选择5.2 后代元素，用 “空格” 连接，格式： .list .item{},对父类list，下面的子类以及子类的子类item，前提是类相同，进行选择5.3 相邻兄弟，用 + 号连接，格式：.list > .item.five + {}，对父类list，下面的子类item.five，通过类对子元素精确选择，用+号以及通配符找到下一个5.4 所有兄弟，用 ~ 号连接，格式：.list > .item.five ~ {}，对父类list，下面的子类item.five，通过类对子元素精确选择，用~号以及通配符找到以下全部

上下文选择器实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>样式选择器练习</title>
  9.     <link rel="stylesheet" href="style2.css">
  10. </head>
  12. <body class="hhh">
  13.         <h1 id="aaa" ; class="bbb" ; >
  14.                 好好学习天天向上
  15.         </h1>
  16.         <h2 id="ccc" ; class="ddd" ; title="name">
  17.                 同学们好
  18.         </h2>
  19.         <h2 id="eee" ; class="fff" ;>
  20.             你在干什么
  21.         </h2>
  22.         <h3 class="ggg">
  23.             老师好
  24.         </h3>
  25.         <div class="xxx">
  26.             <h2 class="yyy">今天上班真忙
  27.                 <h3 class="yyy">今天上班真闲<h4 class="yyy">shang</h4></h3>
  28.             </h2>
  29.             <h2>
  30.                 今天上班不忙不闲
  31.             </h2>
  32.         </div>
  33.         <main class="name">
  34.             <ul class="name1">
  35.                 <li>奥里给1</li>
  36.                 <li>奥里给2</li>
  37.                 <li class="name2">奥里给3</li>
  38.                 <li>奥里给4</li>
  39.                 <li>奥里给5</li>
  40.             </ul>
  41.         </main>
  42. </body>
  43. </html>

css代码

  1. .hhh > .bbb{
  2.     color:red;
  3. }
  5. .xxx .yyy{
  6.     color: blue;
  7. }
  9. .hhh > .ddd +*{
  10.     color: yellow;
  11. }
  13. .name > .name1 > .name2 ~ *{
  14.     color: green;
  15. }

效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行