HTML&CSS - Xi-Yuer

CSS 基础#

单行文本溢出#

.overflow-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本溢出#

.multiline-overflow-example {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 指定要显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

修改滚动条样式#

/* 宽度和高度 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 滑道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

标签选择器#

通过标签名选择元素
优点：可快速为同类型标签统一设置样式
缺点：不能涉及差异化样式，只能选择全部标签

h1 {
  color: #ccc;
}

类选择器#

通过类名选择元素

.container {
  color: pink;
}

id 选择器#

通过元素 id 属性选择元素

#md {
  font-weight: 600;
}

通配符选择器#

选择页面所有元素
用于清除内外边距

* {
  padding: 0;
  margin: 0;
}

相邻选择器#

选择所有指定元素的相邻后一个兄弟节点

<h1>h1-2</h1>
<p>p0 被选中</p>
<div class="container">
  <h1 class="good">h1</h1>
  <p>p1 被选中</p>
  <p>p2</p>
</div>

h1 + p {
  text-decoration: underline;
}

后代选择器#

在所有后代节点中选

ul li {
  color: blue;
}

子选择器#

只在亲儿子中选

div > a {
  color: green;
}

并集选择器#

h1,
h2,
h3 {
  text-align: center;
}

交集选择器#

/* good类的p元素 */
p.good {
  color: yellow;
}

伪类选择器#

根据元素状态或所处 DOM 结构选择元素

动态伪类选择器#

按这个顺序声明
a:link 链接一开始的样式
a:visited 链接访问后的样式
a:hover 光标经过链接的样式
a:active 链接被按下时的样式

:focus 用于选择获取焦点的表单元素，一般针对表单元素而言
input:focus
textarea:focus

结构伪类选择器 (C3)#

E
E
E(n)
E
E
E(n)

<div>
  <p>1</p>
  <span>span</span>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

/* 啥都选不到 */
div > p:nth-child(2) {
  color: red;
}
/* 选到2号p标签 */
div > p:nth-of-type(2) {
  color: blue;
}

属性选择器#

E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]

伪元素选择器#

伪元素选择器利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构
before 和 after 创建了一个行内元素，在 DOM 树中无法找到，故为伪元素
必须有 content 属性

伪元素字体图标#

p::before {
  content: '\e91e';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}

伪元素清除浮动#

1、额外标签法（隔墙法）
在浮动元素后面添加一个块级标签（如div），并设置 clear: both
<div style=” clear:both” ></div>

2、父级元素添加overflow，将其属性值设置为 hidden、 auto 或 scroll

3、父级添加after伪元素
.clearfix:after {
  content: ""; 必须要有content属性
  display: block; 块级元素
  height: 0; 不要看见该元素
  clear: both; 核心代码清除浮动
  visibility: hidden; 不要看见该元素
}
.clearfix { /* IE6、 7 专有 */
  *zoom: 1;
}

4、父级元素添加双伪元素
.clearfix:before,.clearfix:after {
  content:"";
  display:table; 转换为块级元素并一行显示
} .
clearfix:after {
  clear:both;
} .
clearfix {
  *zoom:1;
}