选择器
简单选择器
伪元素选择器
组合选择器
标签选择器
p{color:blue;}
类选择器
.special{color:blue;}
多个组合
.className
- .
- 字母，数字，-，_
- className必须以字母开头
- 区分大小写
- 出现多次
id选择器
#ban {color:blue;}
#id
- #
- 字母，数字，-，_
-id必须以字母开头
-区分大小写
-只出现一次
通配符选择器
*{color}
所有的元素
属性选择器
<input disabled type=“text” value=“张三”>
[disabled]{background-color:#eee;}
属性选择器 - [att=val]
[type=button]{color:blue;}
id选择器,类选择器就是属性选择器的特例#nav{} = [id=nav]{}
属性选择器 - [att ~= val]
<h2 class=“title sports”>title</h2>
<p class=“sports”>content</p>
[class~=sports]{color:blue}
类似于模糊匹配 空格之间使用模糊匹配
属性选择器 - [att |= val]
<p lang=“en”>hello</p>
<p lang=“en-us”>greeting!</p>
[lang |= en] { }
全文的模糊匹配
属性选择器 - [att ^= val]
[href ^= “#”] { }
以什么开头的
属性选择器 - [att $= val]
以什么结尾的
属性选择器 - [att *= val]
包含什么值
伪类选择器
a:link {}
a:visited {}
a:hover {}
a:active {}
enabled
disabled
checked
伪类选择器
li:first-child{}
li:last-child{}
li:nth-child(type){} type : even、odd、3n+1
li:nth-last-child(type){}
:only-child{}
:first-of-type{} //第一个这种类型的元素
:last-of-type{} //
:nth-of-type(type){}
:nth-last-of-type(type){}
:only-of-type{}
:empty 选择没有子元素的标签
:root 跟标签
:not() 不包含
:target 锚点
:lang() language的值
简单选择器
tag{}
.className{}
#id{}
*{}
[att]{}
:link{}
组合选择器
将简单选择器进行组合
img[src$=jpg]{}
其他选择器
伪元素选择器
::first-letter{}
内容的第一个字符变大
::first-line{}
::before{
content:’before’;
}
::after{
content:’after’;
}
::selection{
color:red;
background-color:#ccc;
}
组合选择器
后代选择器子代选择权
.main h2{}
.main>h2{}
兄弟选择器
h2+p{}
选中了h2和p
通用兄弟选择器
h2~p{}
h2和之后的p
选择器分组
h1,h2,h3{}
继承
body{
font-family:””;
}
继承属性
- color
- font
- text-align
- list-style
- ...
自动继承
非继承属性
- background
- border
- position
- ...
在文档中如何查看该属性是否是可以继承
在文档中有一个inherited属性，看是否是yes还是no
CSS优先级
计算方法
- a = 行内样式 （1000）
- b = ID选择器的数量 （100）
- c = 类、伪类和属性选择器的数量 （10）
- d = 标签选择器和伪元素选择器的数量 （1）
| 选择器 | a | b | c | d | value |
| h1 | 0 | 0 | 0 | 1 | 1 |
| p > em | 0 | 0 | 0 | 2 | 2 |
| style:”" | 1 | 0 | 0 | 0 | 1000 |
| .comment p | 0 | 0 | 1 | 1 | 11 |
| div#content | 0 | 1 | 0 | 1 | 101 |
| a:link | 0 | 0 | 1 | 1 | 11 |
CSS层叠
相同的属性会覆盖
- 优先级
- 后面覆盖前面
不同的属性会合并
CSS改变优先级
- 改变先后顺序
- 提升选择器优先级
- !important
color: blue !important;
个人认为:提升选择器优先级是最好的改变优先级的方法