每日鸡汤,每个你想要学习的念头都是未来的你向自己求救
让我们和官方文档一起系统得看一下css都有哪些选择器吧,按照优先级来
- id. #id 唯一值 (100)
- class .a {} 这个不用多说,最常见(10)
- html 元素 (1)
- 通用选择器 只有两个, *、ns |* 、*|*。 ns是namespace ,
- 新知识,css 中的命名空间namespace, @namespace 属性将不会继承其所在元素的命名空间 todo 有点高深,命名空间是一个地址
- 属性选择器,这个选择器不太熟悉,每次用都加了引号,这个都不能加引号,只有属性值可以加引号。 div[attr="value"],这个方括号里面不是非得用等号,还可以用其他的符号,比如.
- [attr|=value](选择attr以value开始)
- [attr~=value]在空格分割的句子中找包含value这个单词的attr
- 或者[attr]这样写,会选择所有具有attr属性的元素;
- 更多参考
下面是组合器
- 逗号分隔,叫做分组选择器 => 两个一般是并列,同级别,用逗号分隔一组一组的
- 空格分割。 后代节点
- >. 向右肩括号 直接子代节点
- ~ 一般兄弟选择器,这个不常用
- + 这个在做列表item的时候设置两个item之间的间距的时候非常有用 item+item {margin-top :10px;}
- || 列组合器 选择属于某个表格行的节点,这个也不常用
最后一个是很有用,但是还是不很熟的伪选择器
- 伪类 按照未被包含在文档树中的状态信息来选择元素a:after(10)
- 有好多好多好多伪类,比如:last-child
- :not() 、not的括号里面写简单的选择器不能写伪元素,写伪元素不生效,表示不符合一组选择器的元素,not不能被嵌套
- 注意注意!新知识,可以用:not()提高优先级,#foo:not(#foo) 和 #foo 明显前面的优先级高
- todo 这个选择器只会应用在一个元素上,无法用它来排除所有父元素。比如,
body :not(table) a
依旧会应用到表格元素<table>
内部的<a>
上, 因为<tr>
将会被:not(table)
这部分选择器匹配。 - 可以连着用a:not():not() ,也可以在括号中加入逗号
/* 类名不是 `.crazy` 或 `.fancy` 的元素 */ /* 注意,此语法尚未获广泛支持。 */ body :not(.crazy, .fancy) { font-family: sans-serif; }
- 伪元素 表示无法用html语义表达的实体
- 除了before after还有几个其他的伪元素(1)
- 比如color::selection (选中的状态), 这个有用到,改变选取的颜色和背景色之类的
- ::first-line块级元素的首行,只在
inline-block
,table-cell
,list-item
或者table-caption
的元素的情况下有效 - ::first-letter 块级元素的第一个字母,只在
inline-block
,table-cell
,list-item
或者table-caption
的元素的情况下有效 - 按照规范应该使用双冒号,来区分伪元素和伪类,虽然浏览器都支持
持续更新中~~