选择器特性
选择器嵌套
.box h1{
color: red;
}
基本选择器
通用符选择器
* {
margin: 0px;
padding: 0px;
}
标签选择器
h1 {
color: red;
}
类选择器
#title {
color: red;
font-size: 28px;
}
ID选择器
#name {
color: red;
font-size: 28px;
}
属性选择器
存在属性
.h1[title] {
color: red;
}
属性值完全匹配
.h1[title="hello"] {
color: red;
}
属性值前置匹配
.h1[title^="hello"] {
color: red;
}
属性值后置匹配
.h1[title$="hello"] {
color: red;
}
属性值包含匹配
.h1[title*="hello"] {
color: red;
}
属性值匹配单词
包含"hello"单词或者就是“hello”
.h1[title~="hello"] {
color: red;
}
属性值匹配命名单词
以"hello"开头或者用-进行连接
h1[title|="hello"] {
color: red;
}
父子选择器
.box>h1 {
color: red;
}
后置全部兄弟选择器
.title-2~.title {
color: red;
}
后置相邻兄弟选择器
.title-2+.title {
color: red;
}
伪类选择器
link
a标签原始状态
a:link {
color: red;
}
active
元素选中状态
a:active {
color: red;
}
hover
元素被鼠标停滞状态
a:hover {
color: red;
}
focus
获取焦点状态
input:hover {
color: red;
}
visited
a标签被点击之后状态
a:visited {
color: red;
}
root
根元素状态
:root {
--color: red;
}
empty
元素内容为空状态
h1:empty {
display: none;
}
target
a标签锚点点击之后，跳转到元素的状态
h1:target {
color: red;
}
注意点
-
只有
a标签才拥有link、visited伪类 -
在使用
link、visited、hover、active伪类时，一定要按照顺序书写a:link { color: red; } a:visited { color: aqua; } a:hover { color: blue; } a:active { color: yellow; }之所这样，是因为
a标签标签可能同一时刻符合多个状态-
a标签未发生点击时：激活link -
鼠标移入
a标签时：激活link、hover -
鼠标点击
a标签，并且一直按住：激活link、hover、active -
a标签被鼠标点击之后：激活visited
-
结构选择器
first-child
选择处于第一个状态的元素
h1:first-child {
color: red;
}
last-child
选择处于子元素中最后一个的元素
h1:last-child {
color: red;
}
first-of-type
选择处于子元素中第一个的元素，并且只检索符合前置选择器的元素
h1:first-of-type {
color: red;
}
last-of-type
选择处于子元素中最后一个的元素，并且只检索符合前置选择器的元素
h1:first-of-type {
color: red;
}
only-child
选择处于子元素中唯一的元素，也就是父元素只包含一个子元素，才被选中
<style>
h1:only-child {
color: red;
}
</style>
<body>
<h1>我是h1</h1>
</body>
only-of-type
选择处于子元素中唯一的元素，并且只检索符合前置选择器的元素
h1:only-of-type {
color: red;
}
nth-child
/* 选择第一个元素 */
h1:nth-child(1) {
color: red;
}
/* 选择全部元素 */
h1:nth-child(n) {
color: red;
}
/* 选择前两个元素 */
h1:nth-child(n-2) {
color: red;
}
/* 选择偶数元素 */
h1:nth-child(even) {
color: red;
}
nth-last-child
/* 选择最后第一个元素 */
h1:nth-last-child(1) {
color: red;
}
/* 选择最后两个元素 */
h1:nth-last-child(n-2) {
color: red;
}
nth-of-type
/* 选择第一个元素 */
h1:nth-of-type(1) {
color: red;
}
nth-last-of-type
/* 选择第一个元素 */
h1:nth-last-of-type(1) {
color: red;
}
表单伪类
required
必填表单元素
input:required {
color: red;
}
optional
非必填表单元素
input:optional {
color: red;
}
disabled
被禁止表单元素
input:disabled {
color: red;
}
enabled
有效表单元素
input:enabled {
color: red;
}
valid
通过校验表单元素
input:valid {
color: red;
}
vertical
未通过校验表单元素
input:vertical {
color: red;
}
checked
被选中的元素
checkbox:checked {
color: red;
}
文本伪元素
首字母
h1::first-letter{
color: red;
}
首行
h1::first-line{
color: red;
}
