css的选择器

最新推荐文章于 2023-12-12 09:35:39 发布

ll123c

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量95

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/ll123c/article/details/88781482

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.基本选择器

在html的基本标签style标签内使用。例如改变div标签内的样式

<html>
   <head>
    <title>html示例</title>
    <style type="text/css">
        div{
            background-color:yellow;
            color:blue;
        }
    </style>
   </head>
   <body>
        <div>测试css的基本选择器</div>
   </body>
</html>

2.css的类选择器

顾名思义就是在标签内添加class属性，然后修改此标签内的属性时，只需要调用类名即可。

<html>
   <head>
    <title>html示例</title>
	<style type="text/css">
		div.haha{
			background-color:red;
			color:black;
		}
		p.xixi{
			background-color:yellow;
			color:gray;
		}
	</style>
   </head>
   <body>
		<div class="haha">css选择器演示二</div>
		<p class="xixi">css选择器演示</p>
   </body>
</html>

3.id选择器

同样的也是在标签内表明id属性，只不过使用标签名调用时调用的方法与类选择器不同

调用方式为：标签名#id名

<html>
   <head>
    <title>html示例</title>
	<style type="text/css">
		div#hehe{
			background-color:yellow;
			color:gray;
		}
	</style>
   </head>
   <body>
    <div id="hehe">css的id选择器</div>

   </body>
</html>

4.选择器之间的优先级关系

style>id选择器>类选择器>标签选择器