属性选择器：
写在开始标签里的东西 都是标签的属性
- 选择指定标签的指定属性
标签名[属性名] { }
- 选择指定标签的指定属性的指定值
标签名[属性名="属性值"] { }
- 选择所拥有的指定属性的标签
[属性名] { }
- 选择所拥有的指定属性且有指定的标签
[属性名="属性值"] { }
自定义属性:
<div sex="男"></div>
伪类选择器:
:empty
选择所遇到没有子元素或内容的标签
:first-child
选择所有的第一个元素为目标元素的标签
例：.box div:first-child{}
选择.box的第一个子元素 且子元素必须是div
:last-child
选择 最后一个子元素且必须是目标元素
例:
.box div:last-child{}
选择.box的最后一个子元素 且元素必须是div
:first-of-type(n)
选择子元素中 第一个 目标元素
例:
.box div:first-of-type{}
选择.box中的子元素中的 第一个 div
这个div可以不是第一个子元素
:last-of-type
选择子元素中 最后一个 目标元素
例:
.box div:last-of-type{}
:nth-child(n)
选择第n个子元素 子元素必须是目标元素
例:
.box div:nth-chilf(2){}
选择.box第二格子元素 且子元素必须是div
:nth-last-child(n)
选择 倒数第n格子元素 子元素必须是目标元素
例:
.box div:nth-last-child(2){}
选择.box倒数第2个子元素 且子元素必须是div
:nth-of-type(n)
选择 第n个目标元素
例：
.box div:nth-of-type(2){}
选择.box中第二个div
:nth-last-of-type(n)
选择 倒数第n个目标元素
例:
.box div:nth-last-of-type(2){}
选择.box中 倒数第2个div
伪元素：
伪元素选择器
::first-latter
选中 目标元素的第一个字符
::first-line
选中目标元素的第一行文本
::selection
不需要制定子元素 作用于整个页面
修改用户选中文字后的文字颜色和背景色
棋盘格：
<style>
.tr {
width: 640px;
height: 640px;
border: 1px solid black;
}
.tr div {
float: left;
padding: 40px;
}
.tr div:nth-of-type(16n + 2) {
background-color: black;
}
.tr div:nth-of-type(16n + 9) {
background-color: black;
}
.tr div:nth-of-type(16n + 11) {
background-color: black;
} .tr div:nth-of-type(16n + 4) {
background-color: black;
}
.tr div:nth-of-type(16n + 13) {
background-color: black;
}
.tr div:nth-of-type(16n + 6) {
background-color: black;
}
.tr div:nth-of-type(16n + 15) {
background-color: black;
}
.tr div:nth-of-type(16n + 8) {
background-color: black;
}
</style>
</head>
<body>
<div class="tr">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
效果图：
