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
网友评论