CSS及选择器归纳

最新推荐文章于 2025-08-11 22:07:06 发布

邱邱

最新推荐文章于 2025-08-11 22:07:06 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签： css class 选择器

本文链接：https://blog.youkuaiyun.com/qwert2190/article/details/53640075

本文详细介绍了CSS样式表的三种类型：行内样式、内嵌样式和外部样式，并对选择器进行了分类说明，包括HTML选择器、类选择器、ID选择器等。此外还列举了A标签的不同状态样式及高级选择器的应用。

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

今天把ＣＳＳ样式表的分类和选择器分类做一个总结和归纳，供初学者参考：

1.样式表的分类：

A)行类样式：写在HTML标签里面

例如：<h1 style=”样式规则.......”></h1>,此例使用行类样式

B)内嵌样式：写在<head></head>之间

例如：<style type=”text/css”>

H1{

样式规则;

...............................

}

</style>

C)外部样式：写在外部，HTML页面要使用时链接或者导入

例如：链接<link ...........................>

导入:： <style type="text/css">

@import url("style/index.css");

</style>

2.选择器

A)HTML选择器：选择器的名字就是HTML标签名

B)CLASS选择器：以.号开头，引用时使用class=”类名”

C)ID选择器：以#开头，引用时使用ID＝”ID名”

3.A标签样式

名称	涵义
a或a:link	链接静止状态
a:hover	鼠标悬停
a:active	鼠标正在点击
a:visited	鼠标点击后

4.选择器的分类：

1. HTML选择器：选择器的名字就是HTML标签

2. 类选择器：以.号开头命名，引用时使用class=“类名”

3. ID选择器：以#号开头，引用时使用“ID=选择器名”

4．群组选择器：

例如：h2,li,.myca{

}

表示h2和li和类选择器都采用同一种样式

5.包含选择器(也叫后代选择器)

例如：#d1 ul li{

}

表示包含在d1下面的ul下面，ul下面的li采用此样式

6.子元素选择器

例如：h1 > em{

color:red

}

<h1><span>这是<em>第一</em>个H1</span></h1>

<h1>这是<em>第二</em>个H1</h1>

表示第2个em会起作用，第一个不会起作用

7.相邻兄弟选择器

例如：h1+p{

}

表示“紧跟在h1后面的段落起作用，h1和p拥有共同的父亲”

8.通配符选择器*

例如：*{

font-size:12px;

}

表示网页中所有的元素都采用这种样式

实际应用中，下面的情况比较常见：

margin:0;

Padding:0

}