CSS 选择器

最新推荐文章于 2025-07-01 09:31:29 发布

原创最新推荐文章于 2025-07-01 09:31:29 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

首先介绍一下CSS

CSS是英语Cascading StyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML等文件样式的计算机语言

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言,相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言,CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性

要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,下面说下常用的选择器:

类选择器:用于来定义一类可以在同一个页面内重复利用的样式,或者自己定义的用于列表的样式,详细的写好链接,列表,边框以及背景等属性,类选择器根据类名来选择,前面以”.”来标志

id选择器:用于一个页面中仅出现一次的容器，也常常作为js的接口,id选择器根据元素id来选择元素,具有唯一性,前面以”#”号来标志

html选择器:用于最基础样式的定义,比如定义页面整体的字体,链接的样式,列表项的符号样式,段落的间距等等

通配符选择器:如果希望所有元素都符合某一种样式,可以使用通配符选择器

选择器之间可以构成父子关系,父子选择器可以有多级,适用于id选择器和class选择器

举个CSS选择器的使用案例

my.css

/*类选择器*/
.style1{
	font-weight: bold;
	font-size:20px;
	background-color:pink;
}
/*id选择器*/
#style2{
	font-size:30px;
	background-color:silver;
}
/*父子选择器*/
#style2 span{
	font-style:italic;
	color:red;
}
/*html选择器*/
body{
	color:orange;
}
/*通配符选择器*/
*{
	/*对外边距和对内边距清0*/
	margin:0px 0px 0px 0px;
	padding:0px;
}

text.html

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="my.css" type="text/css"></link>
  </head>
  <body>
     <span class="style1">栏目一</span><br/>
    <span id="style2">栏目二</span><br/>
    <span id="style2">重要<span>新闻</span></span><br/>
    </body>
</html>

网页打开如图