05_css选择器的使用

henry_rhy

已于 2023-09-12 10:47:05 修改

阅读量482

点赞数 1

文章标签： css css3 前端

于 2023-09-11 17:08:08 首次发布

本文链接：https://blog.csdn.net/qq_40236497/article/details/132813295

版权

一、css选择器的类型

1、标签选择器

用法：直接写 写标签名：标签名{}

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>标签选择器</title>
		<style type="text/css">
			div {
          text-align: center;
          width: 600px;
          height: 400px;
          color: blue;
          background: blanchedalmond;
			}
		</style>
	</head>
	<body>
  	<!-- 标签名是：div -->
		<div>使用标签选择器添加样式</div>
	</body>
</html>

2、id选择器

用法：元素的id属性：#id名{}

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<style type="text/css">
			#type {
            text-align: center;
            width: 600px;
            height: 400px;
            color: blue;
            background: blanchedalmond;
			}
		</style>
	</head>
	<body>
    <!-- id名是：type -->
		<div id="type">使用id选择器添加样式</div>
	</body>
</html>

3、类选择器

用法：元素的class属性 .class 值{}
(类选择器是使用最多的一种方式)

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>class选择器</title>
		<style type="text/css">
			.type {
            text-align: center;
            width: 600px;
            height: 400px;
            color: blue;
            background: blanchedalmond;
			}
		</style>
	</head>
	<body>
    <!-- class名是：type -->
		<div class="type">使用class选择器添加样式</div>
	</body>
</html>

4、层级选择器

用法：按照层级找到对应需要添加化样式的元素名

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器</title>
		<style type="text/css">
    div b span {
        text-align: center;
        width: 600px;
        height: 400px;
        color: blue;
        background: blanchedalmond;
			}
		</style>
	</head>
	<body>
        <!-- 选择span标签的内容 -->
		<div >
            <b>
                这时候div标签下面的b标签的内容,
                <span>
                    这时候div标签下面的b标签下面的span的内容
                </span>新的内容
            </b>
        </div>
	</body>
</html>

5、组选择器

用法：多个元素名，统一使用一个样式

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>组选择器</title>
		<style type="text/css">
			h1,h2,h3 {
        color: blue;
			}
		</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
	</body>
</html>

二、css选择器之间的权重关系

用法：

标签选择器权重值为：1
类选择器权重值为：10
id选择器权重值为：100
通过style属性直接设置在标签里的样式，权重值为：1000
权重值无限大：!important（增加如下代码）

示例：

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器之间的权重关系</title>
		<style type="text/css">
			div{
				/* 1. 标签选择器:权重值为:1 */
				color: #1E90FF !important;
				font-size: 60px;	
			}
			
			/* 2. 类选择器:权重值为:10 */
			.u3{
				color: #0000FF;
				font-size:60px;
			}
			
			/* 3. id选择器:权重值为:100 */
			#u2{
				color: #912CEE;
				font-size:60px;
			}
			
			/* 4.通过style属性直接设置在标签里的样式,权重值为:1000 */
			
			/* 5.权重值无限大 */
			/* 增加一个！important */
		</style>
	</head>
	<body>
        <div>第一个</div>
        <div class="u3">第二个</div>
        <div class="u3" id="u2">第三个</div>
        <div class="u3" id="u2" style="background: #90EE90;font-size: 30px;color: #0000FF;">这是直接在div标签里的样式,权重值为1000</div>
	</body>
</html>