人亦已歌 发表于 2023-1-31 15:56:48

CSS核心(二)基本选择器 id 标签 class类选择器

选择器是用来选择标签的,它有很多种选择语法,本节先讲解几个基本的选择器,方便展开下面的课程。
原理如下:
例如页面中有这样一个标签:<div id="myid" class="box">盒子</div>

如果使用ID选择器方式选择该元素,语法如下:
#myid{
                color:red;      
         }解释:
选择id为myid的标签,将该标签的字体颜色设置为red。
如果使用标签选择器方式选择该元素,语法如下:
div{
   color:red;      
   }
解释:
选择标签名为div的标签,将文字颜色设置为red。如果使用class选择器选择该元素,语法如下:
.box{
                color:red;      
      }解释:
选择类名为box的元素,将文字颜色设置为red。请注意:如果页面中存在相同的id、标签或类名,则会选中多个元素,{}中间写针对选中元素的css样式代码。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器 id 标签 class类选择器</title>
</head>
<body>
<div id="myid">盒子</div>
<span>span标签</span>
<span>span标签</span>
<div class="box">我的标签</div>
<div class="box">我的标签</div>
</body>
<style>
      /* id选择器 */
      #myid{
                color:red;      
      }
      /* 标签选择器 */
      span{
                color:green;      
      }
      /* class类选择器 */
      .box{
                color:blue;      
      }
</style>
</html>






andumw 发表于 2023-2-16 00:52:36

读了你的观点我很受用,也很感激,你说出了我们都存在,但都又没有太重视的问题,我想,它将伴随着我以后的学习和工作.    高手!!!

老大徒伤悲 发表于 2023-2-23 11:14:50

我是个新手,看了此文章让我感触良深,更给了我学习的动力.我是学医的,现大二,不过我更喜欢的是电脑,同学那我找不到有共同爱好的,在这里好多知音啊!我是一个刚进不入高校的大门,看后受到很大的启发!~每天看8页编程书,看几遍论坛的文章,再加上几道练习,相信同学4年后毕业的技术应该跟我差不多!~

fuuingxia 发表于 2023-2-28 01:53:10

^好

姚姚的梦 发表于 2023-3-4 23:16:11

看来我现在的数据结构与算法还听有用的我要把他给学好谢谢楼主

龙胆 发表于 2023-3-11 02:23:55

啊,真的很受用我也打算学习编程,看了这篇文章,我也跟作者有一些相同的看法。

huao927 发表于 2023-3-17 12:21:49

我想我现在知道自已该做什么了,受益匪浅,谢谢

sumren 发表于 2023-3-22 10:05:07

谢谢,受教了!呵呵。早点看到就好了呀!!

易水寒1975 发表于 2023-3-26 21:50:33

真的很不容易呀!说的好!

请叫我 发表于 2023-3-30 08:25:36

^精华啊,虚心学习
页: [1] 2 3 4
查看完整版本: CSS核心(二)基本选择器 id 标签 class类选择器