博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS选择器,选择器的优先级
阅读量:5825 次
发布时间:2019-06-18

本文共 1133 字,大约阅读时间需要 3 分钟。

CSS选择器

CSS基本语法

  • 选择器 + 声明块
    • 选择器 - 通过CSS选择器选中页面中的指定元素,下面会重点写。
    • 声明块 - 选择器后面跟着的是声明块,使用{}括起来,由一个个声明组成,声明由名值对组成,每一个声明使用;结尾。

      常用选择器

1.元素选择器

语法:标签名{}

eg:p{} //为所有的p元素设置样式。

2.ID选择器

语法:#id{} //id值唯一,不能重复

ed: #box{} //为id为box的元素设置样式。

3.类选择器

语法:.class{}

eg: .box{} //为所有的class值为box的元素设置样式。

4.分组选择器(也叫并集选择器)

语法:选择器1,选择器2,选择器N{}

eg: #box1,.box2,p{} //为为id为box1,class为box2和p的元素共同设置样式。

5.交集选择器

语法:选择器1选择器2选择器3{}

eg:p.box1{} //为class值为box1的p元素设置样式,注意id为唯一值,一般id选择器不会存在于交集选择器中(没必要)。

6.后代选择器

语法:选择器1 选择器2{}

eg:p .box{} //选中指定祖先元素p的指定后代.box。

7.子元素选择器

语法:父元素>子元素{}

eg:p>.box{} //选中制定父元素p的制定子元素。box。注意与后代元素选择器的区别

8.伪类选择器

  • 伪类可以用来表示一些特殊的状态:
    :link - 未访问过的超链接。
    :visited - 已访问过的超链接。
    :hover - 鼠标移入的元素。
    :active - 正在点击的元素。
    由于选择器优先级的问题,给超链接a设置伪类时,需要注意他们的顺序,一般的顺序是:
    love hate 记作(爱与恨),方便记忆
    :link>:visited>:hover>:active

选择器的优先级

为同一个元素设置多个样式时,此时哪个样式生效由选择器的优先级确定:

  • 选择器的优先级(权重):
· 内联样式 id选择器 类和伪类选择器 元素选择器 统配选择器 继承的样式
优先级 1000 100 10 1 0
  • 当一个选择器中含有多个选择器时,需要将所有的选择器的优先级进行相加,然后再进行比较,优先级高的优先显示,选择器的计算不会超过其最大的数量级(10个id选择器的优先级不能达到1000)
    分组选择器(并集选择器)的优先级单独计算,不会相加。
  • 样式后面加!important,该样式获取最高优先级,内联样式不能加!important属性。
  • 样式相同的谁在下面执行谁(样式的覆盖)。

转载于:https://www.cnblogs.com/dhai/p/6645918.html

你可能感兴趣的文章
如何基于Redis Replication设计并实现Redis-replicator?
查看>>
Linux 环境下 PHP 扩展的编译与安装 以 mysqli 为例
查看>>
浮点数内存如何存储的
查看>>
贪吃蛇
查看>>
EventSystem
查看>>
用WINSOCK API实现同步非阻塞方式的网络通讯
查看>>
玩一玩博客,嘿嘿
查看>>
P1352 没有上司的舞会
查看>>
ios11文件夹
查看>>
【HLOJ 559】好朋友的题
查看>>
Electric Fence(皮克定理)
查看>>
nvl 在mysql中如何处理
查看>>
MyEclipse 快捷键
查看>>
快速傅里叶变换FFT
查看>>
大数据常用基本算法
查看>>
JavaScript学习笔记(十三)——生成器(generator)
查看>>
hibernate保存失败
查看>>
MySQL增量订阅&消费组件Canal POC
查看>>
Sqlite多线程
查看>>
数据结构-时间复杂度
查看>>