CSS 第002篇 id 和 class 选择器

最新推荐文章于 2024-07-22 09:42:47 发布

ml_YSY

最新推荐文章于 2024-07-22 09:42:47 发布

阅读量416

点赞数

分类专栏： CSS3-Study 文章标签： css

本文链接：https://blog.csdn.net/ml_ysy/article/details/109457822

版权

CSS3-Study 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：选择器就是进入HTML页面的钥匙，你必须学会如何开门。

>1 id选择器（唯一性）

我理解id 选择器，他就是人的指纹，全世界都找不到相同的指纹【比喻】；

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID属性只能在每个 HTML 文档中出现一次。
```
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset ="utf8"/>
        <style>
            #nav-body{border: 1px solid black;}
        </style>
    </head>
    
    <body id = "nav-body">

    </body>
</html>
```
【注意：在HTML文档中不要轻易使用id选择器，养成良好的习惯有助于你学习JavaScript，因为id选择器的使用影响到JavaScript特效的制作】

>2 class选择器（同样式定义性）

我理解他就是让不同的人穿上相同的服装，例如军训的时候，你和我就是同服装，不同内在。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
类名的第一个字符也不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset ="utf8"/>
        <style>
            .one{border: 1px solid black;}
        </style>
    </head>
    
    <body>
        <table>
            <tr class = "one"></tr>
            <tr class = "one"></tr>
            <tr class = "one"></tr>
            <tr class = "one"></tr>
            <tr class = "one"></tr>
        </table>
    </body>
</html>

【注意：相同的样式使用相同的class选择器可以减少代码的冗杂，减小内存。】

>3 标签选择器

在CSS样式设置中，标签也属于选择器的部分，因为他本来就类似于每家每户的大门，只是开门的人不一样而已，使用方法如下代码。[个人不建议在编程中不要或者尽量少使用标签选择器，在此处只是稍微描述一下即可。]

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset ="utf8"/>
        <style>
            table{border: 1px solid black;}
        </style>
    </head>
    
    <body>
        <table>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </table>
    </body>
</html>

一直在路上，自律，坚持

ml_YSY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 第002篇 id 和 class 选择器

前言：选择器就是进入HTML页面的钥匙，你必须学会如何开门。>1 id选择器（唯一性）我理解id选择器，他就是人的指纹，全世界都找不到相同的指纹【比喻】；id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 ID属性只能在每个 HTML 文档中出现一次。 <!DOCTYPE HT.
复制链接

扫一扫

专栏目录