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复合选中器是啥?的具体内容,更多请关注百分百源码网其它相关文章!