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

首页 > 博客列表 > css 样式的引入，选择器的使用和优先级 ----0322

博主信息

博文 18

粉丝 1

访问量 16119

专题推荐

更多>

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>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0319作业

2021-03-25 12:01:48