CSS选择器

css中有很多的选择器

标签选择器

在style标签中写入选择器，通过选择器来控制元素样式。html中有很多标签比如div、p、h标签等，我们可以选择其标签为其添加样式。如下为body中的div、h2标签添加样式。

标签选择器中css赋值样式有三种方法：

内嵌式
外链式
行内式

内嵌式：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">div{width:200px;height:200px;background:yellow;}h2{width:200px;height:200px;background: blue;}</style>
</head>
<body><div>hell,你好</div><h2>today nice</h2>
</body>
</html>

以上我们是将css代码直接放在html中，这种方式称为内嵌式，接下来看看外链式，将css内容放在外部的文件中。

外链式（经常使用）：

如下，通过link标签从外部文件导入css文件。html body中的所有标签与css中的标签相同则都会自动运用css样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><link rel="stylesheet" type="text/css" href="css.css">
</head>
<body><div>hell,你好</div><h2>today nice</h2></body>
</html>

除了以上三种写法，还有一种写法叫行内式

行内式：

行内式即直接写在标签里面

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title>
</head>
<body><div style="color: blue;width: 200px;height: 200px;background: yellow;">hell,你好</div>
</body>
</html>

以上就是css给html赋值样式的三种方式，那三种方法有什么区别了，他们优先级不同，比如一个标签他同时链接了多个css样式，那么优先选择行内式css样式。即谁离标签近就选择谁

行内式 > 内嵌式 > 外链式

id选择器

如下，id选择器写在标签中，并在style标签中进行描述

用 # 来选种id选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">#hi{width:200px;height:200px;background:yellow;}#he{width:200px;height:200px;background:blue;}</style>
</head>
<body><div id='hi'>hell,你好</div><h2 id="hi">tonight</h2><h3 id='he'>哈哈</h3>
</body>
</html>

class选择器

用 . 来选种class

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">.hi{width:100px;height:100px;background:yellow;}.he{width:100px;height:100px;background:blue;}</style>
</head>
<body><div class='hi'>hell,你好</div><h2 class="hi">tonight</h2>
</body>
</html>

后代选择器

后代选择器能够更精准的选择标签，比如我们想要选择的标签外面嵌套了多个标签，如下精准的选择div标签中的p标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">div p{height:20px;background:green;}</style>
</head>
<body><p>要努力</p><div><p>2022年初</p><p>~~~~~~~</p></div>
</body>
</html>

下面要选择第二个div下面的p。可以先给第二个div添加一个class选择器，再使用后代选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">.hi p{height:20px;background:green;}</style>
</head>
<body><div><p>1111</p></div><div class="hi"><p>sssssssssss</p><p>````````````</p></div>
</body>
</html>

群组选择器

就是同时选择多个选择器（不同类型的选择器都可以同时进行选择）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css练习</title><style type="text/css">/*同时将a1和a2选择器选中，这是之前的方法.a1{height:20px;background:green;}.a2{height:20px;background:green;}*/.a1,.a2{height:20px;background:green;}</style>
</head>
<body><div class="a1">today nice</div><p class="a1">today nice</p><p class="a1">today nice</p><p class="a2">today nice</p><p class="a2">today nice</p>
</body>
</html>