码迷,mamicode.com
首页 > Web开发 > 详细

CSS-选择器

时间:2019-07-14 19:34:37      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:区分大小写   class   line   规则   选中   技术   css选择器   页面   大小写   

一: CSS选择器概述

选择器用于选择要进行CSS修饰的HTML片段, 主要有基本选择器和高级选择器两种

 

二: 基本选择器

2.1 标签选择器

  • 直接使用标签名选择,会选中页面中所有的同名标签

html/css

<div>
    <p>这是一个段落标签</p>
    <span>这是一个span标签</span>
</div>
p{
   font-family: 华文行楷;
}

span{
    font-family: 华文行楷;
}

或者多个标签选择器选择 中间使用逗号分隔

p,span{
    font-family: 华文行楷;
}

 

技术图片

2.2 id选择器

  • 同一个页面id唯一
  • 每个标签都可以设置id
  • id命名规则,字母,数字,下划线,区分大小写
  • 使用#号选择

 

html

<div>
    <p id="p1">这是一个段落标签</p>
    <span id="span1">这是一个span标签</span>
    <h1 id="h"> 这是一个h标签</h1>
</div>

 

css

#p1{
    background-color: green;
}

#span1{
    font-family: 华文行楷;
}

#h{
    color: red;
}

 

技术图片

 

2.3 类选择器

  • class选择器,将样式归类
  • 同一个标签可以有多个类
  • 使用点号选择

HTML

<div>
    <p class="blue big_size">这是一个段落标签</p>
    <span class="big_size xiahx">这是一个span标签</span>
    <h1 class="blue xiahx"> 这是一个h标签</h1>
</div>

 

CSS

.blue{
    background-color: blue;
}

.big_size{
    font-size: 20px;
}

.xiahx{
    text-decoration: underline;
}

 

技术图片

三: 普通选择器注意点

  • 尽可能的使用class,
  • class要尽可能的小,可以为每个标签设置多个class
  • id少用,JS时用

 

CSS-选择器

标签:区分大小写   class   line   规则   选中   技术   css选择器   页面   大小写   

原文地址:https://www.cnblogs.com/wc89/p/11185114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!