选择器
选择器的分类
| 选择器类型 | 内容 | 操作或符号 | 说明 |
|---|---|---|---|
| 基本选择器 | 元素选择器 | h1 {} span {} | |
| *通配选择器 | * {}(全部元素) | ||
| 类选择器 | .classname {} | ||
| id选择器 | #idname {} | ||
| 群组选择器 | none | ||
| 层次选择器 | |||
| 交集选择器 | E.F | 两者的交集 | |
| 并集选择器 | E,F,H | 选择并集 | |
| 后代选择器 | E F | 所有的后代都会选择(F) | |
| 子选择器 | E>F | 只选择子一代,不会选择孙子代 | |
| 兄弟选择器 | E+F | 相同兄弟辈都会选择 | |
| 通用兄弟选择器 | E~F | 兄弟选择器只能选择相连的兄弟，用~子辈也会被选择 | |
| 伪类选择器 | |||
| 动态伪类 | |||
| 目标伪类 | |||
| 语言伪类 | |||
| UI状态伪类 | |||
| 结构伪类 | |||
| 否伪类伪类 | |||
| 伪元素选择器 | |||
| 属性选择器 | div[attr="value"] {} | ~= 表示包含value就选 |= 表示value等于开头或是value就选(ex: |=en, 则 en-US和en都会被选) ^= 表示value开头的会被选 $= 表示以value结尾的会被选 *= 表示value至少包含一次就选 |
伪类选择器和伪元素选择器
伪类是指html中没有声明的类。
在写标签用class 就可以添加类，css3中规定了一些通用的，不写也能用的类 就叫伪类。
例如first-child 、nth-child()、hover() 、active() 等等。
伪元素可以理解为一个元素，在渲染时会添加到元素后。
比较重要的有::befor 和 ::after ，通常用来添加内容（不会被屏幕阅读器识别）
关系选择器
后代选择器
...
<style>
section h1 {
color: #7c7;
}
</style>
...
<body>
<header></header>
<section>
<div>三兄弟标签一</div>
<h1>三兄弟标签二</h1>
<div>
<h1>三兄弟之三的子标签</h1>
</div>
</section>
</body>
...
该表示后代选择器(空格链接),孙子级的h1也被选中.
子代选择器
...
<style>
section>h1 {
color: #7c7;
}
</style>
...
<body>
<header></header>
<section>
<div>三兄弟标签一</div>
<h1>三兄弟标签二</h1>
<div>
<h1>三兄弟之三的子标签</h1>
</div>
</section>
</body>
...
用>链接,表示子元素选择器,只会选择后代,而不会选择孙子代.
通用兄弟选择器
...
<style>
section h1~h2 {
color: #7c7;
}
</style>
...
<section>
<div>兄弟级别div标签</div>
<h1>兄弟级别h1标签</h1>
<div>
<h1>孙子级别h1</h1>
<div>孙子级别div标签</div>
<h2>孙子级别h2</h2>
</div>
<div>兄弟级别div标签二</div>
<h1>兄弟级别h1二代</h1>
<h2>兄弟级别h2</h2>
</section>
...
通用兄弟选择器,只要存在复合的条件,哪怕不相邻,也可以被筛选到,包括后代的元素.
兄弟选择器
...
<style>
section h1~h2 {
color: #7c7;
}
</style>
...
<section>
<div>兄弟级别div标签</div>
<h1>兄弟级别h1标签</h1>
<div>
<h1>孙子级别h1</h1>
<div>孙子级别div标签</div>
<h2>孙子级别h2</h2>
</div>
<div>兄弟级别div标签二</div>
<h1>兄弟级别h1二代</h1>
<h2>兄弟级别h2</h2>
</section>
...
只有相邻的才可以被选择,同样可以传递给后代.
怎么选
尽可能的简单,保持必要的特殊性,充分利用层叠特性
继承
CSS是通过文档树来来加到对应的节点, 因此CSS的应用也要考虑子属性的效果。
CSS继承的权重不会继承，为null（*通配符的权重为0 0>null）；
...
<!--* {color:blue}-->
html {color: red;}
div {color:green;}
...
<div> Here is some <span>words.</span></div>
...
span会继承div的属性，而继承的属性为null，但若选通配符修改属性，则通配符的权重大于继承，最终span内容为蓝色。
但若选html来修改，span会继承html的颜色，单又会继承div的颜色，后面的会覆盖到前面的，最终为绿色。
需要注意不同元素的继承属性以及继承能力是不一样的。
覆盖
相同等级的选择器,后面的会覆盖前面的。
层叠
根据权重不同会有不一样的效果,可以这么理解,
ID是全文档唯一的,所以ID选择器的权重占百位；
而伪类，类，属性选择器其次重要所以占十位；
元素，伪元素选择器占个位，权重的位数不会进位。
继承的元素权重都为0。
扫一扫
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
