CSS-选择器

Posted 2022-04-13 wc89

一: 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时用