作业内容：1. 实例演示选择器的优先级,id,class,tag; 2. 实例演示前端组件样式模块化的原理与实现; 3. 实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表
三种css的写法：

<style></style> 内部样式表 只作用于当前html

<p style=""> 行内样式表 只作用于当前标签
还有一种可以写到外部css文件中。

一 选择器的优先级：id class tag

结论一：相同优先级下，由书写顺序决定优先级，后写的优先级高。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  8.       li {
  9.         background-color: yellow;
  10.       }
  11.       li {
  12.         background-color: aqua;
  13.       }
  14.     </style>
  15.     <title>Document</title>
  16.   </head>
  17.   <body>
  18.     <ul>
  19.       <li class="header" id="main">item1</li>
  20.       <li>item2</li>
  21.       <li id="main">item3</li>
  22.       <li>item4</li>
  23.       <li>item5</li>
  24.     </ul>
  25.   </body>
  26. </html>

效果：

class>tag" class="reference-link">结论二：优先级：id>class>tag

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  8.       #main {
  9.         background-color: green;
  10.       }
  11.       .header {
  12.         background-color: rgb(8, 247, 8);
  13.       }
  15.       li {
  16.         background-color: yellow;
  17.       }
  18.       li {
  19.         background-color: aqua;
  20.       }
  21.     </style>
  22.     <title>Document</title>
  23.   </head>
  24.   <body>
  25.     <ul>
  26.       <li class="header" id="main">item1</li>
  27.       <li class="header">item2</li>
  28.       <li id="main">item3</li>
  29.       <li>item4</li>
  30.       <li>item5</li>
  31.     </ul>
  32.   </body>
  33. </html>

效果：

结论三 优先级可以进行相加 可以吧id class tag按照0,0,0进行计算

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  8.       #main {
  9.         background-color: green;
  10.       }
  11.       .header {
  12.         background-color: rgb(8, 247, 8);
  13.       }
  14.       .header#main {
  15.         background-color: blue;
  16.       }
  17.       li#main.header {
  18.         background-color: red;
  19.       }
  20.       body li .header {
  21.         background-color: yellow;
  22.       }
  23.       li {
  24.         background-color: aqua;
  25.       }
  26.     </style>
  27.     <title>Document</title>
  28.   </head>
  29.   <body>
  30.     <ul>
  31.       <li class="header" id="main">item1</li>
  32.       <li class="header">item2</li>
  33.       <li id="main">item3</li>
  34.       <li>item4</li>
  35.       <li>item5</li>
  36.     </ul>
  37.   </body>
  38. </html>

比如上面的例子
body li .header就可以看成是优先级为0,1,2
li#main.header就可以看成是优先级为1,1,1
效果图：

但是注意：这个优先级怎么加也不会越级，比如tag标签再多也不会比1个class的优先级大。

其它选择器

id class attribute选择器

id class选择器本质上也属于属性选择器
属性选择器用数组进行选择，如下，就会把所有的class=”on”选中了。

  2. li[class="on"]{
  3.     background-color: yellow;
  4. }

也可以进行简写

  1. li.on{
  2.     background-color: yellow;
  3. }

id选择器同理。

上下文选择器
后代选择器

就是选择ul后面所有的li 这个是具有可继承性

  1. ul li {
  2.         background-color: lightgreen;
  3.       }
子元素选择器

> 是表示采用子元素 只选择子元素 不要其它更低级的颜色

  1. body > ul > li {
  2.         background-color: lightblue;
  3.       }
同级相邻选择器

需要有一个起点
假设html：

  1. <ul>
  2.       <li>item1</li>
  3.       <li class="start">item2</li>
  4.       <li>item3</li>
  5.       <li>

css

  1. .start + li {
  2.         background-color: yellow;
  3.       }

这样就吧item3的颜色变成yellow了
把后面所有的元素都选中，将+换成~就行了

~选择器

~就是选择同级所有兄弟元素都选中

  1. .start ~ li{
  2.         background-color: yellow;
  3. }

伪类选择器

虚拟的class选择器

结构伪类选择器

主要是用来选择子元素的，要有一个父元素作为查询起点，如果没有的话，需要从根元素递归查询。
html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <ul class="list">
  13.       <li>item1</li>
  14.       <li>item2</li>
  15.       <li>item3</li>
  16.       <li>item4</li>
  17.       <li>item5</li>
  18.       <li>item6</li>
  19.       <li>item7</li>
  20.       <li>item8</li>
  21.       <li>item9</li>
  22.       <li>item10</li>
  23.     </ul>
  24.   </body>
  25. </html>

选择第三个item，在style处

  1.       .list :nth-child(3) {
  2.         background-color: violet;
  3.       }

完整的表达式是

  1. .list :nth-child(0n + 3) {
  2.         background-color: violet;
  3.       }

效果图

