css 选择器 中 加号 是干什么的

html-css024

css 选择器 中 加号 是干什么的,第1张

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。 加号(+)为:相邻同胞选择器 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

~(波浪号):A ~ B表示选择A标签后的所有B标签,但是A和B标签必须有相同的父元素。

h3~h5选择前面有<h3>元素的每个<h5>元素,即选择h3之后出现的所有h5,两种元素必须拥有相同的 父元素 ,但h5不必紧随h3。

说明:这里的h5,h3也可以换成实际项目中的其他标签的类名、标签名或id等。

~(加号)加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素,且A和B必须拥有相同的父元素,所选到的仅为一个B元素标签。

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素,其中B元素是A元素的第一代。

.myDiv>h3选择类名名为myDiv里面的第一代h3。

是css3中特有的选择器,

A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。

A+B{} 这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,(兄弟的意思就是相邻,可以不是同一种元素)

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。}

再例如:

一个列表,li元素,只有前四个有底边框。最后一个没有。

ul li+li{ border-top:1px solid red}

// 第一个li 不加 后面的兄弟元素加就可以了。

A~B选择器 A之后出现的所有B。

两种元素必须拥有相同的父元素,但是 B不必直接紧随A。

1.A>B 表示选择A元素的所有子B元素(只选择第一代)

2.A B 表示选择A元素的所有子B元素(选择在A标签里面所有的B元素,不止第一代)

3.A+B 表示HTML中紧随A的B元素,而且二者有相同的父元素:用一个结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold}

上面这个选择器只会把列表中的第二个及后面的li都变为粗体,但第一个列表项不受影响。

4.A~B选择器 A之后出现的所有B。两种元素必须拥有相同的父元素,但是 B不必直接紧随A