CSS3中新增的选择器

最新推荐文章于 2023-05-16 20:37:08 发布
最新推荐文章于 2023-05-16 20:37:08 发布
阅读量1.2k 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3的新增的选择器
ovocc的博客
10-21 1511
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
第二讲 CSS3新增选择器
Fiki515的博客
03-15 886
选择器总结如下： 一、通配符选择器（＊） 概念：* 通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素 *{margin：0； padding：0；} .demo *{border:1px solid #000;} 二、元素选择器(E) 概念：元素选择器其实就是文档的元素，如html,body,p,div等等 li{border:1px solid #000;} 三、类选择器（.className） 1、使用类选择器之前需要在html元素上定义类名 &.
30.前端笔记-CSS-CSS3新增选择器
虽然但是
12-12 376
属性选择器，结构伪类选择器，伪元素选择器
CSS3基础入门 ----- 新增选择器
weixin_65489884的博客
03-11 538
css3新增的选择器
知识分享——CSS3的新增选择器
DS153的博客
08-20 512
目录 前言 一、属性选择器 二、结构伪类选择器 三、伪元素选择器 总结 前言 我们所学习的HTML和CSS最总对齐HTML5和CSS3的版本，它们拥有着新的特性和新的属性，这些内容帮助我们完成了更多有趣的内容，更加精美的设计。这些新增加的特性通常都带有一定的兼容性问题，不过在科学技术日益增加的情况下，已经解决了大部分的兼容性问题。接下来就让我们一起来学习一下CSS3中新增的选择器都有什么，它们都能做什么。这里只介绍一些常用的选择器，剩下的可以大家自己去研究...
CSS3 新增选择器
JJ_Smilewang的博客
03-31 1451
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。 1. 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。 1.1 E:first-child E:first-child 这个选择器用于匹配父元素中的第一个子元素E /* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色， 但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4470
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
css3高级选择器使用方法
09-25
CSS3高级选择器是CSS3新增的一系列功能强大的选择器，极大地增强了CSS的样式匹配能力，使得开发者能够更精准地定位和控制网页元素的样式。本文将深入探讨CSS3的属性选择器、结构性伪类选择器以及伪元素选择器。 ...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
盘点CSS Selectors Level4中新增的选择器
09-22
CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。需要的朋友们下面随着小编来一起学习学习吧
前端知识学习-----CSS3新增选择器
kf_qyl的博客
01-08 5267
CSS常见的选择器有： 通配符选择器, 元素选择器，类选择器， ID选择器，后代选择器 CSS3新增基本选择器有： 子元素选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器 基本选择器—-子元素选择器 概念：子元素选择器只能选择某元素的子元素 语法格式： 父元素 > 子元素 (father > children ) 兼容性： IE8+，FireFox，Chrome，Saf
CSS3新增选择器
ddd2501的博客
11-08 509
CSS3新增选择器，你应该好好掌握
（20）css3新增选择器
Java田根旺
12-13 714
CSS3中，相对于CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式. 1.子级选择器 子级选择器用于选取带有特定父元素的元素。 书写语法：element1 > element2 注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。 > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。 2.兄弟选择器 ...
CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）
hello ice cream
05-03 462
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。 比如需要选择出input标签中具有value属性的内容，就可以按以下方式 // css input[value]{ color: #333; } // html <input type="text" value...
【CSS3】新增选择器、盒子模型、其他特性、过渡
weixin_45895411的博客
05-16 254
介绍CSS3新增的属性选择器、结构伪类选择器、伪元素选择器、盒子模型、其他特性、过渡。
css3新增的选择器
最新发布
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值