-
:nth-last-child(n)
选择器和前面的":nth-child(n)"选择器非常的相似,只是这里多了一个“last”,所起的作用和":nth-child(n)"选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素
查看全部 -
:nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以使整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素
查看全部 -
:last-child
选择器选择的是元素的最后一个子元素
查看全部 -
:first-child
选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个元素,记住是子元素,而不是后代元素
示例:
<style>
ul > li:first-child{
color:red;
}
</style>
<ul>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul>
查看全部 -
:target
目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素
示例:
<style>
#brand:target{
<!--背景颜色-->
background:orange;
<!--内容颜色-->
color:white;
}
</style>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
查看全部 -
:empty
选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格
示例:
p:empty{
//将没有内容的标签隐藏起来
display:none
}
查看全部 -
:not选择器
又称否定选择器,选择除某个元素之外的所有元素
查看全部 -
结构性伪类选择器-root:
就是匹配元素E所在文档的根元素,在HTML文档中,根元素始终就是<HTML>
示例:
:root{background:orange}
html {background:orange;}
两者效果是一样的
查看全部 -
属性选择器:
定义:
CSS3在CSS2的基础上进行了扩展,新增了属性选择器
参数:
属性选择器 功能描述
E[att^=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串
E[att$=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串,刚好与E[att^=val]相反
E[att*=val] 选择匹配元素E,且E元素定义了属性att,其属性值任意位置包含了val。换句话说,字符串与属性值的任意位置匹配
查看全部 -
背景:
有时候需要设置多个背景,所以对背景的属性单独定义,以逗号隔开的方式
示例:
background-image: url(图片地址1),url(图片地址2),url(图片地址3)
background-position: left top, center top,right top;
background-repeat: no-repeat , no-repeat, no-repeat;
查看全部 -
background-size:
定义:
设置背景图片的大小,以长度值或百分比显示
语法:
background-size: auto | <长度值> | <百分比> | cover | contain
参数:
auto:
默认值,不改变背景图片的原始高度和宽度
长度值:
成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放
百分比:
0%~100%之间的任何值,将背景图片宽高一次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上
cover:
顾名思义为覆盖,即将背景图片等比缩放以填满整个容器
contain:
容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止
查看全部 -
background-clip:
定义:
用来将背景图片做适当的裁剪以适应实际需要
语法:
background-clip : border-box | padding-box | content-box | no-clip
参数:
border-box:
从边框
padding-box:
内填充
content-box:
内容区域
no-clip:
不裁剪
查看全部 -
background-origin:
定义:
设置元素背景图片的原始起始位置
语法:
background-origin : border-box | padding-box | content-box;
参数:
border-box:
边框开始
padding-box:
内边距开始
content-box:
内容区域开始
前提:
需要先设置背景backgroud:颜色 图片路径 no-repeat
查看全部 -
text-shadow:
定义:
设置文本的阴影效果
语法:
X-Offset Y-Offset blur color
参数:
X-Offset:表示阴影的水平便宜距离,其值为正值时阴影向右偏移,反之向左偏移
Y-Offset:是指阴影的垂直偏移距离,如果其值时正值时,阴影向下偏移,反之向上偏移;
blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0
color:是指阴影的颜色,其可以使用rgba色
查看全部 -
@font-face{
font-family: 字体名称(自定义一个名称)
src: 字体文件在服务器上的相对或绝对路径
}
在上面设置外之后
font-family: 自己定义的字体名称
查看全部
举报