内容 Content
- Lorem ipsum dolor sit.
- Aperiam beatae odit consectetur?
- Consectetur amet repellat error?
- Cum, delectus deserunt? Magni.
- Atque illum reiciendis ut.
<div class = "box"></div>
.box{}
<div id = "box"></div>
#box{}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
| item | desc |
|---|---|
| [attribute] | 选择带有指定属性的元素 |
| [attribute="value"] | 选择带有指定属性和值的元素 |
| [attribute^="value"] | 选择指定属性以指定值开头的元素 |
| [attribute$="value"] | 选择指定属性以指定值结尾的元素 |
| [attribute*="value"] | 选择属性包含指定值的元素 |
a[title]{}
input[type='radio']{}
img[src^='http://']{}
img[src$='.jpg']{}
| item | desc |
|---|---|
| :link | <a> 初始状态/为访问过；静态样式 |
| :visited | 访问过/点击后状态；较少使用 |
| :hover | 鼠标置于元素上时；使用最广泛；移动端无效 |
| :focus | 获取焦点时[使用 tab 查看获取焦点效果] |
| :focus-within | 如果有子元素获取焦点时，即：选择包含有获得焦点元素的祖先元素 |
| :active | 单击时的状态；多用于提示；较少使用 |
| :target | 当前锚点选中时；使用 ID 指定锚点 |
a {
font: inherit;
color: inherit;
text-decoration: none;
}
a:link,
a:visited {
border-bottom: 1px solid #ccc;
}
a:hover,
a:focus {
border-color: #f40;
color: #f40;
}
a:active {
background-color: #f40;
color: #fff;
}
| item | desc |
|---|---|
| :focus | 获取焦点 - received focus |
| :checked | 元素选中 - checked or toggled to an on state
radio (<input type="radio">) checkbox (<input type="checkbox">) option (<option> in a <select>) |
| :valid | 验证有效 - contents validate successfully |
| :invalid | 验证无效 - contents fail to validate |
| :in-range | 在指定范围 - current value is within the range limits |
| :out-of-range | 超出指定范围 - current value is outside the range limits |
| :disabled | 元素功能被禁止生效时 |
input[type='text']:focus+label {
color: #f40;
}
input[type='radio']:checked+label {
color: #f40;
}
button {
padding: 10px;
border: none;
background-color: transparent;
font: inherit;
color: #f40;
cursor: pointer;
}
button:disabled {
color: #ccc;
cursor: not-allowed;
}
| item | desc |
|---|---|
| :nth-child(n) | 第几个孩子；孩子从1开始
matches elements based on the indexes of the elements in the child list according to their position |
| :first-child | 第一个孩子 - the first element |
| :last-child | 最后一个孩子 - the last element |
| :only-child | 唯一的子元素/孩子 |
:nth-child(even)//选择序号为偶数的元素 :nth-child(odd)//选择序号为奇数的元素
:nth-child(2n)//同even；选择序号为偶数的元素 :nth-child(2n+1)//同odd：选择序号为奇数的元素
:nth-child(3n)//选择序号为3、6、9等元素 :nth-child(3n+1)//选择序号为1、4、7、10等元素
:nth-child(-n+3)//前3 - 选择序号为3、2、1的元素；:nth-child(3-n)错误 :nth-last-child(-n+3)//后3
| item | desc |
|---|---|
| first-of-type() | 选择指定类型第一个 |
| last-of-type() | 选择指定类型最后一个 |
| nth-of-type() | 选择指定类型第几个 |
| item | desc |
|---|---|
| :root | 定义全局 CSS 变量 |
| :not | 不符合条件的元素 |
| :has | 具备某种关系的元素 |
<input>、<select>等可替换元素 replaced element 不可以使用伪元素
li::marker {
content: '✝ ';
font-size: 1.2em;
}
//HTML5
<div class="box active"></div>
//CSS3
.box {
opacity: 0.5;
}
.box.active {
opacity: 1;
}
ul,ol {
margin: 0;
padding: 0;
box-sizing: border-box;
}
等价于
:is(ul,ol) {
margin: 0;
padding: 0;
box-sizing: border-box;
}