CSS注释

CSS修改页面中的所有标签,必须借助选择器选中。
选择器中,可以写多对CSS属性,用{}包裹;
每个属性名与属性值之间用:分隔,多对属性之间,必须用;来分隔

选择器{
 属性1:属性值1;
 属性2:属性值2;

【选择器的命名规范】

1、只能有字母、数字、下划线、减号组成。
2、开头不能是数字,也不能是只有一个减号。
一般,起名要求有语义,使用英文单词与数字的组合。

1、标签选择器

写法:HTML标签名{}
作用:可以选中页面中,所有与选择器同名的HTML标签。

例如:

li{
  color:red;
  font-size: 48px;
}

2、类选择器(class选择器)

写法:.class名{}
调用:在需要调用选择器样式的标签上,使用class=“class名”调用选择器
优先级:class选择器>标签选择器

例如:

.first{
  color: blue;
}

3、ID选择器

写法:#ID名{}
调用:需要调用样式的标签,起一个id=“ID名”
优先级:ID选择器>class选择器
注意:一个页面中,不能出现同名ID

例如:
#one{
  background-color: yellow;
}

         【class选择器和ID选择器的区别】
       1、写法不同:class选择器用.声明,ID选择器用#声明;
       2、优先级不同:ID选择器>class选择器;
       3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。

4、通用选择器
写法:*{}
作用:可以选中页面中所有的HTML标签。
优先级:最低!!
例如:
*{
  color: orange;
}

5、并集选择器
写法:选择器1,选择器2,.....,选择器n{}
生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。
例如:
li,.first{
  color: red;
}

6、交集选择器
写法:选择器1选择器2......选择器n{} 所有选择器紧挨着,没有分隔
生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效
例如:
li.first{
  color:red;
}

7、后代选择器
写法:选择器1选择器2......选择器n{} 选择器之间空格分隔
生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、
孙代、重孙代 。。。)
例如:
div span{
  color:orange
}

8、子代选择器
写法:选择器1>选择器2>......>选择器n{} 选择器之间用>分隔
生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(
 中间不能间隔任何标签)
例如:
div>span{ 
  color: orangered;
}

【优先级的权重问题】
1、css生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;

2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
 ID选择器为100 > class选择器为10 > 标签选择器为1
 注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。

3、当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。

转载于:https://www.cnblogs.com/rsj1/p/7402348.html

CSS常用的选择器和优先级的权重问题相关推荐

  1. css有哪些选择器,优先级如何计算?

    这里是修真院前端小课堂,每篇分享文从 八个方面深度解析前端知识/技能,本篇分享的是: [css有哪些选择器,优先级如何计算?] 开场语: 大家好,我是IT修真院上海分院第10期的学员林璇,一枚正直纯洁 ...

  2. 【CSS笔记】CSS选择器的优先级(权重)

    目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...

  3. css选择器的优先级和权重问题

    CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...

  4. css简介与选择器(优先级)

    CSS简介: html是对网页划分区域 css是对划分区域的美化 语法: 选择元素{ 属性1:属性值1, 属性2:属性值2 - } <div style="width: 100px; ...

  5. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  6. CSS选择器的优先级的相关介绍

    css选择器的优先级 使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示 优先级规则(权重值 ...

  7. html中p标签的伪类选择器,表单标签和css伪类选择器

    一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...

  8. css基本语法选择器

    1.css在html中使用方法 css 层叠样式表         a.行内样式             元素上定义一个style属性,将样式写在style属性当中         b.内联样式   ...

  9. CSS、CSS3选择器

    1.css基础选择器 (1)标签选择器: (2)类选择器: (3)id选择器: 只能调用一次(一般和js搭配使用). (4)通配符选择器: 2.复合选择器 (1)后代选择器(包含选择器): (2)子选 ...

最新文章

  1. 数据备份软件,BackBone,NetVault,网络存储备份,系统集成
  2. python多久能上手_小白学习Python,怎样能够快速入门上手
  3. WinRar 代替之选:7-Zip+7zSfxTool
  4. 方法传递java_Java 程序将方法作为参数传递给其他方法
  5. FAX modem和传真协议简介
  6. 怎么把截屏的一部分内容涂掉_观影手帐怎么做?这里有妙招!
  7. skynet.fork_Apache Ant 1.10.6发布–用于junitlauncher的fork模式以及新的jmod和链接任务
  8. ArcPy处理土地利用类型数据
  9. OpenShift 4 之登录进 CodeReady Container 的 CoreOS
  10. DeFi 借贷协议 NAOS Finance 完成种子轮融资
  11. script标签中的crossorigin属性
  12. 干货干货:px和毫米之间的转换
  13. DOM之节点操作总结(附实例、图解)
  14. Apache虚拟主机的三种方式
  15. cocos2dx 3d开源项目 fantasyWarrior3D 从零走起 6完结 [AttackManagerGameMaster]
  16. python爬虫实例手机_10个python爬虫入门实例
  17. Layout室内设计施工图——PDF矢量图纸输出和显示模式区别
  18. 车联网开发板_车联网开发.PDF
  19. u盘插到电脑计算机里没有反应,U盘插入电脑没有反应 怎么查看是哪里坏了?
  20. 关于小程序获取手机号解密失败问题

热门文章

  1. 贪心算法(leetcode分类解题,C++代码详细注释)
  2. 60分钟快速入门PyTorch
  3. 每日一学:如何用matplotlib展示图片
  4. 学完php在学python_写给PHP程序员的 Python学习指南(建议去看原文)
  5. Android内容提供器——运行权限
  6. 使用java修改图片DPI
  7. 高效update方案
  8. HDU 4635(强连通分量分解
  9. 如何简单快速调试高大上的谷歌浏览器
  10. php求数组交集的自定义函数,php数组交集函数