首页 > 代码库 > html选择器

html选择器

2024-08-01 01:19:39   224人阅读

1.标签选择器：针对的是元素。

<html>
<head>
<style type="text/css">
p{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p id="p1">我会变颜色</p>
<p id="p2">我会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

如果在P元素下面还有其他的元素你也要修饰，你就可以在style 中的p 后面在写元素。

2.id选择器，注意id选择器是唯一的

id选择器以#开头

<html>
<head>
<style type="text/css">
#p1{font:"宋体"; color:#FF0000}

#p2{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p id="p1">我会变颜色</p>
<p id="p2">我会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

3.类选择器:

类选择器以.开头 只要把元素的class="" 就能表现为这种样式了

<html>
<head>
<style type="text/css">

.p1{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p class="p1">我会变颜色</p>
<p id="p2">我不会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

 

html选择器


联系
我们