网站建设有哪三部,焦作建设网站的公司,网站设计软件有哪些,做淘宝需要知道什么网站吗组合器是解释选择器之间关系的某种机制。在简单选择器器之间#xff0c;可以包含一个组合器#xff0c;从而实现简单选择器难以达到的效果。
CSS 中有四种组合器#xff1a; 后代选择器 (空格)#xff1a;匹配属于指定元素后代的所有元素#xff0c;示例#xff1a;div …组合器是解释选择器之间关系的某种机制。在简单选择器器之间可以包含一个组合器从而实现简单选择器难以达到的效果。
CSS 中有四种组合器 后代选择器 (空格)匹配属于指定元素后代的所有元素示例div p 选择div元素后代中的p包括它的子孙十八代 子选择器 () 指定元素子元素的所有元素。div p选择div元素下的子元素只包括子元素 相邻兄弟选择器 () 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟同级元素必须具有相同的父元素“相邻”的意思是“紧随其后” 通用兄弟选择器 (~)通用兄弟选择器匹配属于指定元素的同级元素的所有元素
1、后代选择器 (空格)
匹配属于指定元素后代的所有元素示例div p 选择div元素后代中的p包括它的子孙十八代
代码
style
div p {background-color: yellow;
}
/style
/head
bodydivpdiv 段落 1。/ppdiv 段落 2。/pdiv div2 p div2 中的 p/p/divsectionpdiv 段落 3。/p/section
/divp段落 4。不在 div 中。/p
p段落 5。不在 div 中。/p/body后代选择器选择的元素的所有符合的后代元素包括子孙十八代上面的代码中div 段落 3的 p也被选择中这一点和后面的子选择器最大的区别。
渲染效果
**2、子选择器 () **
指定元素子元素的所有元素。div p选择div元素下的子元素只包括子元素
代码
style
div p {background-color: yellow;
}
/style
/head
body
divpdiv 段落 1。/ppdiv 段落 2。/pdiv div2 p div2 中的 p/p/divsectionpdiv 段落 3。/p/section
/divp段落 4。不在 div 中。/p
p段落 5。不在 div 中。/p/body“div 段落 3”属于孙子p在子选择器中不被选中。 渲染效果
3、相邻兄弟选择器 ()
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟同级元素必须具有相同的父元素“相邻”的意思是“紧随其后”
代码
style
div p {background-color: yellow;
}
/style
/head
body
divpdiv 段落 1。/ppdiv 段落 2。/pdiv div2 p div2 中的 p/p/divsectionpdiv 段落 3。/p/section
/divp段落 4。不在 div 中。/p
p段落 5。不在 div 中。/p/body渲染效果相邻兄弟选择器强调的事“紧随其后”的div元素同级一级并且紧随其后的是“p段落 4。不在 div 中。/p”。
4、通用兄弟选择器 (~)
通用兄弟选择器匹配属于指定元素的同级元素的所有元素
代码
style
div ~ p {background-color: yellow;
}
/style
/head
bodydivpdiv 段落 1。/ppdiv 段落 2。/pdiv div2 p div2 中的 p/p/divsectionpdiv 段落 3。/p/section
/divp段落 4。不在 div 中。/p
p段落 5。不在 div 中。/p/body渲染效果与div同级并且是p的就包括“p段落 4。不在 div 中。/p”和“p段落 5。不在 div 中。/p”
