CSS3---选择器

1.结构性伪类选择器---：root：从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

2.“:root”选择器等同于<html>元素，简单点说：:root{background:orange}与 html {background:orange;} 得到的效果等同。建议使用:root方法。

　　另外在IE９以下还可以借助“:root”实现hack功能

特别注意细节问题：当body{background：；}使用背景颜色，：root{}也使用背景颜色时，body里改变的只能是body里面内容颜色，剩下的都是root里定义的颜色。如果：root里没有指定背景颜色，则整体背景颜色为body定义的颜色。

3.:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。p:empty {display: none;}

4.:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

5.:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

　　1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称。

　　2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）。

　　3、多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。

　　4、

　　#brand:target { background: orange; color: #fff; }

　　#jake:target { background: blue; color: #fff; }

　　#aron:target { background: red; color: #fff; }

　　上面的代码可以对不同的target对象分别设置不的样式。

6.“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

7.“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

8.“: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的时候，不选择任何匹配的元素。

9.“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

10.“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

11.“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

12.“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

13.“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

14.“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

15.::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用场景最多的就是清除浮动。不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素，一般可以做以下四件事情：

功能	功能说明
none	不生成任何内容
attr	插入标签属性值
url	使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string	插入字符串

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,.clearfix:after {content:””;display:table;}.clearfix:after {clear:both;overflow:hidden;}

插入元素属性值的方法：

假设我们有一个元素：

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {content:attr(title);color:#f00;}“：first-line” 选择器匹配文本块的首行。“：first-letter” 选择器选择文本块的首字母在CSS3中除了结构性伪类选择器外，还有一种UI元素状态伪类选择器，这些选择器在共同特点是：指定的样式只有当前元素处于某种状态下时才起作用，在默认状态下不起作用。在CSS3中，共有17种UI元素状态伪类选择器，分别是：E:hover E:active E:focus E:enabled E:disabled E:read-write E:read-only E:checked E:defaultE:indeterminate E:selection E:invalid E：valid E:required E:optional E:in-range

16.在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。

17.在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

18.“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

19.“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

20.“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><link href="index08.css" rel="stylesheet" type="text/css">
</head>
<body><p>这是第一行内容<br/>这是第二行内容，哈哈哈哈哈哈</p><hr/><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><hr/>
<h2>hello world!你好中国！
</h2><hr/><table border="1px"><tr><th>表格1</th><th>表格2</th><th>表格3</th></tr><tr><td>内容1</td><td>内容2</td><td></td></tr><tr><td></td><td>内容2</td><td>内容3</td></tr><tr><td>内容1</td><td></td><td></td></tr></table><hr/><a href="#a1">菜单1</a><a href="#a2">菜单2</a><a href="#a3">菜单3</a><a href="#a4">菜单4</a><div id="a1"><h3>菜单内容1</h3></div><div id="a2"><h3>菜单内容2</h3></div><div id="a3"><h3>菜单内容3</h3></div><div id="a4"><h3>菜单内容4</h3></div>
<hr/><div class="type1"><h3>标题1</h3><a>链接1</a><br/><a>链接2</a><h3>标题2</h3><h3>标题3</h3><a>链接3</a><h3>标题4</h3><a>链接4</a><h3>标题5</h3><a>链接5</a><h3>标题6</h3><a>链接6</a></div><hr/><input class="Text" type="text"name="name"><input class="Text" type="text"name="age"><input type="checkbox">金毛<input type="checkbox">萨摩耶<input type="checkbox">大狗狗<hr/><script>function radio_change() {var radio1=document.getElementById("radio1");var radio2=document.getElementById("radio2");var text=document.getElementById("text1");if(radio1.checked){text.disabled="";}else{text.value="";text.disabled="disabled"}}</script><div class="div"><input type="radio" id="radio1" name="radio" onchange="radio_change()">可用<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用<input type="text" id="text1" disabled></div></body>
</html>

:root{background-color:lightpink;
}
body{margin: 30px;counter-reset: paracount;/*默认初始值为1，也可指定其他值*/background-color: darkseagreen;
}
p:first-line{color: cornflowerblue;
}
p:first-letter{font-size: 30px;color: #ff6471;
}
li:before{counter-increment: paracount;/*默认增值为1，也可指定其他值*/content:counter(paracount)".";/*content: "-----";*/
}
li:after{content: "*******";font-size: 10px;color: darkgray;
}
li:first-child{width: 150px;background-color: red;
}
li:last-child{width: 150px;background-color:darkviolet;/*紫色*/
}
li:nth-child(3){width: 150px;background-color:yellow;
}
li:nth-last-child(2){width: 150px;background-color:lightblue;
}
/*li:nth-last-child(odd){!*      倒着数为奇数行改变颜色   odd为奇数  even为偶数 *!*//*width: 150px;*//*background-color:lightblue;*/
/*}*/
body *:not(h2){font-style: italic;
}
:empty{/*内容为空白的时候运用这个样式      这里的例子是：表格内容为空的时候背景颜色变为黄色*/background-color: red;
}
table{border-collapse: collapse;
}
:target{background-color: #37b9ff;width: 200px;
}
.type1 h3:nth-of-type(odd){  /*只计算同类标签*/width: 200px;color: yellow;
}
.type1 a:nth-last-child(odd){/*计算是把h3和a标签一起进行计算的，也就是说所有子元素一起来计算   所以要想只计算同一类型的的样式需要使用 nth-of-type()*/width: 150px;color:lightblue ;
}
/*注意顺序不能颠倒*/
.Text:hover{background-color: cornflowerblue;
}
.Text:focus{background-color: brown;
}
.Text:active{background-color: yellow;
}
input[type="checkbox"]:checked{outline:2px  solid gold;background-color: blue;
}
.div input[type="text"]:enabled{background-color: yellow;
}
.div input[type="text"]:disabled{background-color: darkgray;
}

转载于:https://www.cnblogs.com/yuxingyoucan/p/5375376.html

CSS3---选择器相关推荐

CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
CSS3 选择器(转)
http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器在 CSS 中,选择器 ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框 CSS3 边框通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式一.总结一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
html选择器是什么,CSS3选择器是什么？
首先我们来看一下displaynone的意思是什么? display:none的意思: 隐藏元素并脱离文档,流就是隐藏该区域,不占实际空间,但对后台来说真实存在,可以获取被隐藏的元素简单的来说就是将元 ...
CSS3 选择器基本选择器介绍
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
css3 选择器_10-CSS3选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. CSS3的现状浏览器支持程度不够好,有些需要添加私有前缀移动端支持优于PC端不 ...

CSS3---选择器

CSS3---选择器相关推荐

最新文章

热门文章