css 样式的引入，选择器的使用和优先级 ----0322 - css

Home > List of blog posts > css 样式的引入，选择器的使用和优先级 ----0322

Blogger Information

Blog 18

fans 1

comment 0

visits 12264

Special Recommendation

More>

Related recommendations

1.css 样式的优先级

1.1 !important > 行内样式 > style 标签设置的内部样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器的优先级</title>
    <!-- 内部样式,仅作用于当前的html文档 -->
    <style>
      h1 {
        color: hotpink;
        /* !important 级别最高的,不建议用,适用于调试 */
        /* color: lawngreen !important; */
      }
    </style>
  </head>
  <body>
    <!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 -->
    <h1 style="color: goldenrod">hello world!</h1>
    <h1>hello world!</h1>
  </body>
</html>

1.2 id 选择器 > class 选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器的优先级</title>
    <style>
      /* 选择器优先级的等级：
        1.优先级相同时,书写顺序决定优先级 
        2.id选择器 > class选择器 > 标签选择器
        */
      h1 {
        color: hotpink;
      }
      h1 {
        color: lawngreen;
      }
      #first {
        color: red;
      }
      .active {
        color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 -->
    <h1 class="active" id="first">hello world!</h1>
  </body>
</html>

2.外部 CSS 样式引入的方式

<!-- 1. style 标签引入 -->
<style>
  @import url(style.css);
</style>
<!-- 2. link 标签引入 -->
<link rel="stylesheet" href="style.css" />

3.前端组件样式模块化的原理与实现

前端组件模块化的原理：把前端页面主体分为几个不同的部分，在不同的 css 文件中进行样式操作。

<!-- index.html 文件-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块化样式表</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>

/* index.css 文件 */
@import url(header.css);
@import url(main.css);
@import url(footer.css);

4.伪类选择器

4.1 伪类选择器的使用方式

选择任何一个: :nth-of-type(n)
选择第一个: :first-of-type
选择最后一个: :last-of-type
选择倒数某一个: :nth-last-of-type()
唯一子元素的元素: :only-of-type

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      /* 选中ul下的第三个li */
      ul li:nth-child(3) {
        background-color: gray;
      }
      /* 选中 ul 下的第一个li */
      ul li:first-child {
        background-color: blue;
      }
      /* 选中 ul 下的最后一个li */
      ul li:last-child {
        background-color: hotpink;
      }
      /* 选中 ul 下倒数第二个 li */
      ul li:nth-last-of-type(2) {
        color: hotpink;
      }
      /* 选择任何一个: :nth-of-type(n)
      选择第一个: :first-of-type
      选择最后一个: :last-of-type
      选择倒数某一个: :nth-last-of-type()
      唯一子元素的元素: :only-of-type */
    </style>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </body>
</html>

4.2 用伪类来模块化元素组件

1）获取到页面中某个元素组件的入口，用伪类操作子元素

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件化编程思想</title>
    <style>
      /* 只要获取到页面中某个元素组件的入口,再根据子元素的位置,
      使用伪类就可以选择任何一个元素了 */
      /* 选择首页 */
      .index {
        background-color: yellow;
      }
      /* .menu是入口 */
      .menu :first-of-type {
        background-color: lightgreen;
      }
      .menu :last-of-type {
        background-color: lightgreen;
      }
      .menu :nth-last-of-type(2) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <nav class="menu">
      <a href="">首页</a>
      <a href="">视频 </a>
      <a href="">下载</a>
      <a href="">注册/登录</a>
    </nav>
  </body>
</html>

2）只要获取表单的入口,使用伪类可以获取表单中任何一个控件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件化编程思想</title>
    <style>
      /* 只要获取表单的入口,使用伪类可以获取表单中任何一个控件 */
      /* 获取到提交按钮 */
      .login :only-of-type {
        background-color: seagreen;
        color: white;
      }
      /* 文本框中输入字体为红色 */
      .login input:first-of-type {
        color: red;
      }
    </style>
  </head>
  <body>
    <form action="" style="display: grid; gap: 1rem" class="login">
      <input type="text" placeholder="UserName" />
      <input type="password" placeholder="Password" />
      <input type="email" placeholder="demo@email.com" />
      <button>提交</button>
    </form>
  </body>
</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

0319作业

2021-03-25 12:01:48