CSS常用选择器介绍

最新推荐文章于 2021-08-03 22:51:24 发布

奥利奥MILK

最新推荐文章于 2021-08-03 22:51:24 发布

阅读量4k

点赞数

分类专栏： css选择器文章标签： css 类选择器派生选择器 ID选择器

本文链接：https://blog.csdn.net/cxf8881/article/details/78875089

版权

css选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

希望这篇文章对一些刚入门的新手有所帮助。

CSS样式设置，常用的几类选择器

 例：  
   <html>
      <head>
         <title></title>
         <style  type="text/css">
           //ID选择器
             #test{
             color:red;
          }
          //元素选择器
            h1{
             weidth:100px;
         }
         //类选择器
            .help{
            background-color:green; 
         }
         <style>
      </head>
      <body>
           <h1 id="test" class="help">hi,boy!</h1>          
      </body>    
 </html>

1、ID选择器

   首先在元素标签<h1></h1>内定义一个属性id，并设置属性值为test。CSS样式的定义，如果是id选择器，则是#接对应元素标签内的id属性值。比如：#test{}

2、元素选择器
直接通过元素标签名进行CSS样式设置，比如选取< h1> 标签，则对应的CSS则是写成：h1{}

3、类选择器
类选择器类似与ID选择器，区别在于将ID选择器的 # 换成 . ,如： .help{}
注意：类的CSS样式可以多次引用，但ID选择器却是唯一。简而言之，不同元素标签的class值可以设置相同，但id值通常具有唯一性。
4、派生选择器
一般形式是元素标签名接对应的#ID值或者.Class值。比如 h1 #test{} , h1 .help{}
当然，还有属性选择器等。不过，经常使用的还是上面几种。

奥利奥MILK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用选择器介绍

希望这篇文章对一些刚入门的新手有所帮助。CSS样式设置，常用的几类选择器例： <html> <head> <title></title> <style type="text/css"> //ID选择器 #test{ color:red; }
复制链接

扫一扫

专栏目录