经验总结

  1. 首页 > 生活 > >

day03-CSS( 四 )

生活百科day03-CSS


day03-CSS

文章插图
5.2ID选择器元素选择器会修饰所有的对应的元素，但是假如希望某一个html元素使用特定的样式，而这个元素已经用了元素选择器修饰，这时候就可以使用id选择器来进行特殊的指定
  1. id选择器可以为标有特定id的html元素指定特定的样式
  2. id选择器以#来定义
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id选择器</title><!--1.使用id选择器，需要现在要修饰元素指定id属性，id值是自己指定的2.id是唯一的，不能重复3.在<style>标签中指定id选择器时，前面需要有#id值--><style type="text/css">#css1 {color: #ff7d44;}#css2 {color: #8A2BE2FF;}</style></head><body><h1 id="css1">Hello，北京</h1><h1 id="css2">hello，上海</h1></body></html>
day03-CSS

文章插图
5.3class选择器(类选择器)假如html文件中有三个div标签：
如果使用元素选择器的话，所有的div元素都会受到影响；
如果使用id选择器的话，可以唯一地修饰其中某一个div元素；
但是如果想要修饰其中两个div，这时就不能用id选择器，因为id选择器只能唯一地修饰一个div元素，也不能使用元素选择器，这时候就需要使用class类选择器 。
class类选择器可以在许多元素（不一定是相同的元素）当中，挑选出其中的一部分来进行修饰 。
唯一修饰使用id选择器，部分修饰使用类选择器，全部修饰使用元素选择器
  1. class类型选择器，可以通过class属性选择去使用这个样式
  2. 基本语法
    .class 属性值{属性:值;}
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><!--1.选择class选择器，需要在被修饰的元素上，设置class属性，属性值(名称)自己定义2.class属性的值（名称）可以重复3.需要在style标签中指定类选择器的具体样式，开头需要使使用.类选择器名称--><style type="text/css">.css1 {color: pink;}.css2 {color: #25d2be;}</style></head><body><h1 class="css1">Hello，北京</h1><h1 class="css1">Hello，world</h1><h2 class="css2">ni hao</h2><h1 class="css2">hello，上海</h1></body></html>
day03-CSS

文章插图
5.4组合选择器
  1. 组合选择器可以让多个选择器共用同一个css样式代码
  2. 语法格式
    选择器1,选择器2,选择器n{属性:值;}
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>组合选择器</title><style type="text/css">.class01, #id01 {width: 300px;height: 100px;border: 2px solid paleturquoise;color: #ff7d44;}</style></head><body><h1 class="class01">Hello，北京</h1><h1 id="id01">hello，上海</h1></body></html>
day03-CSS

文章插图
5.5优先级说明行内样式优先级 > id选择器优先级 > class选择器优先级 > 元素选择器优先级
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器的优先级说明</title><style type="text/css">#id01 {color: purple;}#id02 {color: blue;}.class01 {color: red;}div {color: black;}</style></head><body><h3>选择器的优先级说明</h3><!--行内样式的优先级高于id选择器--><div style="color: #25d2be" id="id01">一只猫猫在睡觉</div><!--id选择器的优先级高于类选择器--><div id="id02" class="class01">两只猫猫在睡觉</div><!--类选择器的优先级高于元素选择器---><div class="class01">三只猫猫在睡觉</div></body></html>

经验总结扩展阅读


上一篇：a类火灾应选用哪类灭火器

下一篇：2023年9月24日适合坐游轮吗 2023年农历八月初十宜坐游轮吗