如果是2n+3
从第三个开始数，每两个实现效果。

  1. .list :nth-child(2n + 3) {
  2.         background-color: violet;
  3.       }

冒号”:”就是代表伪类选择器
其实在:之前还有个元素，如果不写默认为*

  1. .list *:nth-child(2n + 3) {
  2.         background-color: violet;
  3.       }

也可以写一个li

  1. .list li:nth-child(2n + 3) {
  2.         background-color: violet;
  3.       }

效果是一样的

分组伪类结构选择器
  1. .list > li:nth-of-type(3) {
  2.         background-color: cyan;
  3.       }


将html中内容进行变更：

  1. <ul class="list">
  2.       <li>item1</li>
  3.       <li>item2</li>
  4.       <li>item3</li>
  5.       <li>item4</li>
  6.       <li>item5</li>
  7.       <li>item6</li>
  8.       <p>item7</p>
  9.       <p>item8</p>
  10.       <li>item9</li>
  11.       <p>item10</p>
  12.     </ul>

选中第一个p和最后一个p

  1. .list > p:first-of-type {
  2.         background-color: green;
  3.       }
  4. .list p:last-of-type {
  5.         background-color: blue;
  6.       }

当然也可以用.list > p:nth-of-type(1)来选中第一个p

选择倒数第三个

  1. .list > li:nth-last-of-type(3) {
  2.         background-color: yellow;
  3.       }

选择单独一个元素
在html中新添加一个列表

  1. <ul>
  2.       <li>item</li>
  3.     </ul>

css

  1.  ul li:only-of-type {
  2.         background-color: yellow;
  3.       }


总结：
选择任何一个:nth-of-type(n)
选择第一个：first-of-type()
选择最后一个：last-of-type()
选择倒数第二个：nth-last-of-type(2)
选择唯一子元素：nth-only-of-type()

模块化组件

我们可以把css样式写到外部css文件，然后在进行引入，代码会清爽很多。

引入css的两种方式：
  1.   @import url(css/header.css);
  2.   <link rel="stylesheet" href="css/header.css">

css模块化：
可以新建一个css文件夹，将每个css样式写入到各自的css文件中。
header.css:

  1. header {
  2.   min-height: 3em;
  3.   background-color: #ddd;
  4. }

main.css

  1. main {
  2.   min-height: 20em;
  3.   background-color: lightblue;
  4. }

footer.css

  1. footer {
  2.   min-height: 3em;
  3.   background-color: #999;
  4. }

demo2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       @import url(css/header.css);
  10.       @import url(css/main.css);
  11.       @import url(css/footer.css);
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <header>页眉</header>
  16.     <main>主题</main>
  17.     <footer>页脚</footer>
  18.   </body>
  19. </html>

效果图

使用伪类进行模块化
只要获取到页面中某个元素组件的入口 在根据子元素的位置使用伪类就可以选择任何一个元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.       @import url(css/menu.css);
  10.       /* 只要获取表单的入口，使用伪类可以获取表单中的任何控件 */
  11.       .login :last-of-type {
  12.         background-color: seagreen;
  13.         color: white;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <nav class="menu">
  19.       <a href="">首页</a>
  20.       <a href="">课程</a>
  21.       <a href="">视频</a>
  22.       <a href="">注册</a>
  23.     </nav>
  24.     <hr />
  25.     <form action="" style="display: grid; gap: 1rem" class="login">
  26.       <input type="text" placeholder="username" />账号
  27.       <input type="password" placeholder="paaword" />密码
  28.       <input type="email" placeholder="xxx@qq.com" />邮箱
  29.       <button>提交</button>
  30.     </form>
  31.   </body>
  32. </html>

menu.css

  1. .menu :first-of-type {
  2.   background-color: green;
  3. }
  4. .menu :last-of-type {
  5.   background-color: blue;
  6. }
  7. .menu:nth-last-of-type(2) {
  8.   background-color: lightgreen;
  9. }

更多相关文章

  1. css第一课
  2. 【CSS入门】CSS基本语法和选择器优先级学习总结简介
  3. 伪类选择器,优先级,模块化
  4. CSS3选择器 :nth-child()的用法
  5. CSS选择器优先级、模块化与伪类选择器的原理及应用
  6. web前端：常用的js语法
  7. 选择器的优先级,id,class,tag
  8. CSS选择器优先级+模块化+伪类选择器
  9. 4.基础数据类型

随机推荐

  1. php的冷门函数之——call_user_func_arra
  2. 快速使用数组的最近元素来确定新元素是否
  3. php中三种数据库的连接方式
  4. php是如何工作的
  5. Updating Checked Checkboxes using Code
  6. 换行符被替换为php中的rn
  7. imagecreatetruecolor（）在symfony中不起作
  8. 写给系统管理员的 25 个 PHP 安全实践
  9. 软件发布：PHP编译工具v1.0
  10. 我得到了“致命错误:未捕获的SoapFault异