简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础及选择器
Blogger Information
Blog 10
fans 0
comment 0
visits 7418
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
592 people have browsed it

css 基础语法

1.css 基础规则

术语：选择器，声明块，规则，属性和值

序号 属性 值
1 选择器 标签选择器<br>类选择器<br>id 选择器
2 声明块 声明块由一对{…..}包裹的内容
3 规则 由选择器加声明块组成
4 属性和值 声明块中的明值对

1.css 语法优先级

一个元素会受到四个级别声明影响

  1. 继承的:根据元素在文档中的结构和层级关系来确定它最终的样式
  2. 用户代理样式:浏览器的,大多数浏览器表现基本一致
  3. 自定义的:写到 html 文档中头部 style 标签中
  4. 行内样式(内联样式),写到 style 属性中的

2.层叠优先级

标签选择器<属性选择器<id 选择器

  1. h1 {
  2.   color: green !important;
  3.   /* !important强制提权 */
  4. }
  5. .active {
  6.   color: red;
  7. }
  8. #first {
  9.   color: royalblue;
  10. }
  1. <h1 class="active" id="first">HelloWord</h1>

2.css 引入方式及模块化编程

序号 引入方式 注释
1 内部样式 仅对当前文档元素有效，头部编写使用 style 标签。
2 外部样式 适用于所有引入了这个 css 样式表的 html 文档，使用 link 标签
3 行内样式 仅适用于当前页面中的指定元素，使用 style 属性

