Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础、选择器、模块化组件
Blogger Information
Blog 13
fans 1
comment 0
visits 9901
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css基础、选择器、模块化组件
大宇
Original
630 people have browsed it

作业内容：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>

效果：

结论二：优先级：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. }

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