HTML — CSS选择器

最新推荐文章于 2023-03-06 09:00:00 发布

junJZ_2008

最新推荐文章于 2023-03-06 09:00:00 发布

阅读量99

点赞数

分类专栏： JavaScript 文章标签： HTML CSS 浏览器

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

一个样式规则由两部分组成：选择器和样式声明。选择器表明要为哪一个元素设置样式，样式声明则表明要应用哪些样式属性。如，我们想尽上文档中的一级标题 H1 以红色显示，就可以这样定义CSS规则：

h1 { color: red }

这样只要加载了该样式文档中所有<H1>标签都将应用这个样式。

<html>
	<head>
		<title></title>
		<style type='text/css'>
			h1{ color: red; }
		</style>
	</head>
	<body>		
		<h1>h1</h1><h2>h2</h2>		
	</body>
</html>

效果图：

CSS选择器

有以下三种选择器：通过HTML标签类型、通过已声明类开或者通过元素的唯一ID。

标签类型的选择器

div h1 { color: red; }

表示只能<div>标签中的嵌套标签<h1>起作用：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			div h1{ color: red; }
		</style>
	</head>
	<body>		
		<h1>h1</h1> 
		<span>span</span> 
		<div>div</div> 
		<div><h1>div.h1</h1></div> 		
	</body>
</html>

效果图：

类选择器

. callout { border: solid blue 1px; background-color: cyan }

如下使用：

一个元素可以分配多个样式类。如果我们还有一个类样式名为 loud 时，可以同时使用：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			.callout { border: solid blue 1px; background-color: cyan }
			.loud { color: orange }
		</style>
	</head>
	<body>
		<span  class='callout' >callout</span> 
		<span  class='loud' >loud</span> 
		<span  class='callout loud' >callout loud</span> 
	</body>
</html>

效果图：

我们也可以混合使用样式类和基于元素的规则，来定义一个仅仅针对特定标签类弄的样式类。如：

span.highlight { background-color: yellow }

这个规则仅会应用在声明了值为 highlight 的类属性（即 class='highlight' ）的 <span> 标签上。其他无该属性的 <span> 标签（即 span 上无 class='highlight' 类属性设置）或其他有 class='highlight' 属性设置的标签（比如说 <div class='highlight' > ）将不受影响。以下使用该样式：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			span.highlight { background-color: yellow }
		</style>
	</head>
	<body>
		<div class='highlight'>div</div>
		<span>without highlight</span><br>
		<span class='highlight'>span</span>
	</body>
</html>

效果图如下：

我们甚至可以与父子关系的选择器联合使用，创建在非常特定的场合下使用的规则：

div.prose span.highlight { background-color: yellow }

这个规则仅会应用在设置了prose样式类的<div>标签中嵌套的设置了highlight样式类的标签。应用上面的样式：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			div.prose span.highlight  { background-color: yellow }
		</style>
	</head>
	<body>
		<div class='prose'>div</div>
		<span class='highlight'>span</span>
		<div class='prose'>div<span class='highlight'>div.span</span></div>
	</body>
</html>

只有最后一句生效，且只有div里的嵌套标签span里的内容变颜色，如下图：

ID选择器

也可以为单个元素指定规则，它需要有唯一ID，这是通过在HTML中加上id属性来完成的。HTML中只会有一个使用这个ID的元素，所以，这样一类选择器通常只用来选择页面中的一个元素。例如，为了突出显示页面中的关闭按钮，我们可以这样定义样式：
#close { color: red }

使用以上样式：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			#close { color: red }
		</style>
	</head>
	<body>
		<input type='button' id='close' value='Close'>
	</body>
</html>

效果图：

伪选择器

在CSS中我们还可以定义基于伪选择器的样式。浏览器定义了一些有限的伪选择器，这里展示一些最有用的，例如：

*:first-letter {
font-size: 500%;
color: red;
float: left;
}

通过这个选择器，我们可以将任何元素的第一个字母以很大的粗体红色字体来显示，如下使用：

<html>
	<head>
		<title></title>
		<style type='text/css'>
			*:first-letter {
				font-size: 500%;
				color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<span>firse</span>
		second
		<div>third</div>
	</body>
</html>

效果图：

我们还可以将这个规则限制大一点，就像这样：
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}

这样的话，红色的效果只会应用在设置了illuminated样式类的<p>元素上。其他有用的伪选择器包括first-line 和hover 。hover可以改变当鼠标光标停在超链接上时，超链接的显示效果。例如，当鼠标光标停在链接上时，链接显示为黄色，我们可以编写下列规则：
a:hover{ color: yellow; }

<html>
	<head>
		<title></title>
		<style>
			 p.illuminated:first-letter {
			  font-size: 500%;
			  color: red;
			  float: left;
			}
			p:first-line {
			  font-size: 200%;
			  color: blue;
			  float: left;
			}
			a:hover{ color: red;font-size: 50 px; }
		</style>
	</head>
	<body>		
		<div class='illuminated'>div</div>
		<p>without illuminated</p>
		<p class='illuminated'>with illuminated</p>
		<a href='#'>a link </a>
	</body>
</html>

效果图：

junJZ_2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML — CSS选择器

一个样式规则由两部分组成：选择器和样式声明。选择器表明要为哪一个元素设置样式，样式声明则表明要应用哪些样式属性。如，我们想尽上文档中的一级标题 H1 以红色显示，就可以这样定义CSS规则：h1 { color: red } 这样只要加载了该样式文档中所有&lt;H1&gt;标签都将应用这个样式。&lt;html&gt; &lt;head&gt; &lt;title&gt;&l...
复制链接

扫一扫

专栏目录