简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与实现、常用伪类选择器的使用方式，并用伪类来模块化元素组件
Blogger Information
Blog 4
fans 0
comment 0
visits 7146
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
676 people have browsed it

一. 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组件，粘贴保存。在代码中导入这个组件，效果和复制的代码一样。
演示图


Correction status：Uncorrected

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！