提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css复合选择器是什么?【css教程】,css复合选择器

css复合挑选器是由两个或多个基本挑选器,经由过程差别的体式格局组合而成的,目的是为了可以挑选更正确更邃密的目的元素标签。CSS复合挑选器包括子挑选器、相邻挑选器、包括挑选器、多层挑选器嵌套、属性挑选器、伪挑选器和伪元素挑选器,以上细致的运用以下:

1.子挑选器代码以下:

<style type="text/css">
#pic>img{ // 运用 > 号,让挑选器只挑选直接的子类,width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>

2.相邻挑选器

假如须要挑选紧接在另一个元素后的元素,而且两者有雷同的父元素,可以运用相邻兄弟挑选器(Adjacent sibling selector)。

比方,假如要增添紧接在 h1 元素后涌现的段落的上边距,可以如许写:

h1 + p {margin-top:50px;}

这个挑选器读作:“挑选紧接在 h1 元素后涌现的段落,h1 和 p 元素具有配合的父元素”。

3.包括挑选器

代码以下:

#header p{font-size:14px}
#main p {font-size:12}

定义<div id = "header">包括框里的段落字体大小为14像素
定义<div id = "main">包括框里的段落字体大小为12像素.

4.多层挑选器嵌套

代码以下:

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

5.属性挑选器

(1)婚配属性名挑选器

div[class] {font-size:24px;}

使该挑选器可以婚配div中设置了class属性的对象定义花样

(2)婚配属性值挑选器

img[alt="图象"][title="图象"] {border:solid 2px red}:

给<img src="images/pic1.jpg" alt="图象" title=“图象”>定义款式

(3)隐约婚配属性值挑选器

6.伪挑选器和伪元素挑选器

<style type ="text/css">
a:link{color:#FF0000} /*一般链接状态下款式*/
a:visited{color:#0000FF} /*被接见以后的款式*/
a:hover{color:#00FF00} /*鼠标经由的款式*/
a:active{color:#FF00FF} /*超链接被激活的款式*/
</style>

以上就是css复合挑选器是什么?的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css复合选择器是什么?【css教程】,css复合选择器"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线