结构性伪类选择器

结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。

root选择器  将样式捆绑到页面的根元素中。所谓根元素是指位于文档结构中最顶层的元素。在HTML页面中,就是指包含整个页面的<html>部分

如可用以下片段将整个网页的背景设为黄色,将网页中的body元素背景设为红色。

   :root{background-color:yellow;}

body{background-color:red;}

not选择器  如果想对某个结构元素使用样式,但又想排除该结构元素下面的子结构元素,让它不使用该样式时,就可以使用not选择器了。

示例:

   body *: not(h2){

background-color:red;

}

empty选择器  用来指定当前元素内容为空白是使用的样式。

   :empty{background:yellow;}

target选择器   该选择器用来对页面中某个target元素(该元素的id被当作页面中的超链接来使用)指定样式,该样式只有在用户单击了页面中的超链接,并且跳转到target元素后起作用。

   :target{background:yellow;}

子元素伪类选择器是指能特殊针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素,甚至第偶数个、第奇数个子元素进行样式设置。此类的选择器包括first-child、last-child、nth-child以及nth-last-child4个。

如指定第一个子元素和最后一个子元素样式

   li:first-child{background-color:#ffb90f;}

li:last-child{background-color:#caff70;}

如果页面中具有多个ul列表,则该first-child选择器与last-child选择器对所有ul列表都适用。

另外一些例子:

//所有正数下第奇数个子元素

nth-child(odd){

...

}

nth-child(even){

...

}

//所有正数下倒数第奇数个子元素

nth-last-child(odd){

...

}

//所有正数下倒数第偶数个子元素

nth-last-child(even){

...

}

对同类型的第奇数个或者第偶数个子元素使用样式可使用nth-of-type和nth-last-child两个选择器。

时间: 2025-01-08 16:00:33

结构性伪类选择器的相关文章

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

H5与CS3权威下.19 选择器(2)结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: 1 <p>伪元素选择器 <br>类选择器</p> 1 p:first-line{background: pink;}

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

css3 巧用结构性伪类选择器

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: 1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

CSS3---结构性伪类选择器—nth-child(n)

结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1.-n+5)和关键词(odd.even),但参数n的起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素.如下表所

CSS3---结构性伪类选择器—last-child

结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素.例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 示例演示 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“post”中最后一个段落不需要底部的margin值,可以使用“:last-

CSS3---结构性伪类选择器—nth-last-child(n)

结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素. 案例演示 选择列表中倒数第五个列表项,将其背景设置为橙色. HTML代码: <ol> <li>item1</li> <li>item2</li> &l