CSS3中新增的选择器

最新推荐文章于 2024-10-02 23:10:13 发布
最新推荐文章于 2024-10-02 23:10:13 发布
阅读量1.3k 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z983002710/article/details/76342031
版权

一、CSS3中新增的属性选择器：

1、在CSS3中追加了三个属性选择器([att*=val]、[att^=val]、[att$=val])：

（1）[att*=val]属性选择器：如果元素用att表示的属性的值中包括用val指定的字符，那么该元素使用这个样式；

（2）[att^=val]属性选择器：如果元素用att表示的属性的值的开头字符为用val指定的字符的话，那么该元素使用这个值；

（3）[att$=val]属性选择器：如果元素用att表示的属性的值的结尾字符为用val指定的字符的话，那么该元素使用这个样式。

2、属性选择器的应用：

（1）HTML代码：

<div id="box">
	<div id="section1"></div>
	<div id="section1-1c"></div>
	<div id="section1-1-1"></div>
	<div id="section1-1-2d"></div>
	<div id="section1-2"></div>
	<div id="section1-2-1"></div>
	<div id="section2d"></div>
	<div id="bsectionc"></div>
	<div id="section2-1"></div>
	<div id="section2_1"></div>
	<div id="section2-2d"></div>
</div>

（2）CSS样式：

1）所有id包含了section的div均被选中的CSS样式：

[id*=section]{
	background: lightblue;
}
效果图如下：

2）所有id包含了section1的div均被选中的CSS样式：

[id*=section1]{
	background: lightblue;
}
效果图如下：


3）所有id包含了section1-1的div均被选中的CSS样式：

[id*=section1-1]{
	background: lightblue;
}
效果图如下：



4）所有id包含了section1-2的div均被选中的CSS样式：

[id*=section1-2]{
	background: lightblue;
}
效果图如下：



5）所有id包含了section2的div均被选中的CSS样式：

[id*=section2]{
	background: lightblue;
}
效果图如下：



6）所有id以section开头的div均被选中的CSS样式：

[id^=section]{
	background: lightblue;
}
效果图如下：



7）所有id以s开头的div均被选中的CSS样式：

[id^=s]{
	background: lightblue;
}
效果图如下：



8）所有id以b开头的div均被选中的CSS样式：

[id^=b]{
	background: lightblue;
}
效果图如下：



9）所有id以d结尾的div均被选中的CSS样式：

[id$=d]{
	background: lightblue;
}
效果图如下：



10）所有id以c结尾的div均被选中的CSS样式：

[id$=c]{
	background: lightblue;
}
效果图如下：



11）所有id以-1结尾的div均被选中的CSS样式：

[id$=\-1]{/*结束符为数字的时候需要添加"\"并加上数字之前的一个字符*/
	background: lightblue;
}
效果图如下：



12）所有id以_1结尾的div均被选中的CSS样式：

[id$=\_1]{
	background: lightblue;
}
效果图如下：




二、CSS3中的结构性伪类选择器：

1、类选择器：在CSS中可以使用类选择器把相同的元素定义成不同的样式；比如：p.left{text-align:left;}p.right{text-align:right;}

2、伪类选择器：类选择器和伪类选择器的区别在于类选择器我们可以随意取名字，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。最常见的伪类选择器：

