选择器

选择器{
    样式
}
  • 标签选择器
h1{
    color:red;
}
  • 类选择器
.box1{
    color:red;
}
  • id选择器
#d1{
    color:red;
}
  • 属性选择器
选择器 匹配规则 示例
[属性] 选中包含某个属性的元素 [disabled]
[属性="值"] 选中属性值 完全匹配 的元素 [type="text"]
[属性~="值"] 选中属性值 包含某个单词 的元素 [class~="btn"]
[属性|="值"] 选中属性值等于 值 或 值- 开头的元素 [lang|="en"]
[属性^="值"] 选中属性值 以某个值开头 的元素 [href^="https"]
[属性$="值"] 选中属性值 以某个值结尾 的元素 [src$=".jpg"]
[属性*="值"] 选中属性值 包含某个值 的元素 [title*="关键字"]
  • 伪类选择器
伪类 作用 示例
:hover 选中鼠标悬停的元素 button:hover { color: red; }
:focus 选中获得焦点的元素 input:focus { border: 2px solid blue; }
:active 选中鼠标按下的元素 a:active { color: green; }
:nth-child(n) 选中第 n 个子元素 li:nth-child(2) { color: green; }
:checked 选中已勾选的表单项 input:checked { background: red; }
:disabled 选中禁用的表单 input:disabled { background: gray; }
:not(选择器) 选中不匹配选择器的元素 div:not(.active) { opacity: 0.5; }

Display和浮动

Display方式

  • block:块元素
  • inline：行内元素
  • inline-block:行内块元素
  • none：不显示，但是代码中保存

浮动操作

.div1{
    float:left;
}
.div2{
    float:right;
}

清除浮动

clear:both; //两侧不允许浮动，直接新开一行
clear:left；//左侧不允许浮动
clear:right;//右侧不允许浮动

防止边框塌陷

  • 固定父div大小，防止浮动跑出 不推荐使用
  • 在所有浮动构件之后，加入空的div,然后设置clear:both，直接会在最后面新开一行，撑开父级边框
  • 在父div中设置overflow:hidden，自动撑开