属性选择器[attr^=val]，[attr$=val]，[attr*=val] 这三个属性选择器放在一起记
也很好记，很想我们正则表达式中用的开头匹配符^，结尾匹配符$，统配匹配符*
同时还要区别于CSS2中的[attr~=val] <p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p> 登入後複製 [class^=de]可以把三行都选中，因为它们的class属性都是以“de”开头的
[class$=o2]可以选中第二行，因为只有它的class属性是以“o2”结尾的
[class*=em]同样可以选中三行，因为它们class的都包含字符串“em”
[class~=de]不能选中任何行，因为它class中以空格分隔的属性值中没有“de”的属性值
说到这个属性选择器，我还要多说一点
我在表格中的示例是这么写的 a[src$=\.pdf]
是因为“.”它不认识，我们需要加“\”转义
不过css中属性选择器也可以写成引号的形式
比如说下面代码时等价的
a[src$=\.pdf]
a[src$=".pdf"]
a[src$='.pdf'] 子元素选择器下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的
表格中列出的很详细了
我主要谈谈type、child的区别，
以最简单的:first-child和:first-of-type为例 <p>0</p><p>1</p><p>2</p><p>3</p> 登入後複製 p:first-child{ background-color: red;}登入後複製 
使用first-child我们发现页面没有变化
这是因为p并不是body元素的第一个子元素
p:first-of-type{/*改*/
background-color: red;}登入後複製 
改为first-of-type我们发现第一个p变红了
这是因为它是body元素的子元素中所有p的第一个
其他的也是一样的道理，举一反三 根元素选择器:root这个选择器没什么意思，和你直接使用html一样 :root {...}
html {...}登入後複製 空元素选择器:empty就是选择真正的空元素，内部没有任何子元素，文本节点也不能有
举个例子 <p></p><p>1</p><p>2</p><p>3</p> 登入後複製 p:empty::before { content: "12345"; background-color: gold;}登入後複製 
目标元素选择器这个:target选择器还有点意思
写一个例子 <a href="#first">1st</a><br><a href="#second">2nd</a><br><a href="#third">3rd</a><br><a href="#fourth">4th</a><br><a href="#fifth">5th</a><br><br><br><br><br><br><p id="first">1</p><p id="second">2</p><p id="third">3</p><p id="fourth">4</p><p id="fifth">5</p> 登入後複製 body { height: 2000px;}p { width: 200px; height: 200px; font: 200px/200px bold;}登入後複製 
这是一个小demo可以利用锚点在页面中进行跳转
点击链接可以跳转到对应id的元素，并且url链接也发生了改变
此时就会触发:target的样式
我们来试一试，加几行代码 p:target { background-color: deeppink;}登入後複製 再点击链接
 我们发现，跳转的同时，p样式改变了 高亮文本选择器::selection是CSS3新增的选择器
它用来匹配突出显示的文本（用鼠标选择文本）
浏览器有默认的样式（背景为蓝色，字体为） <p>this is a long long text...</p> 登入後複製 p::selection{ color: white; background-color: dodgerblue;}登入後複製 浏览器默认的样式就是相当于这样，我们可以自己修改 否定选择器:not()这个选择器可以排除某些特定条件的元素
比如说我们可以这样用 <p class="demo">1</p><p>2</p><p>3</p> 登入後複製 p:not(.demo) { background-color: aqua;}登入後複製 
这样类属性中有demo的元素就不会变色
CSS小图表剩下的选择器大部分都是针对input输入标签的
不详细讲了
我们做一个小练习，仅仅用CSS3的选择器做一个点击按钮切换图片的小图表
通过点击单选框显示不同的图片
像这样
 首先我们需要编写html代码
使用三个radio和三个img元素 <input type="radio" name="demo" id="a" checked><img src="a.jpg" ><input type="radio" name="demo" id="b"><img src="b.jpg"><input type="radio" name="demo" id="c"><img src="c.jpg"> 登入後複製 然后css部分通过:checked配合条件选择器控制img元素的显示 input { margin-left: 35px;}img { display: none;}:checked+img { position: absolute; left: 10px; top: 40px; display: inline-block;}登入後複製 这样我们就完成了我们的小图表功能
整理了一晚上的选择器，可能会有遗漏的
如果想起来，日后再补吧 以上是關於CSS3選擇器的詳細介紹及用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
| 