（1）a:link{color:#ff6600;}未被访问的链接；

（2）a:visited{color:#87b291;}已被访问的链接；

（3）a:hover{color:#6535b2;}鼠标指针移动到链接上；

（4）a:active{color:#55b28e;}正在被点击的链接；

3、伪元素选择器：针对于CSS中已经定义好的伪元素使用的选择器；
（1）使用方法：选择器：伪元素{属性：值}
（2）与类配合使用：选择器.类名：伪元素{属性：值}

4、在CSS中，主要有四个伪元素选择器：

（1）first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；

1）HTML代码：

<p>
	CSS中的伪元素选择器<br />
	first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；
</p>

2）CSS代码： 

p:first-line{
	color: #20B2AA;
}

3）效果图如下：


（2）first-letter伪元素选择器：用于向某个元素中的文字的首字母(欧美文字)或者第一个字(中文或者是日文等汉字)使用样式；

1）HTML代码：

<p>
	CSS中的伪元素选择器<br />
	first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；
</p>

2）CSS代码： 

p:first-letter{
	color: cornflowerblue;
	font-size: 38px;
}

3）效果图如下：


（3）before伪元素选择器：用于在某个元素之前插入内容；

（4）after伪元素选择器：用于在某个元素之后插入内容；

注：before伪元素和after伪元素的具体使用方法见：http://blog.csdn.net/z983002710/article/details/76349363

5、结构性伪类选择器root、not、empty和target：

（1）root选择器：将样式绑定到页面的根元素中；

1）HTML代码：

<p>
	CSS中的伪元素选择器<br />
	first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；
</p>

2）CSS代码：

:root{
	background: lightblue;
}
body{
	background: lightcoral;
}

3）效果图如下：

（2）not选择器：想对某个结构元素使用样式，但是想排出这个结构元素下面的子结构元素，让它不使用这个样式时，我们可以用not选择器；

1）HTML代码：

<p class="p1">CSS中的伪元素选择器</p>
<p class="p2">CSS中的伪元素选择器</p>
<p class="p3">CSS中的伪元素选择器</p>
<p class="p4">CSS中的伪元素选择器</p>
<p class="p5">CSS中的伪元素选择器</p>
2）CSS代码： 

p:not(.p1){
	background: lightblue;
	color: red;
}
3）效果图如下：



（3）empty选择器：指定当前元素中内容为空白时使用的样式；

1）HTML代码：

<table border="1" cellspacing="0" cellpadding="0">
	<tr>
		<td>Header1</td>
		<td></td>
		<td>Header3</td>
		<td>Header4</td>
	</tr>
	<tr>
		<td>Data1</td>
		<td>Data2</td>
		<td></td>
		<td>Data4</td>
	</tr>
</table>

2）CSS代码：

:empty{
	
	background: lightcoral;
}

3）效果图如下：


（4）target选择器：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接并且跳转到target元素后起作用；

1）HTML代码：

<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
	<h2>标题</h2>
	<p>内容。。。。</p>
</div>
<div id="B">
	<h2>标题</h2>
	<p>内容。。。。</p>
</div>
<div id="C">
	<h2>标题</h2>
	<p>内容。。。。</p>
</div>
<div id="D">
	<h2>标题</h2>
	<p>内容。。。。</p>
</div>

2）CSS代码：

:target{
	background: #20B2AA;
}

3）效果图如下（点击id为B后的效果图）：


6、选择器nth-child：

注：:nth-child的具体使用见：http://blog.csdn.net/z983002710/article/details/74011706

7、选择器nth-of-type和nth-last-of-type：

（1）使用nth-of-type和nth-last-of-type在CSS3中统计的时候只针对同类型的子元素进行计算：nth-of-type正数而nth-last-of-type倒数；

1）HTML代码：

<div>
	<h2>标题</h2>
	<p>内容</p>
	<h2>标题</h2>
	<p>内容</p>
	<h2>标题</h2>
	<p>内容</p>
	<h2>标题</h2>
	<p>内容</p>
	<h2>标题</h2>
	<p>内容</p>
</div>

2）CSS代码：

h2:nth-of-type(odd){
	background: lightblue;
}
h2:nth-of-type(even){
	background: lightcoral;
}
p:nth-last-of-type(odd){
	color: darkcyan;
}
p:nth-last-of-type(even){
	color: magenta;
}

3）效果图如下：


（2）兼容性：nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持、chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持；

8、循环使用样式：nth-child(An+B)，其中A表示每次循环中包括几种样式，B表示指定的样式在循环中所处的位置；

（1）HTML代码：

<ul>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
	<li>循环使用样式</li>
</ul>

（2）CSS代码：

li:nth-child(5n+1){
	background: lightblue;
}
li:nth-child(5n+2){
	background: lightcoral;
}
li:nth-child(5n+3){
	background: lightcyan;
}
li:nth-child(5n+4){
	background: lightpink;
}
li:nth-child(5n+5){
	background: lightsalmon;
}

（3）效果图如下：


9、only-child选择器：只对唯一的子元素起作用；

（1）HTML代码：

<div class="post">
	<p>only-child选择器</p>
        <p>only-child选择器</p>
</div>
<div class="post">
	<p>only-child选择器</p>
</div>

（2）CSS代码：

.post p{
  background: lightblue;
  color: #fff;
}
.post p:only-child {
  background: lightcoral;
}

（3）效果图展示：



三、UI元素状态伪类选择器：

1、UI选择器的特征就是指定的样式只有当元素处于某种状态下的时候，才会起作用，在默认状态下是不起作用的。常见的UI元素选择器浏览器的兼容性如下：

UI元素状态伪类选择器支持的浏览器不支持的浏览器
E:hoverFirefox、Safari、Opera、IE8、chrome 
E:activeFirefox、Safari、Opera、chromeIE8
E:focusFirefox、Safari、Opera、IE8、chrome 
E:enabledFirefox、Safari、Opera、chromeIE8
E:disabledFirefox、Safari、Opera、chromeIE8
E:read-onlyFirefox、OperaIE8、Safari、chrome
E:read-writeFirefox、OperaIE8、Safari、chrome
E:checkedFirefox、Safari、Opera、chromeIE8
E::selectionFirefox、Safari、Opera、chromeIE8
E:defaultFirefoxSafari、Opera、IE8、chrome
E:indeterminatechromeFirefox、Safari、Opera、IE8
E:invalidFirefox、Safari、Opera、chromeIE8
E:vaildFirefox、Safari、Opera、chromeIE8
E:requiredFirefox、Safari、Opera、chromeIE8
E:optionalFirefox、Safari、Opera、chromeIE8
E:in-rangeFirefox、Safari、Opera、chromeIE8
E:out-of-rangFirefox、Safari、Opera、chromeIE8

2、选择器E:hover、E:active和E:focus：

（1）E:hover选择器被用来指定当鼠标指针移动到元素上时所使用的样式。使用方法：<元素>:hover{CSS样式}，我们可以在"<元素>"中添加元素的type属性。如：input[type="text"]:hover{CSS样式}

（2）E:active选择器被用来指定元素被激活时使用的样式；

（3）E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用；

（4）小案例：当鼠标移动上去时文本框变成绿色，当鼠标点击时文本框处于蓝色，当处于可输入状态时文本框变成橙色；

1）HTML代码：

<form>
	姓名：<input type="text" id="" value="" placeholder="请输入名字" /><br /><br />
	密码：<input type="password" name="" placeholder="请输入密码" />
</form>

2）CSS代码：

input[type="text"]:hover{
	background: green;
}
input[type="text"]:focus{
	background: orange;
	color: white;
}
input[type="text"]:active{
	background: blue;
}

3）效果图如下：

①hover的效果图：


②focus的效果图：


③active效果图：


3、E:enabled伪类选择器与E:disabled伪类选择器：

（1）E:enabled选择器被用来指定当元素处于可用状态时的样式；

（2）E:disabled选择器被用来指定当元素处于不可用状态时的样式；

（3）小案例：文本框可用时背景颜色绿色，不可用时背景颜色浅灰色；

1）HTML代码：

<form>
	姓名：<input type="text" id="" value="" placeholder="请输入名字" disabled="disabled" /><br /><br />
	工号：<input type="text" id="" value="" placeholder="请输入工号" />
</form>

2）CSS代码：

input[type="text"]:enabled{
	background: green;
}
input[type="text"]:disabled{
	background: #999999;
}

3）效果图如下：


4、E:read-only伪类选择器与E:read-write伪类选择器：

（1）E:read-only选择器被用来指定当元素处于只读状态时的样式；

（2）E:read-write选择器被用来指定当元素处于非只读状态时的样式；

（3）小案例：文本框可用时输入文字变成红色，不可用时，设置里面的背景为黑色，文字为绿色；

1）HTML代码：

<form>
	姓名：<input type="text" id="" value="Sunny" placeholder="请输入名字" readonly="readonly" /><br /><br />
	工号：<input type="text" id="" value="" placeholder="请输入工号" />
</form>

2）CSS代码：

input[type="text"]:read-only{
	background: black;
	color: green;
}
input[type="text"]:read-write{
	color: red;
}

3）效果图如下：


5、伪类选择器E:checked、E:default和E:indeterminate：

（1）E:checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式；

（2）E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式；

（3）E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式；

（4）小案例：模拟一个选框控件，当选择以后，会给他一个2px 实线 绿色的边框；

1）HTML代码：

<form>房屋状况：
	<input type="checkbox" id="" value="" />自来水
	<input type="checkbox" id="" value="" />电
	<input type="checkbox" id="" value="" />气
	<input type="checkbox" id="" value="" />光纤
</form>

2）CSS代码：

input[type="checkbox"]:checked{
	outline: 12px solid green;
}

3）效果图如下：


6、伪类选择器E::selection：

（1）E::selection伪类选择器用来指定当元素处于选中状态时的样式；

（2）小案例：选择网页中p段落中的文字和文本框中的文字，改变他的背景颜色为绿色；

1）HTML代码：

<p>好好学习，天天向上。</p>
<form>
	姓名：<input type="text" id="" value="" placeholder="请输入名字" />
</form>

2）CSS代码：

p::selection{
	background: green;
}
input[type="text"]::selection{
	background: green;
}

3）效果图如下：



7、E:invalid伪类选择器与E:valid伪类选择器：

（1）E:invalid伪类选择器用来指定当元素内容不能通过HTML5通过使用的元素的诸如required等属性所指定的检查或者元素内容不符合元素规定的格式时的样式；

（2）E:valid伪类选择器用来指定当元素内容能通过HTML5通过使用的元素的诸如required等属性所指定的检查或者元素内容符合元素规定的格式时的样式；

（3）小案例：通过Email属性的表单判断输入是否正确，正确输入的内容为绿色，输入错误就是红色；

1）HTML代码：

<form>
	邮箱：<input type="email" id="" value="" placeholder="请输入邮箱" /><br /><br />
	邮箱：<input type="email" id="" value="" placeholder="请输入邮箱" />
</form>

2）CSS代码：

input[type="email"]:valid{
	color: green;
}
input[type="email"]:invalid{
	color: red;
}

3）效果图如下：


8、E:required伪类选择器与E:optional伪类选择器：

（1）E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式；

（2）E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式；

（3）小案例：姓名必填单背景红色、年龄可选填表单背景为绿色；

1）HTML代码：

<form>
	姓名：<input type="text" id="" value="" placeholder="请输入名字" required="required" /><br /><br />
	工号：<input type="text" id="" value="" placeholder="请输入工号" />
</form>

2）CSS代码：

input[type="text"]:required{
	background: red;
}
input[type="text"]:optional{
	background: green;
}

3）效果图如下：


9、E:in-range伪类选择器与E:out-of-range伪类选择器：

（1）E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式；

（2）E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式；

（3）小案例：0-100以内的数字，小于0或者超过100字体变成红色，否则为绿色；

1）HTML代码：

<form>
	输入100以内的数字：<input type="number" id="" value="" min="0" max="100" /><br /><br />
	输入0-100以外的数字：<input type="number" id="" value=""  min="0" max="100" />
</form>

2）CSS代码：

input[type="number"]:in-range{
	color: green;
}
input[type="number"]:out-of-range{
	color: red;
}

3）效果图如下：


Z_ikCoffee
关注
css3的新增的选择器
ovocc的博客
10-21 1561
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
css3新增选择器（:target选择器、 :disabled选择器、:enabled选择器）
m0_71814235的博客
07-19 456
css3新增选择器（:target选择器、 :disabled选择器、:enabled选择器
CSS3 新增选择器
JJ_Smilewang的博客
03-31 1548
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。 1. 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。 1.1 E:first-child E:first-child 这个选择器用于匹配父元素中的第一个子元素E /* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色， 但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
CSS3选择器（18个案例+代码实现+效果图）
最新发布
2301_76862031的博客
10-02 1040
css中的选择器 案例：使前缀为my的class的样式变为圆形;案例：使后缀为my的class的样式变为圆形； 案例：使包含my的class的样式变为圆形；案例：使div下的p标签的字体颜色变为红色； 案例：使div下的后面的兄弟变为圆形；案例：使用指定选择器后面的兄弟元素变为圆形； 案例：选择器不是myClassStyle的标签变为圆形；案例：使only-child把类选择器为noChild并且没有兄弟元素为noChild的类变为圆形；案例：奇数div为方形，偶数div为圆形； 等18个案例
css3新增选择器
water_Popcorn的博客
11-09 498
1.        属性选择器： 1)        E[att]  元素[属性]：选择具有att属性的E元素，需要选择有某个属性的元素，  而不论是行为是什么，可以使用简单的属性选择器 注：可以根据多个属性进行选择，只需要将属性选择器连接即可。 2)        E[att=val] 元素[属性=属性值]: 选择具有att属性且属性值为val的E元素，进一步缩小范围 3)       
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
CSS3新增选择器
qq_53280201的博客
02-14 769
CSS3给我们新增的选择器，可以更加便捷，更加自由的选择目标元素 1. 关系选择器 ~ //兄弟选择器：选择该元素后面的同级的兄弟元素 例如： h1~p:选择h1元素后面的所有同级p元素。 p~p:选择p元素后面的所有同级p元素，除了第一个p元素 2. 属性选择器 选择器 简介 E[att] 选择具有att属性的E元素 E[att="val''] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头
第二讲 CSS3新增选择器
Fiki515的博客
03-15 923
选择器总结如下： 一、通配符选择器（＊） 概念：* 通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素 *{margin：0； padding：0；} .demo *{border:1px solid #000;} 二、元素选择器(E) 概念：元素选择器其实就是文档的元素，如html,body,p,div等等 li{border:1px solid #000;} 三、类选择器（.className） 1、使用类选择器之前需要在html元素上定义类名 &.
CSS CSS3 新增选择器
快乐de馒头
01-20 217
CSS3 新增选择器 1、结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子...
css3新增的选择器
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素的特定状态或位置，例如`:hover`、`:active`、`:nth-child(n)`等。 3. 伪元素选择器：用于在元素的特定位置插入内容，例如`::before`、`::after`。 4. 相邻兄弟选择器：选择紧接在指定元素后面的相邻兄弟元素，例如`+`符号。 5. 子元素选择器：选择指定元素的直接子元素，例如`>`符号。 6. 通用选择器：选择任意类型的元素，例如`*`符号。 这只是一部分CSS3新增的选择器，还有其他一些选择器可以用于更精确地选择和操作元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值