1、css的语法规则
- 由css选择器(selector),以及一条或多条声明组成,用冒号分开
- 举例:selector{porperty:value} 是key-value的方式
2.为什么会有选择器?
- 选择器是匹配元素的一种模式,不止是在css中
3.基本的选择器
- 元素选择器
<p>
color: red;
</p>
- id选择器
<style>
#notification {
font-size: 14px;
}
</style>
<p id="notification"></p>
- 类选择器
<style>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
</style>
<ul>
<li class="first done">起床</li>
<li class="second done">刷牙</li>
<li class="third">洗脸</li>
</ul>
- 通用选择器
* {
box-sizing: border-box;
}
.flex-container * {
flex-basis: 100%;
}
- 属性选择器
[attr]
[attr] 选择包含 attr 属性的所有元素,不论 attr 的值为何。
[disabled] {
cursor: not-allowed;
}
[attr=val]
[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。
[data-color="gray"] {
color: #ccc;
}
[attr~=val]
[attr~=val] 仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。
[attr=val]
[attr=val] 选择 attr 属性的值中包含字符串 val 的元素。
[title*="fuck"] {
display: none;
}
[attr^=val]
[href^="http://"] {
background-color: #f0ad4e;
}
[attr$=val]
[attr$=val] 选择 attr 属性的值以 val 结尾(包括val)的元素。
[src$="gif"] {
border: 1px solid #ccc;
}
[attr|=val]
[attr|=val] 选择 attr 属性的值以 val(包括val)或 val-开头的元素(-用来处理语言编码)。
[lang|="zh"] {
font-family: '微软雅黑';
}
- 伪类选择器
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }
- 为元素选择器
.clearfix::after {
content: '';
clear: both;
display: block;
}
.happy::before {
content: '😁';
}
p::selection {
color: white;
background: blue;
}
::backdrop 实验特性
::first-line 将样式只应用于一个块状元素的首行。
input::-webkit-input-placeholder {
color: #aaa;
}
介绍完了CSS选择器,下面我们CSS权重问题
在介绍之前我们先来看一道题目
饥人谷三个字的最后的样式是?看完这道题 小编来给你叨一叨CSS的权重~
1、什么是CSS权重?
- 权重决定了你CSS规则怎样被浏览器解析直到生效,即你的
CSS规则是怎样显示的
2、权重之比
权重顺序:!important>内联>ID>类=伪类=属性>标签(元素)=伪元素> 通配符
怎么确定权重?有几句口诀来看看吧
- 从0开始:
- 一个行内样式+1000;
- 一个id+100;
- 一个属性/类/伪类+10;
- 一个元素/伪元素+1;
举个栗子
p #cover . border a:havor
#cover--id选择器加了100
.border--class类选择器加了1;
最后的权重是: 0122
3.权重的基本规则
- 1、相同的权重:最后面出现的选择器为最后规则
- 2 不同的权值权重高则生效
4、对权重规则的总结一条样式规则的整体权重值包含四个独立部分:[A,B,C,D]
- A表示内联样式,只要1或者0两个值
- B表示规则中ID的数量
- C表示规则中标签和伪元素以外的其他选择器数量
- D表示规则中标签和伪元素的数量比较时从高位到低位(从A到D)分别比较,高位相同才需要比较低位(从A到D)分别比较,高位相同才需要比较低位
- important 注意点:
- 如果多条规则中都对同一个属性指定了!important,这时候!important的作用相互抵消,依然按照ABCD四组计算比较
- !important的作用只有在具有唯一性时才能提现,但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了!important的属性,所以最好的办法就是不要使用。
5、CSS优先级法则
- A)选择器都有一个权值,权值越大越优先
- B)当权值相等时,后出现的样式表要优于先出现的样式设置
- C)继承的CSS样式优先级低于低于指定的CSS样式
- D)在同一组属性设置中标
有“!important”规则的优先级最大
再回到之前的题目
msg:100
content 100 p 1 101
.container 10 box 10 p 1 22
p 1 #msg 101
第二行和第四行的权重相同,权重相同的情况下最后面出现的选择器为最后规则。
所以样式是:粉色,14px