CSS类

63 阅读1分钟

打卡第4天

css中七类选择器

1.标签选择器

所有的标签都能直接赋给样式, 如p{color:red;}//此处给所有的p标签内容都渲染成红色的,再比如给所有的超链接下面去掉下划线a{text-decoration:none;}

2.id选择器

id整个属性尽量留给js代码使用,css样式尽量使用class选择器,id 属性的值必须在 HTML 文档中是唯一的,它是用于识别单个元素的唯一标识符,如果多个元素具有相同的 id 值,会导致 HTML 文档无效。

3.类选择器(css)

通过给我们的HTML标签添加class属性,这个标签属于某一类,如

<h3 class="del"></h3>

,这个h3标签现在属于del类,css中类是可以重名的,一下子控制多个标签,属性都设置成一样的,如下:

<h3 class="count"></h3>
<h3 class="count"></h3>
<h3 class="count"></h3>

一个count类同时控制了三个h3标签,这多个标签可以是不同的,可以相同。

4.后代选择器

<div>
<p>珠穆朗玛峰</p>
<p>珠穆朗玛峰</p>
<p>珠穆朗玛峰</p>
</div>
<div class="hou">
<h1>珠穆朗玛峰</h1>
<h2>珠穆朗玛峰</h2>
<h3>珠穆朗玛峰</h3>
</div>

我们先要控制h1,可以使用如下代码

.hou h1{
添加属性
}

当然,我们也可以给h1设置一个类

5.交集选择器

<h3 class="love">你好,明天</h3>
<p class="love">你好,未来</p>

现在p标签与h3标签属于同一个类,我们想要对p标签进行控制,使用如下代码

p.love{
添加属性
}

在这里插入图片描述

6.并集选择器

div,html,body{
padding:0;
marign:0;
}

此处的div,html,body是并在一起的,此段代码是清除原有样式,

7.通配选择器

*表示所有哦的选择器都被选中