前端css基础篇（一）css入门与标签选择器_标签选择器需要加点嘛-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41363062/article/details/85626998

本文介绍了CSS的发展历史、基本概念以及常见的10种选择器，包括标签选择器、类选择器、ID选择器等。通过内部样式表、外部样式表、行内式和导入式等方式引入CSS，并探讨了它们的权重和使用场景。同时，文章详细讲解了子级选择器、后代选择器、并集选择器和伪类选择器等，帮助读者掌握CSS在网页布局和元素选择上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css的发展历史

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果控制，最初只提供很少的显示属性。随着HTML成长，为了满足页面设计者的要求，添加了很多显示功能，使HTML变得杂乱，页面臃肿，于是就出现了css。

css初识

css(Cascading Style Sheets) 美化样式
css通称为css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边距、边框）以及版面的布局等外挂案显示样式。

引入css样式表（书写位置）

内部样式表（内嵌）

内嵌式是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义，type="text/css"在html中可以省略；

<head>
  <style type="text/css">
     选择器｛属性1：属性值1；｝
  </style>
</head>

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签链接到html文档中

<head>
<link href="css文件的路径" type="text/css" rel="stylesheet">
</head>

注意： link是个单标签
link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
**href：**定义所链接外部样式表文件的URL。
type:定义所链接文档的类型，在这里需要指定为“text/css”,表示链接的外部文件为css样式表
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，行内式只对其所在的标签及嵌套在其中的子标签起作用

<div style="属性1：属性值；color:red;"> </div>

导入式

语法：导入式要依赖css样式文件，所以它要放在style或css样式表里

@import "css样式路径"

如果style里面既有内嵌的样式，又有导入的样式，导入式要放在内嵌式的上边；放在下面会报错，导致导入式的样式直接失败。

css的10个选择器

① 标签选择器

直接把html标签当作选择器来用
权重:1

<style>
div{color:red}
</style>


<div>div元素1</div>
<div>div元素1</div>

②类选择器

将html元素的class标签属性值，当作选择器使用，需要在这个标签属性值前面加点“.”
一个html元素可以有很多个标签属性值（类名），每个类名之间用空格隔开
类名可以重复使用
权重：10

<style>
      .div2{
             color:blue;
             }
</style>


<div>div元素1</div>
<div class="div2">div元素1</div>

③id选择器

将html元素的id标签属性值，当作选择器使用，需要在这个标签属性值前面加点“#”
权重：100
一个html元素，id标签属性值只能用一次，id在html中具有唯一性
id选择器一般和Javascript配合使用

<style>
#div2{
color:blue;}
</style>


<div>div元素1</div>
<div  id="div2">div元素1</div>

④通配符选择器

匹配全部HTML元素
一般不使用，因为全部匹配比较耗性能
权重：0< * <1
在工作中不用通配符选择器，作为了解

*｛margin：0 ;｝

⑤标签属性选择器

利用标签属性名和标签属性值来选择html元素
有class类名的我们一般不用标签属性选择器，因为class使我们的类选择器，更方便
权重：10
语法：
[标签属性名]｛css属性名：css属性值；｝
[标签属性名=标签属性值] ｛css样式｝

<style>
      .div2{
             color:blue;
             }
         [title]{
              width:100px;
              }
          [title=2233]{
              width:100px;
              }
          [class]{
          }
</style>


<div>div元素1</div>
<div class="div2"  title="2233">div元素1</div>

⑥交集选择器

俩种选择器同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择
权重：所有组合选择器权重之和
交集选择器：标签选择器+ 类选择器（常用标签选择器放到前面）
标签选择器+标签属性选择器（偶尔用）
交集选择器中间没有任何符号或者空格

<style>
      div.div2{}/*交集选择器  常用*/
      div[title]{}/*交集选择器*/
      div[title=2233]{}/*偶尔用 */
</style>



<div class="div2"  title="2233">div元素1</div>

作用：准确的查找html元素，增加这个html元素的权重

⑦子级选择器

存在包含关系的元素选择，通过父级确定子级元素
语法：父级选择器>子级选择器｛｝
权重：所有选择器之和
父级选择器是用来确定取值范围的
子级选择器才是我们要添加样式的那个元素
子级选择器必须是紧邻的父子关系

<style>
        ul>li{
              color:red;
        }
        .box>ul>li>span{
               font-size:70px
        }
<style>
<div class="box">
      <ul>
             <li>
                  <span>我是span</span>
             </li>
      </ul>
      <ol>
              <li>
                  <span>我是span</span>
             </li>
      </ol>
</div>

⑧后代选择器``（派生选择器）

在一个根元素的范围内，查找到它的后代元素
语法：祖辈选择器后代选择器｛｝（空格隔开）

<style>
     ul> li> span{}/*子级选择器 权重：3*/
     ul  span｛｝/*后代选择器 权重：2*/
<style>


<div class="box">
      <ul>
             <li>
                  <span>我是span</span>
             </li>
      </ul>
      <ol>
              <li>
                    <span>我是span</span>
               </li>
       </ol>
</div>

⑨并集选择器

作用：同一份css样式，可以一次性添加给多个不同的html
语法：
选择器1，选择器2，选择器3{css样式}
权重：分组选择器将不同的html分为一组，权重计算的时候都是独立计算的，不会叠加

<style>
          h1,.div1,p{/* 权重：独立计算 */
                    color:red;
                    font-size:25px;
          }
<style>
<h1>我是h1元素</h1>
<div class="div1">欢迎</div>
<p>我是p元素 </p>

⑩伪类选择器

给一个元素添加某种状态
例如：鼠标经过的状态、鼠标点击时的状态
在工作中，常用的伪类选择器hover,一般在页面中的导航使用或者在尾部（底部）使用
a:link 没有访问a之前a的样式，
a:hover 鼠标移上的样式
a:active 鼠标按下的样式
a:visited 鼠标点击后的状态
input:focus 获取光标

<style>
                 /* a:link  没有访问a之前a的样式，默认状态 */
             a:link{
                      color:blue;
             }
                /* a:hover  鼠标移上的样式*/
             a:hover{
                      color:red;
             }
                    /* a:active 鼠标按下的样式*/
             a:active{
                       color:yellow;
             }
                       /* a:visited 鼠标点击后的状态*/
             a:visited{
                       color:black;
             }

</style>


<a href="">a超链接</a>

【CSS3新增伪类】

：not  排除
：last-child  最后一个子元素
：nth-child（n） n表示具体的第几个   odd/2n+1 奇数  even/2n  偶数
：only-child  仅仅/唯一只有一个
：nth-last-child  倒数第几个元素
：first-of-type 第一个同级兄弟元素
：last-of-type 最后一个同级兄弟元素
：only-of-type  只有一个同级兄弟元素
：nth-of-type（n）  第几个同级兄弟元素
：nth-last-of-type（n） 倒数第几个同级兄弟元素
：empty  空内容
：checked 被选中 主要用在input表单元素

伪元素

通过css代码向指定的元素"内"添加假的（html）中不存在的元素
用伪元素必须保证俩个前提：
必须带有css属性：display：block；
要有content在这个属性，这个属性的属性值可以为空，但是引号不能缺少。例如：content="";

工作中伪元素经常使用after
伪元素after用来清除浮动带来的影响

<style>
         div:before{
                    display:block;/*块元素*/
                    content:"我是哥哥"；
                    color:blue;
                    font-size:19px;
          }
          div:after{
                    display:block;/*块元素*/
                    content:"我是didi"；
                    color:red;
                    font-size:19px;
          }
<style>
<div>
      我是div元素
</div>