CSS 导入方式选择器

最新推荐文章于 2026-06-21 10:45:25 发布

原创最新推荐文章于 2026-06-21 10:45:25 发布 · 415 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #前端

本文详细介绍了CSS层叠样式表，包括其优势，如内容与表现分离，样式复用等。重点讲解了HTML中四种CSS导入方式：行内样式、内部样式、外部样式和链接导入，并提及了外部样式的链接式和导入式用法。接着，文章深入探讨了CSS的选择器，如基本选择器（标签、类、ID）、层次选择器（后代、子、相邻兄弟、通用）、结构伪类选择器和属性选择器的使用，以及各种选择器的特性和应用场景。这些内容对于理解和操作网页样式至关重要。

一：基本了解

1.CSS，Cascading Style Sheet 层叠级联样式表

2.优势：

使得网页内容和表现样式分离
使得网页结构表现形式统一，可以实现复用

二：HTML中四种CSS导入方式

（这三种方式的优先级以就近原则为准，即哪一个离元素更近哪一个就起作用）

1.行内样式：运用<style><style>属性，编写样式即可（尽量少用）

<body>

<!--行内样式：在标签属性中，编写一个style属性，编写样式即可-->
<h1 style="color:red;"></h1>

</body>
<!--注意style属性中的元素以;结尾-->

2.内部样式,在<head>标签之前用<style> <style>编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
h1{
  color: aqua;
}
    </style>


    
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

3.外部样式，即不在HTML中而是在CSS文件中编写CSS代码

h1{
    color: aqua;
}

4.运用<link>导入CSS文件

<body>
<h1>我是标题</h1>
<link rel="stylesheet" href=" ../code/Lesson01.css">


</body>

拓展：外部样式两种写法

链接式：
```
<link rel="stylesheet" href=" ">
```

导入式（内部样式，用style标签@import""）在网页中会先显示结构再渲染出来效果，少用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    @import "../code/Lesson01.css";
  </style>

</head>
<body>
<h1>十年</h1>
</body>
</html>

三：选择器（选择页面上的某一个或者某一类元素）

1.基本选择器（必须掌握）

标签选择器

选择到页面上的这个标签的所有元素，如h1

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
/*标签选择器，会选择到页面上所有的该标签的元素*/
   h1{
      color: skyblue;
      background: cornflowerblue;
      border-radius: 15px;
    }
    p{
      font-size:80px;
      }
  </style>

</head>


<body>

<h1>新年快乐哈哈哈哈哈</h1>
<h1>新年快乐哈哈哈哈哈</h1>
<p>长高高</p>

</body>

类选择器

类选择器的格式 .class的名称{}
好处是，拥有同一个class属性的标签可以同时批量修改，使用方便

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

.first{
        color: cornflowerblue;
}
.second{
  color: lightsteelblue;
}
  </style>

</head>

<body>

<h1 class="first">十年生死两茫茫</h1>
<h1 class="second">不思量</h1>
<h1 class="first">自难相忘</h1>
<p class="second">春江花朝秋月夜</p>
</body>

ID选择器

ID选择器格式：#ID名称{}
id必须保证全局唯一，不可复用。
不遵循就近原则，有固定优先级：ID选择器 >类（class）选择器 >标签选择器

 <style>
 
#歌舞{
  color: mediumseagreen;
}
  .life {
    color: cornflowerblue;
  }
  h1{
    color: wheat;
  }

  </style>

</head>


<body>
<h2 id="歌舞" class="life">《只此青绿》</h2>
<h2 class="life">《十三邀》</h2>
<h2 class="life">《河西走廊》</h2>
<h2>《银翼杀手》</h2>



</body>

2.层次选择器

后代选择器：在某个元素后面的所有元素

格式：body 元素名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    
  body p{
    background: darkkhaki;
  }

  </style>

</head>


<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
   <p>
     <p>p5</p>
   </p>
  </li>
  <li>
      <p>p6</p>
  </li>
</ul>

</body>