1.css 内部样式引用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css引入方法</title>
  7.     <!-- 1，内部样式 -->
  8.     <style>
  9.       h1 {
  10.         color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h1>helloword</h1>
  16.   </body>
  17. </html>

2.css 外部样式引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css引入外部样式表/公共样式表</title>
  7.     <style>
  8.       /* 1.css代码中引入
  9.             但是此方法不常用，一般用link标签 */
  10.       /* @import url(css/style.css); */
  11.       /* --------------------------------- */
  12.     </style>
  13.     <!--  2.常用外部引入方式 -->
  14.     <link rel="stylesheet" href="css/style.css" />
  15.   </head>
  16.   <body>
  17.     <h1>helloword</h1>
  18.   </body>
  19. </html>
  1. /* 文档css/style.css */
  2. h1 {
  3.   color: blue;
  4. }

3.css 行内样式引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>行内样式</title>
  7.   </head>
  8.   <body>
  9.     <h1 style="color: red">helloword</h1>
  10.   </body>
  11. </html>

4.css 模块化引入

第一种公共头尾引用，只需将头部与尾部分离增加 import 引入即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>当前页面import引入</title>
  7.     <style>
  8.       @import url(css/head.css);
  9.       @import url(css/footer.css);
  10.       main {
  11.         min-height: 500px;
  12.         background-color: yellow;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <header>页眉</header>
  18.     <main>主体</main>
  19.     <footer>页脚</footer>
  20.   </body>
  21. </html>
  1. /* head的公共部分css */
  2. header {
  3.   height: 50px;
  4.   background-color: #6666;
  5. }
  1. /* footer的公共部分引入 */
  2. footer {
  3.   height: 50px;
  4.   background-color: darkmagenta;
  5. }

第二种 link 引入分离部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css模块化编程link引入</title>
  7.     <link rel="stylesheet" href="css/style1.css" />
  8.   </head>
  9.   <body>
  10.     <header>页眉</header>
  11.     <main>主体</main>
  12.     <footer>页脚</footer>
  13.   </body>
  14. </html>
  1. @import url(head.css);
  2. @import url(footer.css);
  3. /* ccss同上ss同上 */
  4. main {
  5.   min-height: 500px;
  6.   background-color: yellow;
  7. }

3.选择器

1.简单选择器

序号 简单选择器 值
1 标签选择器 页面中的元素标签
2 属性选择器 分为 id 选择器和类选择器 class

分为两种标签选择器，属性选择器（class，id）

  1. <ul>
  2.   <li>item1</li>
  3.   <li class="foo">item2</li>
  4.   <li>item3</li>
  5.   <li class="foo">item4</li>
  6.   <li id="roo">item5</li>
  7. </ul>
  1. /* 1.标签选择器 */
  2. li {
  3.   background-color: yellowgreen;
  4. }
  5. /* 2.类选择器 ,两者皆可*/
  6. li[class="foo"] {
  7.   background-color: blue;
  8. }
  9. .foo {
  10.   background-color: blue;
  11. }
  12. /* 3.id选择器 ，两者皆可*/
  13. li[id="roo"] {
  14.   background-color: darkred;
  15. }
  16. #roo {
  17.   background-color: deeppink;
  18. }

2.上下文选择器

html 是一个结构化的文档，每一个元素在文档中都有确切的位置
所以用上下文选择器是没有问题的

序号 属性 值
1 空格 后代选择器,标签所有层级
2 > 子元素选择器：仅父子层
3 + 同级相邻选择器，紧选中与之相邻的第一兄弟个元素
4 ~ 同级所有选择器:选中与之相邻的后面所有的兄弟元素 
  1. <ul>
  2.   <li class="start">item1</li>
  3.   <li>item2</li>
  4.   <li>
  5.     <ul>
  6.       <li>item1</li>
  7.       <li>item2</li>
  8.       <li>item3</li>
  9.     </ul>
  10.   </li>
  11.   <li>item3</li>
  12.   <li>item4</li>
  13. </ul>
  1. /* 引文html是一个结构化的文档，
  2.         每一个元素在文档中都有确切的位置
  3.         所以根据元素的上下文环境来选择是完全没问题的
  4.       /* 1.后代选择器：所有层级 */
  5. ul li {
  6.   background-color: deepskyblue;
  7. }
  8. /* ------------------------------- */
  9. /* 子元素选择器：仅父子层 */
  10. body > ul > li {
  11.   background-color: rgb(180, 75, 154);
  12. }
  13. /* ------------------------------- */
  14. /* 同级相邻选择器:选中与之相邻的第一个兄弟元素 */
  15. .start + li {
  16.   background-color: magenta;
  17. }
  18. /* ---------------------- */
  19. /* 4.同级所有选择器：选中与之相邻的后面所有的兄弟元素 */
  20. .start ~ li {
  21.   background-color: red;
  22. }

3.伪类选择器

序号 属性 值
1 nth-of-type(an+b) 匹配任意位置的元素,an 起点。b 偏移量
2 nth-last-of-type(an+b) 反向选取任意位置的元素
3 nth-of-type(odd) odd 选取为基数的元素
4 nth-of-type(even) even 选取为偶数的元素
5 first-of-type 选取第一个元素
6 last-of-type 选取最后一个元素 
  1. <ul>
  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.   <li>item7</li>
  9.   <li>item8</li>
  10.   <li>item9</li>
  11.   <li>item10</li>
  12. </ul>

nth-of-type(an+b) 用法

  1. /* 1.匹配任意位置的元素：:nth-of-type（an+b） */
  2. /* an+b:an是起点，b是偏移量，n=（0,1,2,3...） */
  3. /* 匹配第3个li ,0乘以任何元素都等于0，通常直接写偏移量就可以*/
  4. ul li:nth-of-type(0n + 3) {
  5.   background-color: aquamarine;
  6. }
  7. ul li:nth-of-type(3) {
  8.   background-color: blue;
  9. }
  10. /* 选中所有元素,只为全选，用伪类没有任何意义 */
  11. ul li:nth-of-type(1n) {
  12.   background-color: chartreuse;
  13. }
  14. /* 从第三个元素开始全选 */
  15. ul li:nth-of-type(1n + 3) {
  16.   background-color: aqua;
  17. }
  18. /* 1乘以任何数都等于自己，所以可以省去1 */
  19. ul li:nth-of-type(n + 3) {
  20.   background-color: blue;
  21. }
  22. /* 从第8个选取到结尾 */
  23. ul li:nth-of-type(n + 8) {
  24.   background-color: brown;
  25. }
  26. /* 2，反向选取任意位置的元素：'nth-last-of-type(an+b)'' */
  27. ul li:nth-last-of-type(-n + 3) {
  28.   background-color: brown;
  29. }
  30. /* 我只选择第三个 */
  31. ul li:nth-last-of-type(3) {
  32.   background-color: brown;
  33. }
  34. /* 选择所有索引为偶数的子元素，2，4，6,8... */
  35. ul li:nth-of-type(2n) {
  36.   background-color: brown;
  37. }
  38. /* 选择所有索引为基数的子元素，2，4，6,8... */
  39. /* 2n+1也是对的 */
  40. ul li:nth-of-type(2n-1) {
  41.   background-color: cadetblue;
  42. }

反向选取任意位置的元素:nth-last-of-type(an+b)

  1. /* 从末尾开始，选择倒数三个 */
  2. ul li:nth-last-of-type(-n + 3) {
  3.       background-color: brown;
  4.     }
  5. /* 我只选择第三个 */
  6. ul li:nth-last-of-type(3) {
  7. background-color: brown;

快速选偶奇元素方式

  1. /* 偶数行:even */
  2. ul li:nth-of-type(even) {
  3.   background-color: cadetblue;
  4. }
  5. /* 奇数行:odd */
  6. ul li:nth-of-type(odd) {
  7.   background-color: red;
  8. }

快捷选取首尾元素

  1. /* 3,选择第一个子元素：first-of-type */
  2. ul li:first-of-type {
  3. background-color: red;
  4. /* 选择最后一个:last-of-type */
  5. background-color: red;
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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！