css高级选择器中伪元素选择器与多列

回复

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.伪元素选择器

伪元素选择器的特点:获取指定元素中某一部分文本而用的

1.first-letter :用于选取指定选择器(元素)的首字母

复制代码

未选中是的效果：

选中是的效果：

二.多列

属性:

1.column-count：元素被分割的列数

2.column-gap ：规定列与列之间的间隔

3.column-rule：列规则，列间隔符的宽度、样式、颜色

column-rule：1px solid red；

注意：多列需要考虑浏览器兼容问题：

internet10 和 Opera 支持多列属性

Firefox需要前缀-moz-

Chrome 和 Safari 需要前缀 -webkit-

div{

column-count:3;

column-gap:50px;

column-rule:2px solid red;

-moz-column-count:3;/*********火狐浏览器多列设置************/

-webkit-column-count:3;/*******谷歌和Safari浏览器设置*************/

}

<!DOCTYPE html >
<head>
<title> 多列 </title>
<meta charset="utf-8" />
<style>
#content{
width:300px;
height:300px;
border:1px solid black;
-webkit-column-count:3;
column-gap:20px;
-webkit-column-rule:3px solid red;
}
</style>
</head>
<body>
<div id="content">
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
</div>
</body>
</html>