1.基本选择器
-
- 一个元素不能写多个class属性
- 一个元素的class属性,能写多个值,用空格隔开。
-
- 一元素只能拥有一个id属性,多个元素的id属性值不能相同。
2. 复合选择器
-
- 常用:元素选择器配合类名选择器—p.beauty {}
- id选择器、理论上可以作为交集的条件,但实际应用中几乎不用,因为没有意义。
- 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是p元素又是span元素。
-
- 并集选择器,我们一般竖着写。
- 并集选择器,通常用于集体声明,可以缩小样式表体积。
- 后代选择器:选择器1 选择器2 选择器3 {} (先写祖先,后写后代)
-
- 后代选择器,最终选择的是后代,不选中祖先。儿子、孙子、重孙子,都算是后代。
- 结构符合HTML嵌套规则(如:p不能嵌套块级元素)
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: red;
}
-
- 选中指定元素中,符合要求的儿子元素
- 子、孙子、重孙子、重重孙子.….统称后代!,子就是指儿子。
-
- 相邻兄弟选择器:选择器1+选择器2 {}(选择指定元素后面紧挨着的兄弟元素)
- 通用兄弟选择器:选择器1~选择器2 {}(选择指定元素后面所有的兄弟元素)
/* 第一种写法:选中具有title属性的元素 */
[title] {
color: red;
}
/*第二种写法:选中具有title属性,且属性值为value1的元素*/
[title="value1"] {
color: red;
}
/*第三种写法:选中具有title属性,且属性值以字母a开头的元素*/
[title^="a"] {
color: red;
}
/*第三种写法:选中具有title属性,且属性值以字母u结尾的元素*/
[title$="u"] {
color: red;
}
/*第三种写法:选中具有title属性,且属性值包含字母u的元素*/
[title*="u"] {
color: red;
}
3. 伪类选择器
/*选中的是没有访问过的a元素*/
a:link {
color: orange;
}
/*选中的是访问过的a元素*/
a:visited {
color: gray;
}
/*选中的是鼠标悬浮状态的a元素*/
a:hover {
color: skyblue;
}
/*选中的是激活状态的a元素*/
a:active {
color: green;
}
/*选中获取焦点的表单控件*/
input:focus {
color: orange;
background-color:green;
}
/*按照所有兄弟计算*/
div>p:first-child {} /*没有符合条件*/
div>p:last-child {} /*没有符合条件*/
div>p:nth-child(an+b) {}
div>p:nth-child(3) {}/*李四*/
/*按照所有同类型兄弟计算*/
div>p:first-of-type {} /*张三*/
div>p:last-of-type {} /*老八*/
div>p:nth-of-type(an+b) {}
div>p:nth-of-type(3) {}/*王五*/
:nth-last-child(an+b) /*所有兄弟元素中的倒数第n个*/
:nth-last-of-type(an+b) /*所有同类型身弟元素中的倒数第n个*/
:only-child {} /*选择没有兄弟的元素(独生子女)*/
:only-of-type {} /*选择没有同类型兄弟的元素*/
:root {} /*根元素*/
:empty {} /*内容为空元素空格也算内容*/
<div>
<span>测试1</span>
<p>张三:98分</P>
<p>李四:88分</p>
<p>王五:78分</P>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
<span>测试2</span>
</div>
- 3.3 否定伪类::not(选择器)排除满足括号中条件的元素。
div>p:not(:first-child) /*排除了张三*/
<div>
<p>张三:98分</P>
<p>李四:88分</p>
<p>王五:78分</P>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
</div>
-
- :checked 被选中的复选框或单选按钮。
- :enable 可用的表单元素(没有disabled属性)。
- :disabled 不可用的表单元素(有disabled属性)。
-
- :lang(en) 根据指定的语言选择元素(本质是看lang属性的值)。
4. 伪元素选择器
- ::first-letter 选中元素中的第一个文字。
- ::first-line 选中元素中的第一行文字。
- ::selection 选中被鼠标选中的内容。
- ::placeholder 选中输入框的提示文字。
- ::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容)。
- ::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容)。