© 1999-2048 dssz.net 粤ICP备11031372号
ppp
渡一教育 在这样的结构中,可以通过相邻选择器,选择p标签,d+p通过d找到 近邻dⅳ的兄弟标签P标签。但是di+ button就不能被选择,因为不是近邻 的兄弟元素。 代码示例 选择dv近邻的p标签 div+p i co⊥or:red; 4.兄弟选择器(E~F) 选择器,也称兄弟选择器,匹配出现在后面的少。注意这里的和这两 种元素必须具有相同的父元素,但不必紧跟在的后面 在下面的结构中:p1
p2 我们利用 可以选择与同级的所有元素,可以不连续,可以不挨着,但 是必须同级。 代码示例: 与同级的所有标签选中 dive i ed 5.并列选择器(E,F) 并列选择器,用于多个元素共享同一样式。利于样式代码的复用。和层级没 有关系,任意多个元素可以通过并列选择器进行选择。 代码示例: div, p i color: red 4 渡一教育 属性选择符 属性选择符根据元素的属性进行选择,元素的属性包括但不限于(id, class,data, hrefsrc,)等等,自定义属性也是可以的。权重值为0010。对于属性选择器加上 了部分正则的匹配,可以选择更多情况下的元素,接下来我们看看。 1.[att基本的属性选择器 [att选择器用于选取带有指定属性的元素。这里的attr,可以是我们知道 些属性, id class之类的,也可以是我们自定义的属性 代码小例 /*选择具有id属性的元素*/ [id]{ color: red; /*选择具有 class属性的元素* [class][ color: greeni /*选择具有sc属性的元素*/ src color blue 2.属性选择器的加强版 a.[attr= value]。属性选择器,选择元素具有attr属性并且值为 value。 代码示例: /*选择具有c1ass属性为 content的元素* [class="content"]t color: blue b.[attr~= value]。属性选择器。用于选择属性值包含一个指定单词的元 素。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的 多个值中的一个。 代码示例 /*选择具有 Class属性中有wrap的元素,注意不是包含 wrapper里 面就不可以, wrap host这样的类名结构是可以的*/ [class="wrap"]i color: blue c,[attr^= value]。选择器匹配元素属性值带指定的值开始的元素。类似 于正则中的规则,匹配属性attr的值以va1ue开始的元素。 代码示例: 渡一教育 /*选择具有href属性并且href属性以http开头的元素。*/ Threfa="http"]t color: red: d.[attr$= value]。选择器匹配元素属性值带指定的值结尾的元素。同样 类似于止则中的规则,匹配属性attr的值以 value结尾的元素。 代码示例: /*选择具有href属性并且,href属性以.com结尾的元素。*/ [hrefs=".com"]t color: red e.[attr*= value]选择器匹配元素属性值包含指定值的元素。匹配attr 属性中包含Va1ue的的元素。 /*选择具有href属性并且,href属性中存在 baidu的元素。*/ [href*="baidu"]t Co⊥or:red f.[ attr= value]选择器用于选择以指定值开头的属性值的元素。注意 该值是整个单词,空格逗号分开的不可以,中划线分开的可以算为整个 单词。 代码示例:令 /*选择具有c1ass属性并且 class属性中以my开头的元素。并且m 作为整个单词*/ [class ="my"][ color: red; < div class="my- content">淘宝div下面的第1个p元素
第一个p元素 CSS p: first-child i background-color: lime; 结果: body下面的第1个p元素 ody下面的第2个p元素 div下面的第1个p元素 第一个span元素 第一个p元素 上面例子中的最后下面的p是第一次出现,但是不是父级下面的第一个元 素 b. last-child ast-child选择器川来匹配父元素中最后一个子元素。与 first-child的方式 的一致,但是强调最后一个。 代码示例: 同样是上面的htm结构。我们把CSS改一下 last-child i background-color: lime; 结果: body下面的第1个p元素 body卜面的第2个p元素 div下面的第1个p元素 第一个Span元素 第一个p元素 这里强调的是:p元素作为父级元素的直接子元素,并且是最后个元素 才可以被选中。 c.: only-child only-child选择器匹配属于父元素中唯一子元素的元素。 渡一教育 p:0n| y-child表小父元素中有且只有一个元素,并且为p时选中。 代码示例 HTML
body下面的第1个p元素
div下面的第1个p元素
diⅴ下面的第3个p元素
div下面的第4个p元素
CSS: p: nth-child (2n-1)t background-color: lime, 渡一教育 结果: dy下面的第1个5pan元素1 d下面的第1个p元素2 dv下面的第2个p元素 div下面的第3个p元素4 di下面的第4个p元素5 我们的公式是2n-1和odd是一样的,意思是选择当前子元素中的奇数个 β元素,这里的奇数是在所有了元素中奇数,所以就出现了图上的选择情况 e.:nth-last-childo nth- ast-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。与上 面的nth- child用法一致,只不过nth- ast-child是倒数。同样n可以是具体 数字,可以是公式,也可以是一个关键字。 3. first-of-type, last-of-type, only-of-type, nth-of-type(), nth-last-of-type( 接下来的这五个伪元素选择器,和上面五个是对应的。但是,比上面那5个 更常用,更好用。所以同学们要掌握。这一类选择器,先看类型在看位置, 更容易去理解。兼容浏览器:IE9+、 Firefox、 Chrome、 Safari。 a. first-of-type first-of type选择器匹配元素其父级是特定类型的第一个子元素。概念感 觉差不多。其实差别是很大的。这一系列的选择器,多了一个type,这个 type就很能说明问题。这甲面强调的是,该类型的子元素的第一个,跟有 多少子元素无关,只要是这个类型并且第一次出现就可以被选中。 代码示例: CSS p: first-of-typef background-color: lime; 结果 d下面的第1个span元素 div下面的第1个p元素 dv下面的第2个p元素 dv下面的第3个p元素 d下面的第4个p元素