05_css选择器的使用

一、css选择器的类型

1、标签选择器

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

示例：


<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>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、id选择器

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

示例：


<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>
    
		<div id="type">使用id选择器添加样式div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3、类选择器

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

示例：


<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>
    
		<div class="type">使用class选择器添加样式div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4、层级选择器

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

示例：


<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>
        
		<div >
            <b>
                这时候div标签下面的b标签的内容,
                <span>
                    这时候div标签下面的b标签下面的span的内容
                span>新的内容
            b>
        div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5、组选择器

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

示例：


<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

用法：

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

示例：


<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标签里的样式,权重值为1000div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

相关阅读:
【招银网络科技java面试题目面试经验】-看准网
smqtt：高性能开源MQTT消息代理Broker
Python｜小游戏之猫捉老鼠！！！
用Rust写一个链表，非常详细，一遍看懂
Vue——配置代理(解决ajax跨域问题)
JDK9 为何要将String的底层实现由char[]改成了byte[]
Mac系统PR2022安装BeatEdit插件遇到各种问题解决
数据结构第一课 —— 时间和空间复杂度
微服务项目：尚融宝（1）（项目介绍）
Spring IOC源码：invokeBeanFactoryPostProcessors 后置处理器详解

原文地址：https://blog.csdn.net/qq_40236497/article/details/132813295