这篇文章将为大家详细讲解有关css中有哪些派生选择器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css中的派生选择器有3种:1、后代选择器,语法“E F{样式代码}”;2、子元素选择器,语法“E > F {样式代码}”;3、相邻兄弟选择器,语法“E + F {样式代码}”。本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。选择器(selector)是CSS里面非常重要地一部分知识。根据我暂时浅薄地理解,CSS就是对一份HTML代码里面的元素进行运用各种样式。所以,第一步就是要准确地定位你想要运用样式的元素。CSS里免费云主机、域名面通过各种选择器来定位元素。 CSS里面选择器有很多种,今天就只想说说 “派生选择器”。一听“派生选择器”这个名字,我真心做不到见名知义地感觉它是什么选择器。一看英文名叫“contextual selectors” ,如果直译就叫“上下文选择器”。虽然名字不文雅,但是我更偏向这个名字。contexual selector是通过依据元素在其位置的上下文关系来定义样式的。上下文选择器的情况有三种:后代选择器,子元素选择器,相邻兄弟选择器。后代选择器(descendant selector)eg:HTML代码:CSS代码:
语法规则是 h2 和 em 之间有一个空格。那么这一条CSS代码就会运用于包含在eg:HTML代码:
CSS代码:
以上css的样式会运用于HTML代码中两处橘色的元素。子选择器(child selector) 子选择器只会选择某个元素的子元素,而不会扩大到任意的后代元素。eg:HTML代码:
CSS代码:
语法规则是h2和strong之间会有一个“>”符号。而这个“>”和前面的h2或者是后面的strong之间的空格都是可有可无的。在以上的例子中,第一行HTML代码里,元素是
的子元素,所有h2 > strong这个选择器会选择到它。
第二行HTML代码里, 不是
的子元素,而是
的孙子,所有h2 > strong这个选择器不会选择到它。
相邻兄弟选择器(Adjacent sibling selector)
相邻兄弟选择器会选择某一元素紧随其后的元素,但是前提是他们拥有相同的父级。eg:HTML代码:CSS代码:
语法规则是h3和strong之间有一个“+”,“+”和前面的h2或者后面的strong之间的空格都是可有可无的。在 以上例子中,第一个strong紧邻着h3并且他们拥有相同的父级(h2),所以h3 + strong会选择到第一个而不会选到第二个.eg2:HTML代码:
CSS代码:
在以上的例子中li+li是选择紧挨着li后面的第一个关于“css中有哪些派生选择器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
今天小编给大家分享一下如何定义一个html表格的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家免费云主机、域名参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 html5中支持用表格;可以利用t…