CSS选择器

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS选择器

Python 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了HTML中不同选择器的应用方法，包括标签选择器、类选择器、ID选择器等，并通过实例展示了如何精确地定位页面元素。

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

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>我的HTML代码</title>
	<style type="text/css">
		p{
			background-color: pink
		}		
	</style>
</head>
<body>
    <div class="box">
    	<div>首行元素</div>
    	<p class="line1">1. 数学成绩：100分</p>
    	<p class="line1">2. 语文成绩：200分</p>
    	<p id="line3">3. 英语成绩：150分</p>
    </div>
    <p>4. 科学成绩：99分</p>
    <form>
    	<input type="text" name="uesrname">
    	<input type="text" name="password">
    </form>
</body>
</html>

1.根据标签的名字选择，示例代码如下：

	<style type="text/css">
		p{
			background-color: pink
		}		
	</style>

2.根据类名选择，要在类名前面加一个点“.”，实例代码如下：

        <style type="text/css">
		.line1{
			background-color: pink
		}		
	</style>

3.根据id选择，要在id前面加一个“#”号，实例代码如下：

	<style type="text/css">
		#line3{
			background-color: pink
		}		
	</style>

4.查找子孙元素，那么要在子孙元素中间有一个空格，那么实例代码如下：

	<style type="text/css">
		#box p{
			background-color: pink
		}		
	</style>

5.直接查找子元素，那么要在父元素中间有一个>，实例代码如下：

	<style type="text/css">
		#box > p{
			background-color: pink
		}		
	</style>

6.根据属性的名字进行查找，那么应该先写标签名字，然后再中间中括号写属性的值，实例代码如下：

	<style type="text/css">
		input[name="username"]{
			background-color: pink
		}		
	</style>

7.在根据类型或者id进行查找到的时候，如果还要标签名进行过滤，那么可以在类或者id前面加上标签名字，实例代码如下：

	<style type="text/css">
		div.line1{
			background-color: pink
		}		
	</style>