Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的引入方式和选择器使用方法
Blogger Information
Blog 9
fans 0
comment 0
visits 8007
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的引入方式和选择器使用方法
扬cium
Original
742 people have browsed it

css引用样式

1.内部样式

内部样式是在head便签内，使用style写css样式,只有当前页面生效，如以下的格式：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>内部样式的引用</title>
  7.     <style>
  8.         div{
  9.             color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>PHP中文网</div>
  15. </body>
  16. </html>
2.行内样式的引用

行内样式就是将css样式直接写在标签里面，例如

  1.  <p style='color:blue'>PHP中文网</p>
3.外部引用方式

外部引入样式指的是在HTML头部的head标签使用link标签引入外部公共样式表

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>外部引用方式</title>
  7.     <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10.     <div>PHP中文网</div>
  11. </body>
  12. </html>

css选择器

选择器 描述 示例
标签选择器 根据元素标签名称进行匹配 a {…}
类选择器 根据元素的class属性进行匹配 .a {…}
ID选择器 根据元素的ID属性进行匹配 #a {…}

代码演示

  1. <!DOCTYPE html>
  2.     <html lang="zh-CN">
  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.             li {
  9.                 background-color: violet;
  10.             }
  11.             .one {
  12.                 background-color: red;
  13.             }
  14.             #two {
  15.                 background-color: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <ul>
  21.             <li>demo1</li>
  22.             <li class="one">demo2</li>
  23.             <li id="two">demo3</li>
  24.         </ul>
  25.     </body>
  26.     </html>

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>选择器2:上下文选择器</title>
  7.     <style>
  8.         /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
  9.         /* 所以根据元素的上下文环境来选择是完全没有问题的 */
  10.         /* 1. 后代选择器: 所有层级 */
  11.         ul li {
  12.             background-color: lightblue;
  13.         }
  15.         /* ------------------------------------ */
  17.         /* 2. 子元素选择器: 仅父子层级 */
  18.         body>ul>li {
  19.             background-color: teal;
  20.         }
  22.         /* ------------------------------------ */
  24.         /* 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 */
  25.         .start+li {
  26.             background-color: lightgreen;
  27.         }
  29.         /* ------------------------------------ */
  31.         /* 4. 同级所有选择器: 选中与之相邻的后面所有兄弟元素 */
  32.         .start~li {
  33.             background-color: yellow;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <ul>
  40.         <li>item1</li>
  41.         <li class="start">item2</li>
  42.         <li>item3</li>
  43.         <li>item4
  44.             <ul>
  45.                 <li>item4-1</li>
  46.                 <li>item4-2</li>
  47.                 <li>item4-3</li>
  48.             </ul>
  49.         </li>
  50.         <li>item5</li>
  51.     </ul>
  52. </body>
  54. </html>
  56. <!-- 上下文选择器: 
  57. 1. 空格: 所有层级
  58. 2. > : 父子级
  59. 3. + : 相邻的兄弟
  60. 4. ~ : 所有相邻兄弟 -->

伪类选择器

选择器 描述 示例
nth-of-type(an+b) 匹配任意位置的子元素; n全部n+3偏移量往后的所有元素; 2n或者even选择所有索引为偶数的元素; 2n-1或2n+1或者odd选择所有索引为奇数的元素 ul li:nth-of-type(3){…}
nth-last-of-type{an+b} 反向获取任意位置的子元素 ul li:nth-last-of-type(3){…}
first-of-type 选择第一个子元素 ul li:first-of-type
last-of-type 选择最后一个子元素 ul li:last-of-type
only-of-type 选择父元素下唯一的子元素 ul li:only-of-type

1.匹配任意位置的子元素

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.     /* 1. 匹配任意位置的元素: `:nth-of-type(an+b)` */
  8.     /* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
  9.     /* 匹配第2个li  */
  10.     /* ul li:nth-of-type(0n+2) {
  11.         background-color: red;
  12.     } */
  13.     /* 0乘以任何数都等于0,通常直接写偏移量就可以 */
  14.         ul li:nth-of-type(2){
  15.             background-color:red;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <ul>
  21.         <li>tset1</li>
  22.         <li>tset2</li>
  23.         <li>tset3</li>
  24.         <li>tset4</li>
  25.         <li>tset5</li>
  26.         <li>tset6</li>
  27.     </ul>
  28. </body>
  29. </html>

选择所有元素
  1.  ul li:nth-of-type(1n) {
  2.                     background-color: violet;
  3.                 }

如果只是为了全选,不如直接使用标签选择器,一旦带上偏移量就完全不同了

  1. ul li:nth-of-type(1n+3) {
  2.             background-color: violet;
  3.         }

简写 （ 1乘以任何数都等于自己,所以省去 ）

  1. ul li:nth-of-type(n+3) {
  2.             background-color: violet;
  3.         }

反向获取任意位置的元素 nth-last-of-type(an+b)
  1. ul li:nth-last-of-type(-n+3) {
  2.             background-color: violet;
  3.         }

简写

  1. ul li:nth-last-of-type(3) {
  2.             background-color: violet;
  3.         }

偶数行: even 和 奇数行: odd

  1. ul li:nth-of-type(even) {
  2.             background-color: violet;
  3.         } 
  4.  ul li:nth-of-type(odd) {
  5.             background-color: violet;
  6.         }

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