CSS 复合选择器
交集选择器
交集选择器有两个或者多个选择器勾陈个,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,(如h3.special)
记忆技巧:
交集选择器是比用且的意思,即…又…意思
比如: p.one 选择的是:类名为.one的段落标签。
并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(class、id、标签)都可以作为并集选择器的一部分。如何某些选择器定义的样式完全相同或者部分相同就可以使用并集选择器为它们定义相同的CSS样式。
记忆技巧:
并集选择器是 和 的意思,就是说,只要是逗号隔开的,所有选择器都会执行后面的样式。
比如 .one, p, #test{color : redf} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
后代选择器
后代选择器又称为包含选择器,用来选择元素或者元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外城标签的后代。
子元素选择器
子元素选择器智能选择作为某元素子元素的元素,器械发就是把父级标签写在前面,子集标签写在后面中间跟一个>进行连接 注意:符号左右两侧各保留一个空格
属性选择器
选取标签带有某些特殊属性的选择器。
选择器 | 含义 |
---|---|
E[attr] | 勋在attr属性即可 |
E[attr = val] | 属性值完全等于val |
E[attr *= val] | 属性值里包含val字符并且存在于任意位置 |
E[atr] ^= val | 属性值里包含val字符并且存在于开始位置 |
E[attr $= val] | 属性值里包含val字符并且存在于结束位置 |
伪元素选择器
- E::first-letter 文本的第一个单词或字
- E::first-line 文本的第一行
- E:: selection 可改变选中文本样式
- E::before和E::after
在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用。
div::before{
content: "开始";
}
div::after{
content: "结束";
}