CSS3（杂记）

最新推荐文章于 2024-09-28 22:57:04 发布

wxiaojia

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量235

点赞数

分类专栏： CSS 文章标签： css3 伪类伪元素浏览器的后缀表示属性选择器

本文链接：https://blog.csdn.net/m0_37754657/article/details/79095627

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.伪类：e表示元素element

e.first-child{} 第一个孩子

e.last-child{} 最后一个孩子

e.only-child{} 只有一个孩子

e.nth-child(n){} 第n个孩子 n=1 2 3 4 5 6 7.....

e.nth-child(2n+1) 或 e.nth-child(odd) 获取奇数孩子，n=1 3 5 7 9.....

e.nth-child(2n) 或 e.nth-child(even) 获取偶数孩子，n=2 4 6 8 10....

2.伪元素：

e::first-letter 设置第一个文字

e.first-line 第一行文字

e.after 盒子里面的后面插入的内容

e.before 在盒子里面的前面插入内容

3.属性选择器

e[data]	选择带有data属性的元素对象
e[data=”one”]	选择带有data属性的元素对象，并且属性值等于one的加样式
e[data^=”o”]	选择带有data属性的元素对象，并且属性值以o开头
e[data$=”e”]	选择带有data属性的元素对象，并且属性值以e 结尾的
e[data*=”n”]	择器带有data属性的元素对象，并且属性值包含n

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      .one{
      	width:30%;
      	border:1px solid red;
      }
      .one:first-line{
      	color:blue;
      }
      .one:first-letter{ /*第一个字*/
      	color:#660099;
      	font-size:80px;
      	font-weight:bold;
      	float:left;
      	padding:20px;
      	text-shadow: 2px 2px 2px #cc3399;
      }
      .two::after{
      	content:"哈哈哈！！！！";
      }
      .two::before{
      	content:"呵呵";
      }
	</style>
</head>
<body>
	<div class="one">
		层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
            CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
	</div>
	<div class="two">
	   谁在我前面
	</div>
</body>
</html>

4.背景图片的尺寸

Background-size：宽度高度; 例:background-size: 400px 500px;

Background-size:cover;

背景图片会把整个盒子（宽度和高度）都用背景覆盖上

Background-size:contain

背景图片会把盒子的宽度或高度覆盖就停止

5.不同浏览器的后缀表示：

-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-moz-background-size:cover;
-webkit-  谷歌浏览器chrome 和safari
-o-  opera浏览器
-moz 火狐浏览器
-ms-  ie浏览器
-ms-background-size:400px 500px;