Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的引入方式和选择器的实例演示总结
Blogger Information
Blog 16
fans 0
comment 0
visits 11412
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
569 people have browsed it

CSS的引入方式

1.css引入方式:内部样式

内部样式指的是在HTML头部中的style标签下书写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.         h1{
  9.             color:red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h1>好好学习，天天向上！</h1>
  15. </body>
  16. </html>

2.css引入方式:外部样式表/公共样式表/共享样式表

外部引入样式指的是在HTML头部的head标签使用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引入方式:外部样式表/公共样式表/共享样式表</title>
  7.     <link rel="stylesheet" href="css/dome2.css">
  8. </head>
  9. <body>
  10.     <h1>好好学习，天天向上！</h1>
  11. </body>
  12. </html>
  1. h1{
  2.     color:blue;
  3. }

3.css引入方式:style属性设置样式

行内方式指的是直接在HTML标签中的style属性中添加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引入方式:style属性设置样式</title>
  7. </head>
  8. <body>
  9.     <h1 style="color:green;">好好学习，天天向上！</h1>
  10. </body>
  11. </html>

选择器1：简单选择器

html主要代码：
  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>选择器1：简单选择器</title>
  7.     <link rel="stylesheet" href="css/dome4.css">
  8. </head>
  9. <body>
  10.     <h2>水果</h2>
  11.     <ul>
  12.         <li>苹果</li>
  13.         <li class="on">香蕉</li>
  14.         <li id="foo">葡萄</li>
  15.         <li class="on">橘子</li>
  16.         <li class="on">荔枝</li>
  17.     </ul>
  18. </body>
  19. </html>

1.标签选择器

  1. li{
  2.     background-color:red;
  3. }

2.类选择器

  1. .on{
  2.     background-color:blue;
  3. }

3.id选择器

  1. #foo{
  2.     background-color:green;
  3. }

选择器2：上下文选择器

html主要代码：
  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>选择器2：上下文选择器</title>
  7.     <link rel="stylesheet" href="css/dome5.css">
  8. </head>
  9. <body>
  10.     <h2>水果</h2>
  11.     <ul>
  12.         <li>苹果</li>
  13.         <li class="start">香蕉</li>
  14.         <li>荔枝</li>
  15.         <li>葡萄
  16.             <ul>
  17.                 <li>绿葡萄</li>
  18.                 <li>紫葡萄</li>
  19.             </ul>
  20.         </li>
  21.         <li>橘子</li>
  22.     </ul>
  23. </body>
  24. </html>

1.后代选择器：所有层级

  1. ul li{
  2.     background-color:lightblue;
  3. }

2.子元素选择器：仅父子层级

  1. body>ul>li{
  2.     background-color:teal;
  3. }

3.同级相邻选择器：仅选中与之相邻的第一个兄弟元素

  1. .start+li{
  2.     background-color:lightgreen;
  3. }

4.同级所有选择器：选中与之相邻的后面所有兄弟元素

  1. .start~li{
  2.     background-color:yellow;
  3. }

伪类选择器

html主要代码：
  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.     <link rel="stylesheet" href="css/dome6.css">
  8. </head>
  9. <body>
  10.     <h2>水果</h2>
  11.     <ul>
  12.         <li>苹果</li>
  13.         <li>香蕉</li>
  14.         <li>葡萄</li>
  15.         <li>雪梨</li>
  16.         <li>荔枝</li>
  17.         <li>西瓜</li>
  18.         <li>橘子</li>
  19.         <li>哈密瓜</li>
  20.         <li>芒果</li>
  21.         <li>车厘子</li>
  22.     </ul>
  23.     <ul>
  24.         <li>好好学习，天天向上！</li>
  25.     </ul>
  26. </body>
  27. </html>

1.匹配任意元素的位置：:nth-of-type(an+b)

an+b: an起点，b是偏移量，n=(0,1,2,3,…)
匹配第三个li
  1. ul li:nth-of-type(3){
  2.     background-color:red;
  3. }

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

选择第三个li和之后的元素
  1. ul li:nth-of-type(n+3){
  2.     background-color:green;
  3. }

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

匹配倒数第三个li
  1. ul li:nth-last-of-type(3){
  2.     background-color:violet;
  3. }

选择倒数第三个和之后的元素
  1. ul li:nth-last-of-type(-n+3){
  2.     background-color:red;
  3. }

3.选择所有索引为偶数(even)的子元素

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

4.选择所有索引为奇数(odd)的子元素

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

5.选择第一个子元素：:first-of-type

  1. ul li:first-of-type{
  2.     background-color:violet;
  3. }

6.选择最后一个子元素：:last-of-type

  1. ul li:last-of-type{
  2.     background-color:lightblue;
  3. }

7.如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现

  1. ul li:only-of-type{
  2.     background-color:violet;
  3. }

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