爬虫入门：CSS选择器

最新推荐文章于 2024-08-07 10:08:11 发布

T2020_2_22

最新推荐文章于 2024-08-07 10:08:11 发布

阅读量218

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/T2020_2_22/article/details/104587597

版权

CSS选择器

html代码

<html>
<head>
	<title></title>
</head>
<body>
	<div class="box">
		<p>第一行</p>
		<p>第二行</p>
		<p>第三行</p>
	</div>
</body>
</html>

在这里插入图片描述
每一条css样式定义由两部分组成，形式如下：
[code] 选择器{样式} [/code]
选择器”指明了{}中的“样式”的作用对象
HTML页面中的元素就是通过CSS选择器进行控制的。

1. 通过标签名查找

css代码

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

<html>
<head>
	<title></title>
	<style type="text/css">
		p{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>第一行</p>
		<p>第二行</p>
		<p>第三行</p>
	</div>
</body>
</html>

在这里插入图片描述

2. 通过类名查找

css代码

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

<html>
<head>
	<title></title>
	<style type="text/css">
		.line1{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<p class = "line1">第一行</p>
		<p>第二行</p>
		<p>第三行</p>
	</div>
</body>
</html>

在这里插入图片描述

3. 通过id查找

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

<html>
<head>
	<title></title>
	<style type="text/css">
		#line3{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<p class = "line1">第一行</p>
		<p class = "line2">第二行</p>
		<p id = "line3">第三行</p>
	</div>
</body>
</html>

在这里插入图片描述

4. 组合查找

选中所有子孙标签:

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

<html>
<head>
	<title></title>
	<style type="text/css">
		.box p{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<p>第零行</p>
		</div>
		<p class = "line1">第一行</p>
		<p class = "line2">第二行</p>
		<p id = "line3">第三行</p>
	</div>
	<p>第四行</p>
</body>
</html>

选中所有子标签:

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

<html>
<head>
	<title></title>
	<style type="text/css">
		.box > p{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<p>第零行</p>
		</div>
		<p class = "line1">第一行</p>
		<p class = "line2">第二行</p>
		<p id = "line3">第三行</p>
	</div>
	<p>第四行</p>
</body>
</html>

5. 通过属性查找

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

<html>
<head>
	<title></title>
	<style type="text/css">
		input[name = "username"]{
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<p>第零行</p>
		</div>
		<p class = "line1">第一行</p>
		<p class = "line2">第二行</p>
		<p id = "line3">第三行</p>
	</div>
	<p>第四行</p>
	<form>
		<input type="text" name="username">
		<input type="text" name="password">
	</form>
</body>
</html>