search

博客列表 >CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与实现、常用伪类选择器的使用方式，并用伪类来模块化元素组件

CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与实现、常用伪类选择器的使用方式，并用伪类来模块化元素组件

浅笑
浅笑原创
2021年05月23日 23:10:01690浏览

一. CSS简介

CSS即层叠样式表，是一种用来设置网页中元素的样式的计算机语言。

二.CSS语法

CSS样式规则：

1.选择器指向你需要设置样式的HTML元素。
2.每条声明都包含一个CSS属性名称和一个值，以冒号分隔。
3.声明块在花括号内；多条CSS、声明用分号分隔。
4.选择器+声明块=样式规则
实例
在此例中，所有 <h1>元素都居中对齐，且带有绿色文本颜色。

效果图：

例子解释
h1是CSS中的选择器，它指向要设置样式的HTML元素：<h1>。
color是属性，green是属性值。
text-align 是属性；center是属性值。
注：
1.important:级别最高的，不建议用，适用于调试。
2.行内样式：适用于当前元素，优先级要高于style标签设置的内部样式。

三.CSS选择器

CSS选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
1.简单选择器（根据名称、id、类来选取元素）
2.组合器选择器（根据它们之间的特定关系来选取元素）
3.伪类选择器（根据特定状态选取元素）
4.伪元素选择器（选取元素的一部分并设置其样式）
5.属性选择器（根据属性或属性值来选取元素）
简单的CSS选择器

CSS Id和Class
id和class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
基本选择器
实例
效果图

代码块

  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.     <style>
  9.       /* 标签，属性*/
  10.       li {
  11.         background-color: green;
  12.       }
  14.       /* 属性选择器 */
  15.       /*li[class="on"] {
  16.         background-color: yellow;
  17.       } */
  18.       li.on {
  19.         background-color: yellow;
  20.       }
  22.       li[id="foo"] {
  23.         background-color: lightgreen;
  24.       }
  26.       li#foo {
  27.         background-color: lightcoral;
  28.       }
  30.       /* id,class选择器，本质上仍是属性选择器 */
  32.       li[title="three"] {
  33.         background-color: cyan;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <ul>
  39.       <!--元素 =标签 + 属性 来描述 -->
  40.       <li id="foo">item1</li>
  41.       <li class="on">item2</li>
  42.       <li id="three">item3</li>
  43.       <li class="on">item4</li>
  44.       <li class="on">item5</li>
  45.     </ul>
  46.   </body>
  47. </html>

上下选择器
实例
效果图

代码块

  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.     <style>
  9.       /* 根据元素位置来选择*/
  10.       /* 后代选择器 */
  11.       /* 0,0,2 */
  12.       ul li {
  13.         background-color: lightblue;
  14.       }
  16.       /* 只选中子元素，忽略孙元素 */
  17.       /* 0,0,3 */
  18.       body > ul > li {
  19.         background-color: lightgreen;
  20.       }
  22.       /* 同级相邻 */
  23.       .start + li {
  24.         background-color: yellow;
  25.       }
  27.       /* 同级所有兄弟 */
  28.       .start ~ li {
  29.         background-color: yellow;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <ul>
  35.       <li>item1</li>
  36.       <li class="start">item2</li>
  37.       <li>item3</li>
  38.       <li>
  39.         item4
  40.         <ul>
  41.           <li>item4-1</li>
  42.           <li>item4-2</li>
  43.           <li>item4-3</li>
  44.         </ul>
  45.       </li>
  46.       <li>item5</li>
  47.     </ul>
  48.   </body>
  49. </html>

伪类选择器原理与应用
实例1 伪类
效果图
代码块

  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.     <style>
  9.       /* 结构伪类：选择子元素，要有一个父元素作为查询点 */
  10.       /* .list > :nth-child(3) {
  11.         background-color: violet;
  12.       } */
  13.       /* 匹配任何位置的元素
  14.       n = (0,1,2,3,4...) */
  15.       .list > li:nth-child(0n + 3) {
  16.         background-color: violet;
  17.       }
  19.       /* 分组伪类结构选择器，推荐使用 */
  21.       .list > li:nth-of-type(3) {
  22.         background-color: cyan;
  23.       }
  25.       /* 选中第一个p  */
  26.       .list > p:nth-of-type(1) {
  27.         background-color: lightgreen;
  28.       }
  30.       .list > li:nth-of-type(1) {
  31.         background-color: lightgreen;
  32.       }
  33.       /* 最后一个li  */
  34.       .list > li:nth-of-type(7) {
  35.         background-color: green;
  36.       }
  38.       /* 最后一个p  */
  39.       .list > p:nth-of-type(3) {
  40.         background-color: lightblue;
  41.       }
  43.       .list p:last-of-type {
  44.         background-color: blue;
  45.       }
  47.       .list p:first-of-type {
  48.         background-color: red;
  49.       }
  51.       /* 选择倒数第三个  */
  52.       .list > li:nth-last-of-type(3) {
  53.         background-color: yellow;
  54.       }
  56.       ul li:only-of-type {
  57.         background-color: yellow;
  58.       }
  60.       /* 选择任何一个：:nth-of-type(n)
  61.       选择第一个：:first-of-type
  62.       选择最后一个：:last-of-type
  63.       选择倒数某一个：:nth-last-of-type()
  64.       唯一子元素的元素：:only-of-type */
  65.     </style>
  66.   </head>
  67.   <body>
  68.     <ul class="list">
  69.       <li>item1</li>
  70.       <li>item2</li>
  71.       <li>item3</li>
  72.       <li>item4</li>
  73.       <li>item5</li>
  74.       <li>item6</li>
  75.       <p>item7</p>
  76.       <p>item8</p>
  77.       <li>item9</li>
  78.       <p>item10</p>
  79.     </ul>
  81.     <ul>
  82.       <li>item</li>
  83.     </ul>
  84.   </body>
  85. </html>

实例2 组件化编程思想
效果图

代码块

  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.     <style>
  9.       /* 只要获取到某个页面中某个元素组件的入口，
  10.         在根据子元素的位置，
  11.         使用伪类就可以选择任何一个元素 */
  13.       /* 选择首页 */
  14.       /* .index {
  15.         background-color: yellow;
  16.       } */
  17.       /* menu是入口 */
  18.       .menu :first-of-type {
  19.         background-color: lightgreen;
  20.       }
  21.       .menu :last-of-type {
  22.         background-color: lightgreen;
  23.       }
  24.       .menu :nth-last-of-type(2) {
  25.         background-color: yellow;
  26.       }
  28.       /* 只要获取表单的入口，使用伪类可以获取表单中的任何一个控件 */
  29.       .login :only-of-type {
  30.         background-color: seagreen;
  31.         color: white;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <nav class="menu">
  37.       <a href="">首页</a>
  38.       <a href="">视频</a>
  39.       <a href="">下载</a>
  40.       <a href="">注册/登录</a>
  41.     </nav>
  43.     <hr />
  45.     <form action="" style="display: grid; gap: 1rem" class="login">
  46.       <input type="text" placeholder="UserName" />
  47.       <input type="password" placeholder="Password" />
  48.       <input type="email" placeholder="demo@email.com" />
  49.       <button>提交</button>
  50.     </form>
  51.   </body>
  52. </html>

导入组件
复制一段代码，在css文档中新建一个menu组件，粘贴保存。在代码中导入这个组件，效果和复制的代码一样。
演示图


上一条：CSS盒模型/Box-szing功能/相对定位、绝对定位的原理和联系下一条：a.img.table标签用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多