旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css复合选择器是什么?【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:99


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

标签:css复合选择器