search

博客列表 >CSS的引入方式和选择器的实例演示总结

CSS的引入方式和选择器的实例演示总结

多@点的博客
多@点的博客原创
2020年12月16日 18:55:41588浏览

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. }

上一条：表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符，表单控件的form属性下一条：1215—css有三种引入到html文档中的方式、选择器的用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多