Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css的引入方式以及选择器
Blogger Information
Blog 37
fans 1
comment 0
visits 32448
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的引入方式以及选择器
Jason Pu?
Original
822 people have browsed it

CSS的三种引入方式：

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表，各自的特点和使用方法如下：

内部样式: 仅对当前文档的元素有效,使用 style 标签
外部样式: 适用于所有引入了这个css样式表的html文档,使用 link 标签
行内样式: 仅适用于当前的页面中的指定的元素,使用style属性

以下我以制作一个宽高为200PX,带有黑色边框的天蓝色盒子为例来演示三种引入方式；
实现的效果如下：

1:内部样式代码：

  2.     <title>内部样式</title>
  3.     <style>
  4.         .box{
  5.             height: 200px;width: 200px;
  6.             border: 1px solid black;
  7.             background-color: skyblue;
  8.             text-align: center;
  9.             font-size: 30px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="box">
  15.         instanse
  16.     </div>
  17. </body>

2.外部样式：

  1.     <title>内部样式</title>
  2.     <link rel="stylesheet" href="instanse.css">
  3. </head>
  4. <body>
  5.     <div class="box">
  6.         instanse
  7.     </div>

3.行内样式：

  1.     <title>内部样式</title>
  2. </head>
  3. <body>
  4.     <div style="height: 200px;width: 200px; border: 1px solid black;background-color: skyblue;text-align: center;font-size: 30px;">
  5.         instanse
  6.     </div>

CSS的选择器：

我们大致把CSS选择器分为三类：

一.简单选择器**

标签选择器(需要添加元素的标签，例如div,h1,header…)
类选择器(.)
ID选择器(#)
实例：

  1.     <title>css选择器</title>
  2.     <style>
  3.         /* 标签选择器： */
  4.         li{
  5.             /* 所有li变红 */
  6.             background-color:red;
  7.         }
  8.         /* 类选择器： */
  9.         .active{
  10.             /* case1 case2变蓝 */
  11.             background-color:blue;
  12.         }
  13.         /* id选择器： */
  14.         #example{
  15.             /* case3变成粉红： */
  16.             background-color:pink;
  17.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <ul>
  24.         <li class="active">case1</li>
  25.         <li class="active">case2</li>
  26.         <li id="example">case3</li>
  27.         <li>case4</li>
  28.         <li>case5</li>
  29.         <li>case6</li>
  30.     </ul>
  32. </body>

二.上下文选择器：

后代选择器: 所有层级:空格
子元素选择器: 仅父子层级:>
同级相邻选择器: 仅选中与之相邻的第一个兄弟元素:+
同级所有选择器: 选中与之相邻的后面所有兄弟元素:~
实例：

  1.     <style>
  2.         /* 1.后台选择器： */
  3.         ul li{
  4.             background-color:red;
  5.         }
  6.         /* 2.子元素选择器: */
  7.         ul>li>ul{
  8.             background-color:green;
  9.         }
  10.         /* 3.同级相邻选择器: 选中相邻的第一个兄弟元素*/
  11.         .start+li{
  12.             background-color: blue;
  13.         }
  14.         /* 4.同级所有选择器: 选中相邻的后面所有兄弟元素 */
  15.         .brother~li{
  16.             background-color:yellow;
  17.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <ul>
  23.         <li>case1
  24.             <ul>
  25.                 <ul>1</ul>
  26.                 <ul>2</ul>
  27.                 <ul>3</ul>
  28.             </ul>
  29.         </li>
  30.         <li class="start">case2</li>
  31.         <li>case3</li>
  32.         <li class="brother">case4</li>
  33.         <li>case5</li>
  34.         <li>case6</li>
  35.     </ul>
  37. </body>

运行结果如下：

三.伪类选择器:

定义和用法：nth-of-type(n) 选择器匹配第 N 个元素，n 可以是数字、关键词或公式，使用公式 (an + b)描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值
和nth-child的不同：nth-child是选取父元素的第 N 个子元素，与类型无关。和nth-child的不同：nth-child是选取父元素的第 N 个子元素，与类型无关。
实例：

  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.     <style>
  8.         /* 选择第3个： */
  9.         ul li:nth-of-type(3){
  10.             background-color:green;
  11.         }
  12.         /* 选择双数行，n2或者直接使用语法糖even*/
  13.         ul li:nth-of-type(2n){
  14.             background-color:red;
  15.         }
  16.         /* 选择单数行：2n+1或2n-1也可以直接使用语法糖odd */
  17.         ul li:nth-of-type(2n+1){
  18.             background-color:blue;
  19.         }
  20.         /* 选择第一行： */
  21.         ul li:first-of-type{
  22.             background-color: pink;
  23.         }
  24.         /* 选择最后一行： */
  25.         ul li:last-of-type{
  26.             background-color: black;
  27.         }
  28.         /* 如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 */
  31.     </style>
  32. </head>
  33. <body>
  34.     <ul>
  35.         <li>case1</li>
  36.         <li>case2</li>
  37.         <li>case3</li>
  38.         <li>case4</li>
  39.         <li>case5</li>
  40.         <li>case6</li>
  41.     </ul>
  43. </body>
  44. </html>

运行结果如下：

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