CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布

原创最新推荐文章于 2024-10-22 09:22:43 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

【B/S学习】专栏收录该内容

8 篇文章

订阅专栏

引言：

css是用来控制html或是xml等文件样式的一种语言，在使用的过程中选择器是必不可少的，可对html等页面中的元素实现一对一，一对多或者多对一的控制。

分类：

之前一直以为选择器就分为三类那，通过百度百科了解到有十几种分类，只是标记选择器、类别选择器、id选择器这三种比较常用，下面我就对这三种选择器分别进行介绍。

标记选择器：

代码示例：

<html>
<head>
<title>标记选择器</title>
<style type="text/css">

p{						/* 标记选择器 */
	color:blue;
	font-size:18px;
}

</style>
</head>

<body>
	<p>标记选择器1</p>
	<p>标记选择器2</p>
	<p>标记选择器3</p>
</body>
</html>

类别选择器：

代码示例：

<html>
<head>
<title>class选择器</title>
<style type="text/css">

.one{
	color:red;	        /* 红色 */
	font-size:18px;		/* 文字大小 */
}
.two{
	color:green;		/* 绿色 */
	font-size:20px;		/* 文字大小 */
}
.three{
	color:cyan;	        /* 青色 */
	font-size:22px;		/* 文字大小 */
}
</style>
   </head>

<body>
	<p class="one">class选择器1</p>
	<p class="two">class选择器2</p>
	<p class="three">class选择器3</p>
	<h3 class="two">h3同样适用</h3>
</body>
</html

ID选择器：

代码示例：

<html>
<head>
<title>ID选择器</title>
<style type="text/css">
#one{
	font-weight:bold;		/* 粗体 */
}
#two{
	font-size:30px;			/* 字体大小 */
	color:#009900;			/* 颜色 */
}

</style>
</head>

<body>
	<p id="one">ID选择器1</p>
	<p id="two">ID选择器2</p>
	<p id="two">ID选择器3</p>
	<p id="one two">ID选择器3</p>
</body>
</html>

区别：

1、标签选择器是通过html标签进行的，不可以自己定义。

2.ID选择器只能在文档中使用一次，而class选择器可以用很多次。

3.可以使用类选择器词列表方法为一个元素同时设置多个样式，而ID选择器不可以；

对3的解释：

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

<span class="stress bigsize">

选择器的声明：

集体声明：

<html>
<head>
<title>集体声明</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{			/* 集体声明 */
	color:purple;			/* 文字颜色 */
	font-size:15px;			/* 字体大小 */
}
h2.special, .special, #one{		/* 集体声明 */
	text-decoration:underline;	/* 下划线 */
}
</style>
</head>

<body>
	<h1>集体声明h1</h1>
	<h2 class="special">集体声明h2</h2>
	<h3>集体声明h3</h3>
	<h4>集体声明h4</h4>
	<h5>集体声明h5</h5>
	<p>集体声明p1</p>
	<p class="special">集体声明p2</p>
	<p id="one">集体声明p3</p>
</body>
</html>

全局声明：

<html>
<head>
<title>全局声明</title>
<style type="text/css">
*{					/* 全局声明 */
	color: purple;			/* 文字颜色 */
	font-size:15px;			/* 字体大小 */
}
</style>
 </head>

<body>
	<h1>全局声明h1</h1>
	<h2 class="special">全局声明h2</h2>
	<h3>全局声明h3</h3>
	<h4>全局声明h4</h4>
	<h5>全局声明h5</h5>
	<p>全局声明p1</p>
	<p class="special">全局声明p2</p>
	<p id="one">全局声明p3</p>
</body>
</html>

嵌套声明：

<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
p b{					/* 嵌套声明 */
	color:maroon;			/* 颜色 */
	text-decoration:underline;	/* 下划线 */
}
</style>
   </head>

<body>
	<p>嵌套使<b>用CSS</b>标记的方法</p>
	嵌套之外的<b>标记</b>不生效
</body>
</html>

总结：

简单的事情重复做

重复的事情认真做