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网别的相干文章!