最近工作发觉css有些遗忘,是需要再次重新复习一下css. 便开启这个系列,用于复习和更新下学过的知识.毕竟温故而知新嘛.
首先是一些基本的选择器,我归类为简单选择器.这里他们的用法我不细讲.
简单选择器
* { }
通配选择器
e { }
元素选择器
id { }
id选择器,只允许页面中出现一次.同时权值最高
.calss { }
class选择器,可多次出现
然后, 有一类选择器是对元素的属性进行选择, 需要同元素选择器一起使用, 这里我称之为属性选择器
属性选择器
属性选择器用[]包裹.同时属性值要用引号引起来。
e[attr] { }
具有attr属性的元素
e[attr="val"] { }
具有attr属性且值为val的的元素。
e[attr|="val"] { }
attr属性的值为val或者以 val- 开头的元素。
该值必须是整个单词或有连字符。
e[attr^="val"] { }
attr属性的值以val开头的元素
e[attr$="val"] { }
attr属性的值以val结尾的元素
e[attr~="val"] { }
attr属性包含值为val的元素。
用于选取属性值中包含指定词汇的元素。单词间用空格隔开。
e[attr*="val"] { }
attr属性的值包含val的元素
可以发现以值开头有两种, 属性包含也有两种.
接下来细分其中区别
1
2
3
4 首先是以值开头
对于a[title^="web"]{ }. 1,2,3,4元素都会选中.
对于a[title|="web"]{ }. 只会选中1,3.
可以得出
a[title^="web"]{ }.属性值当作一个整字符串,只要开头是web. 就选中.
a[title|="web"]{ }是选中web或者web-开头的. 两个单词需用-连接.
然后是包含该值
对于a[title*="web"]{ }. 1,2,3,4元素都会选中.
对于a[title~="web"]{ }. 只会选中1,4.
可以得出
a[title*="web"]{ }.属性值字符串只要有web. 就选中.
a[title~="web"]{ }是选中有对应单词web. 可多个需用空格分隔.
接下来的选择器算是在上面的选择器更上一层的选择器.可以算是选择器的选择器.这里我称为上层选择器.
上层选择器
E F { }
后代选择器,匹配到符合E选择器元素下面的所有的符合F选择器元素（包括子、孙），中间空格隔开
E>F { }
子元素选择器, 选择到符合E选择器元素的只有子代中符合F选择器的元素. 其孙代后都不会选择
E+F { }
相邻兄弟选择器, 紧接在符合E选择器元素后面（不会选择前面的）的同级中第一个符合F选择器元素，相邻兄弟选择器，有相同的父级。
E~F { }
全兄弟选择器, 选择符合E选择器元素后面（不会选择前面的）的所有兄弟中符合F选择器元素。
EF { }
交集选择器, 匹配到同时符合E选择器元素和符合F选择器元素，中间无空格
E,F { }
并集（多元素）选择器, 匹配到符合E选择器元素或者符合F选择器元素，用逗号隔开。
目前关于CSS基本选择器复习完了. 接下来还是会去整理些CSS中常用的属性, 同时更新自己欠缺的内容和使用技巧之类的