子选择器：只作用于该元素的下一代。格式：body>目标选择器的名称{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <style>
    body>p{
      background: mediumseagreen;
    }
  </style>

</head>


<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
   <p>
     <p>p5</p>
   </p>
  </li>
  <li>
      <p>p6</p>
  </li>
</ul>

</body>

相邻兄弟选择器

相邻兄弟选择器，只对向下的一个同级邻居标签有用。格式：.class名称+相邻选择器的名称{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <style>
    .active + p{
   background: cornflowerblue;
  }
  </style>


</head>


<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
   <p>
     <p>p5</p>
   </p>
  </li>
  <li>
      <p>p6</p>
  </li>
</ul>

</body>

通用选择器

通用选择器，当前选中元素所有向下的同级元素 .class名称~选择器名称{ }

<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <style>
  .active~p{
    background: #b47258;
  }
  </style>

</head>

<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
   <p>
     <p>p5</p>
   </p>
  </li>
  <li>
      <p>p6</p>
  </li>
</ul>

</body>

3.结构伪类选择器标签名：伪类名{声明；}

伪类：选择特定元素进行创作

定位到ul的某个子元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

ul li:first-child{
    background: #b47258;
}
ul li:last-child{
    background: cornflowerblue;
}

    </style>

</head>

<body>


<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>


</body>

元素:nth-child(n){} ，定位到父元素，选择父元素列表下的第一个元素

选择当前P元素的父级元素即body，选择body元素的第一个子元素，
并且是同属于当前p元素才生效

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


p:nth-child(1){
    background: lightsteelblue;
}

    </style>

</head>
<body>

<h1>hh</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>


</body>

选中父元素下的第N个当前类型的元素

元素名:nth-of-type(n){
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

p:nth-of-type(2){
    background: dodgerblue;
}

    </style>

</head>
<body>

<h1>hh</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>


</body>

4.属性选择器

标签名[属性名]{ 声明；}

选中存在ID属性的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   .demo a{
     float: left;
     display: block;
     height: 50px;
     width: 50px;
     border-radius: 10px;
     background: dodgerblue;
     text-align: center;
     text-decoration: none;
     color: grey;
     margin-right:5px ;
     font: bold 20px/50px Arial;
   }


  a[id]{
   background: blanchedalmond;
   }


  </style>
</head>

<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png"  class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">9</a>
</p>

</body>

标签名[属性=属性名]{声明； }

选中ID属性为first的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   .demo a{
     float: left;
     display: block;
     height: 50px;
     width: 50px;
     border-radius: 10px;
     background: dodgerblue;
     text-align: center;
     text-decoration: none;
     color: grey;
     margin-right:5px ;
     font: bold 20px/50px Arial;
   }
  

  选中ID属性为first的元素   a[id=first]{
    background: #b47258;
   }
 

  /* class中有links的元素
  =xxx是只等于xxx的，不多元素，也不少元素
  *=xxx是包含xxx的都选中
  */
  a[class*="links"]{
 background: skyblue;
  }

  </style>
</head>

<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png"  class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">9</a>
</p>

</body>

标签名[属性*="属性名"]{ 声明；}

class中有links的元素
=xxx是只等于xxx的，不多元素，也不少元素
*=xxx是包含xxx的都选中

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>

   .demo a{
     float: left;
     display: block;
     height: 50px;
     width: 50px;
     border-radius: 10px;
     background: dodgerblue;
     text-align: center;
     text-decoration: none;
     color: grey;
     margin-right:5px ;
     font: bold 20px/50px Arial;
   }
  
  a[class*="links"]{
 background: skyblue;
  }

  </style>
</head>

<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png"  class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">9</a>
</p>

</body>

标签名[属性^=属性名]{ 声明； }
选中herf中以http开头的元素

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: dodgerblue;
      text-align: center;
      text-decoration: none;
      color: grey;
      margin-right:5px ;
      font: bold 20px/50px Arial;
    }
   
  选中herf中以http开头的元素
    a[href^=http]{
      background: grey;
    }
  </style>
</head>

<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png"  class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">9</a>
</p>

</body>

标签名[属性名$=属性内容]{ 声明；}

选中href中以http开头的元素正则表达式

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: dodgerblue;
      text-align: center;
      text-decoration: none;
      color: grey;
      margin-right:5px ;
      font: bold 20px/50px Arial;
    }
    

  
a[href$=pdf]{
background: mediumseagreen;
}
  </style>
</head>

<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png"  class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">9</a>
</p>

</body>

CSS 导入方式选择器

一：基本了解

二：HTML中四种CSS导入方式

1.行内样式：运用<style><style>属性，编写样式即可（尽量少用）

2.内部样式,在<head>标签之前用<style> <style>编写

3.外部样式，即不在HTML中而是在CSS文件中编写CSS代码

4.运用<link>导入CSS文件

三：选择器（选择页面上的某一个或者某一类元素）

1.基本选择器（必须掌握）

标签选择器

类选择器

ID选择器

ID选择器格式：#ID名称{}
id必须保证全局唯一，不可复用。
不遵循就近原则，有固定优先级：ID选择器 >类（class）选择器 >标签选择器

2.层次选择器

后代选择器：在某个元素后面的所有元素

子选择器：只作用于该元素的下一代。格式：body>目标选择器的名称{}

相邻兄弟选择器

通用选择器

3.结构伪类选择器标签名：伪类名{声明；}

4.属性选择器

标签名[属性名]{ 声明；}

选中存在ID属性的元素

标签名[属性=属性名]{声明； }

选中ID属性为first的元素

标签名[属性*="属性名"]{ 声明；}

class中有links的元素
=xxx是只等于xxx的，不多元素，也不少元素
*=xxx是包含xxx的都选中

标签名[属性^=属性名]{ 声明； }
选中herf中以http开头的元素

标签名[属性名$=属性内容]{ 声明；}

选中href中以http开头的元素正则表达式

正则表达式小结：

=只等于
*=包含这个元素
^=以这个开头
$=以这个结尾

CSS 导入方式 选择器

一：基本了解

二：HTML中四种CSS导入方式

1.行内样式：运用<style><style>属性，编写样式即可（尽量少用）

2.内部样式,在<head>标签之前用<style> <style>编写

3.外部样式，即不在HTML中而是在CSS文件中编写CSS代码

4.运用<link>导入CSS文件

三：选择器（选择页面上的某一个或者某一类元素）

1.基本选择器（必须掌握）

标签选择器

类选择器

ID选择器

ID选择器格式：#ID名称{} id必须保证全局唯一，不可复用。 不遵循就近原则，有固定优先级：ID选择器 >类（class）选择器 >标签选择器

2.层次选择器

后代选择器：在某个元素后面的所有元素

子选择器：只作用于该元素的下一代。格式：body>目标选择器的名称{}

相邻兄弟选择器

通用选择器

3.结构伪类选择器 标签名：伪类名{声明；}

4.属性选择器

标签名[属性名]{ 声明 ；}

选中存在ID属性的元素

标签名[属性=属性名]{声明； }

选中ID属性为first的元素

标签名[属性*="属性名"]{ 声明；}

class中有links的元素 =xxx是只等于xxx的，不多元素，也不少元素 *=xxx是包含xxx的都选中

标签名[属性^=属性名]{ 声明； } 选中herf中以http开头的元素

标签名[属性名$=属性内容]{ 声明；}

选中href中以http开头的元素正则表达式

正则表达式小结：

=只等于 *=包含这个元素 ^=以这个开头 $=以这个结尾

CSS 导入方式选择器

ID选择器格式：#ID名称{}
id必须保证全局唯一，不可复用。
不遵循就近原则，有固定优先级：ID选择器 >类（class）选择器 >标签选择器

3.结构伪类选择器标签名：伪类名{声明；}

标签名[属性名]{ 声明；}

class中有links的元素
=xxx是只等于xxx的，不多元素，也不少元素
*=xxx是包含xxx的都选中

标签名[属性^=属性名]{ 声明； }
选中herf中以http开头的元素

=只等于
*=包含这个元素
^=以这个开头
$=以这个结尾