首页 > 代码库 > CSS基础2——选择器

CSS基础2——选择器

2024-07-26 07:22:49   223人阅读

前面说过样式规则，也知道了样式规则语法形式为：选择器+声明块

如：div{ color：black；padding：10px; }   div即表示选择器(此处是元素选择器)，花括号中的内容就是声明块。

选择器用于指定样式规则可作用于HTML文档中的哪个或者哪些元素。常见的选择器类型有以下几种：

1、元素选择器(类型选择器)：匹配选择器的网页上的任何HTML元素，不考虑这些元素在文档树中的位置。

如：p{ background:aqua; color:pink; }   匹配网页上的任何p元素，不考虑p元素在文档树中的位置

2、类选择器：被用于选择有某个class属性的任何HTML元素，语法形式：.类名{属性：值;}

<head>
<style type="text/css">
	.hello{
		width:100px;
		height: 100px;
		background: #eee;
		color: blue;
		font-weight: bold;
	}
	</style>
</head>
<body>
<span style="white-space:pre">	</span><div class="hello">类选择器</div>
</body>

同一class属性值可以再同一页面出现多次

3、ID选择器：被用于选择有某个ID属性的任何HTML元素，语法形式： #id名{ 属性：值；}
<head>
<style type="text/css">
	#hello{
		width:100px;
		height: 100px;
		background: #eee;
		color: blue;
		font-weight: bold;
	}
</style>
</head><body>
<span style="white-space:pre">	</span><div id="hello">ID选择器</div>
</body>
同一ID属性值在同一页面上只能出现一次

4、通配符选择器：用于选择所有元素，语法：*{ 属性：值}
5、包含选择器：用于选择文档的一个元素的后代元素

第一种方法：

<head>
<style type="text/css">
	p span{
		font-weight: bold;
		color:red;
	}
	</style>
</head>
<body>
<p>how <span> are</span> you?</p>
</body>
第二种方法
<head>
<style type="text/css">
	p>.sp{
		font-weight: bold;
		color:red;
	}
	</style>
</head>
<body>
<span style="white-space:pre">	</span><p>how <span class="sp"> are</span> you?</p>
</body>

6、伪类选择器：以不同方式格式化超链接<a>元素的四种不同状态
a:link{} 用在未访问的链接的选择器

a:visited{} 用在已访问的链接的选择器

a:hover{} 用在鼠标光标放在其上的链接的选择器，其中hover还可以用在别的元素中用于制作在鼠标光标放在目标上的样式的编辑

a:active{} 用在获得焦点(比如：被点击)的链接上的选择器

<head>
<style type="text/css">
	.a:link{color: #000;}
	.a:visited{color: #ff0;}
	.a:hover{color:red;}
	.a:active{color:black;}
</style>
</head>
<body>
	<a href=http://www.mamicode.com/"#" class="a">点点点	>7、伪元素选择器:
(1) :first-line  用于一个元素的第一行的选择器
如段落的第一行
<head>
<style type="text/css">
	p:first-line{
		color:red;
	}
</style>
</head>
<body>
<p>hello<br/>world</p>
</body>
只有hello是红色的
(2) :first-letter  用于一个元素的第一个字符的选择器
如段落的第一个字符
<head>
<style type="text/css">
	p:first-letter{
		color:red;
	}
</style>
</head>
<body>
<p>蓦然回首</p>
</body>
只有蓦字是红色的。
(3) :first-child  用于<body>中第一个是( :first-child)前面的元素的所有内容的选择器
<head>
<style type="text/css">
	p:first-child{
		color:red;
	}
</style>
</head>
<body>
<p>蓦然回首</p>
<p>然后呢？</p>
</body>
蓦然回首是红色的
<head>
<style type="text/css">
	p:first-child{
		color:red;
	}
	</style>
</head>
<body>
<div>歌声里</div>
<p>蓦然回首</p>
<p>然后呢？</p>
</body>
没有字体内容的颜色是红色的，因为<body>中第一个元素是div，而不是p

选择器的优先级：ID选择器 > 类选择器 > 伪类选择器 > 元素/伪元素选择器 > 通配符选择器




CSS基础2——选择器


联系
我们