CSS3选择器介绍及用法总结[通俗易懂]

CSS3选择器介绍及用法总结[通俗易懂]CSS3新增了很多强大的选择器它可以让我们少写一些js事件脚本我们先来看看各个版本的选择器有哪些注:ele代表element元素attr代表attribute属性,val代表value属性值:xxx都属于伪类选择器,::xxx都属于伪元素选择器有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明.class类选择器.demo

大家好,又见面了,我是你们的朋友全栈君。

tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و

CSS3新增了很多强大的选择器
它可以让我们少写一些js事件脚本
我们先来看看各个版本的选择器有哪些
注:
ele代表element元素
attr代表attribute属性,val代表value属性值
:xxx都属于伪类选择器,::xxx都属于伪元素选择器
有名字的选择器我尽量细分了
#CCS1选择器#

选择器 类型 示例 说明
.class 类选择器 .demo 选择所有class包含demo的元素
#id ID选择器 #unique 选择所有id是unique的元素
ele 元素选择器 div 选择所有div元素
ele,ele 并列选择器 h1,h2 选择所有h1元素和h2元素
ele ele 后代选择器 div p 选择div元素内的所有p元素
:link 伪类选择器 a:link 选择未访问链接
:visited 伪类选择器 a:visited 选择访问过链接
:active 伪类选择器 a:active 选择活动链接
:hover 伪类选择器 a:hover 选择鼠标悬浮链接
::first-letter 首字母选择器 p:first-letter 选择每一个p元素的第一个字母
::first-line 首行选择器 p:first-line 选择每一个p元素的第一行

CSS1版本有我们最常使用的经典选择器
::first-letter和::first-line好像很少用
CSS2中,他俩只能应用在段落之类的块级元素,超链接等行内元素就不能用了
CSS2.1中,:first-letter可以应用所有元素
但是他们可以使用的属性还是有限制的
这里就不列出来了,毕竟不常用


链接的伪类选择器(锚伪类)我们通常这样用

a:link { 
   color: blue;}             /*静态伪类:未访问链接时蓝色*/
a:visited { 
   color: purple;}        /*静态伪类:访问过的链接变为紫色*/
a:hover { 
   color: red;}             /*动态伪类:鼠标悬浮在链接上变为红色*/
a:active { 
   color: orange;}		  /*动态伪类:鼠标按下链接时变为橘黄色*/

link-visited-hover-active(LVHA) 是推荐的顺序,不会覆盖产生冲突
也很好记“绿化LVHuA”

#CSS2选择器#

选择器 类型 示例 说明
* 通配选择器 * 选择所有元素
ele>ele 直接子元素选择器 div>p 选择父级是div元素的p元素
ele+ele 相邻兄弟元素选择器 div+p 选择紧挨着div元素之后的一个p元素
[attr] 属性选择器 [target] 选择带有target属性的元素
[attr=val] 属性选择器 [target=_blank] 选择有target属性并且属性值是_blank的元素
[attr~=val] 属性选择器 [title~=demo] 选择有title属性并且包含单词”demo”的元素
[attr|=language] 属性选择器 [lang|=en] 选择lang属性的起始值为EN的元素
:focus 焦点选择器 input:focus 选择具有焦点的input元素
:first-child 首子级选择器 p:first-child 选择p元素是其父级的第一个子级的元素
::before 伪元素选择器 p::before 在p元素之前插入内容
::after 伪元素选择器 p::after 在p元素之后插入内容
:lang(language) 伪类选择器 p:lang(it) 选择lang属性的起始值是it的p元素

这里需要注意的有div+p相邻兄弟元素选择器
选择的是紧挨着div元素后的一个p元素,
发现一些网站和书上写的都是所有p元素,但我验证了一下发现好像不对

title~demo是说title属性包含demo这个词,属性值之间用空格分隔的单词
像这样<img title="demo demo1 demo2"></img>是可以选中的
但是<img title="demo1 demo2"></img>就不能够选中

语言的选择器不常用过就不说了

::before和::after伪元素选择器要想添加内容,需要使用content属性

p::before { 
   
    content: "123";
}

我们用after的时候很多时候是为了清除浮动

div::after { 
   
    content: "";
    display: block;
    clear: both;
}

至于为什么就不是今天讨论的范畴了( ̄_, ̄ )

##伪类与伪元素##
伪元素选择器写成伪类单冒号的形式没什么问题
但是伪类选择器使用双冒号就不能选择元素了

这里说一下伪类伪元素的区别
伪类我的理解是元素达到一种状态
状态存在,改变样式;状态消失,样式消失
伪元素应该说是操作元素的特定内容
实在分不清都写成单冒号的形式就好了
#CSS3选择器#
敲这么多终于到关键地方了
CSS3增加了很多强大的选择器,以伪劣选择器为主
CSS1和CSS2版本的选择器加起来都没它多
我们一起来看一下

选择器 类别 示例 说明
ele~ele 后兄弟元素选择器 div~p 选择div元素之后的所有p元素
[attr^=val] 属性选择器 a[src^=https] 选择src属性值以https开头的元素
[attr$=val] 属性选择器 a[src$=\.pdf] 选择src属性值以.pdf结尾的元素
[attr*=val] 属性选择器 a[src*=demo] 选择src属性的值包含子字符串demo的元素
:first-of-type 伪类选择器 p:first-of-type 选择每个p元素是其父级的第一个p元素
:last-of-type 伪类选择器 p:last-of-type 选择每个p元素是其父级的最后一个p元素
:only-of-type 伪类选择器 p:only-of-type 选择每个p元素是其父级的唯一p元素
:only-child 唯一子元素选择器 p:only-child 选择每个p元素是其父级的唯一子元素
:nth-child(n) 伪类选择器 p:nth-child(2) 选择每个p元素是其父级的第二个子元素
:nth-last-child(n) 伪类选择器 p:nth-last-child(2) 选择每个p元素的是其父级的倒数第二个子元素
:nth-of-type(n) 伪类选择器 p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n) 伪类选择器 p:nth-last-of-type(2) 选择每个p元素的是其父级的倒数第二个p元素
:last-child 伪类选择器 p:last-child 选择每个p元素是其父级的最后一个子元素
:root 根元素选择器 :root 选择文档根元素
:empty 空标签选择器 div:empty 选择无任何子元素(包括文本节点)的div元素
:target 目标元素选择器 #new:target 选择当前活动的#new元素(包含锚名称点击的URL)
:enabled 伪类选择器 input:enabled 选择已启用的input元素
:disabled 伪类选择器 input:disabled 选择禁用的input元素
:checked 伪类选择器 input:checked 选择选中的input元素
:not(selector) 否定选择器 :not§ 选择不是p元素的元素
::selection 高亮文本选择器 ::selection 匹配元素中被用户选中或处于高亮状态的部分
:out-of-range 伪类选择器 :out-of-range 选择值在指定区间之外的input元素
:in-range 伪类选择器 :in-range 选择值在指定区间之内的input元素
:read-write 读写元素选择器 :read-write 选择可读并且可写的元素
:read-only 只读元素选择器 :read-only 选择设置了readonly属性的只读元素
:optional 伪类选择器 :optional 选择可选的input元素
:required 伪类选择器 :required 选择设置了required属性的元素
:valid 合法元素选择器 :valid 选择输入值合法的元素
:invalid 非法元素选择器 :invalid 选择输入值非法的元素

##属性选择器##
[attr^=val],[attr$=val],[attr*=val] 这三个属性选择器放在一起记
也很好记,很想我们正则表达式中用的开头匹配符^,结尾匹配符$,统配匹配符*
同时还要区别于CSS2中的[attr~=val]

<div class="demo demo1">1</div>
<div class="demo demo2">2</div>
<div class="demo demo3">3</div>

[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>
<div>1</div>
<div>2</div>
<div>3</div>
div:first-child{ 
   
    background-color: red;
}

CSS3选择器介绍及用法总结[通俗易懂]
使用first-child我们发现页面没有变化
这是因为div并不是body元素的第一个子元素


div:first-of-type{ 
   /*改*/
    background-color: red;
}

CSS3选择器介绍及用法总结[通俗易懂]
改为first-of-type我们发现第一个div变红了
这是因为它是body元素的子元素中所有div的第一个

其他的也是一样的道理,举一反三

##根元素选择器##
:root这个选择器没什么意思,和你直接使用html一样

:root { 
   ...}
html { 
   ...}

##空元素选择器##
:empty就是选择真正的空元素,内部没有任何子元素,文本节点也不能有
举个例子

<p></p>
<p>1</p>
<p>2</p>
<p>3</p>
p:empty::before { 
   
    content: "12345";
    background-color: gold;
}

CSS3选择器介绍及用法总结[通俗易懂]

##目标元素选择器##
这个: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>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
<div id="fifth">5</div>
body { 
   
    height: 2000px;
}
div { 
   
    width: 200px;
    height: 200px;
    font: 200px/200px bold;
}

CSS3选择器介绍及用法总结[通俗易懂]

这是一个小demo可以利用锚点在页面中进行跳转
点击链接可以跳转到对应id的元素,并且url链接也发生了改变
CSS3选择器介绍及用法总结[通俗易懂]
此时就会触发:target的样式
我们来试一试,加几行代码

div:target {
    background-color: deeppink;
}

再点击链接
CSS3选择器介绍及用法总结[通俗易懂]

我们发现,跳转的同时,div样式改变了

##高亮文本选择器##
::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;
}

CSS3选择器介绍及用法总结[通俗易懂]
这样类属性中有demo的元素就不会变色

##CSS小图表##
剩下的选择器大部分都是针对input输入标签的
不详细讲了
我们做一个小练习,仅仅用CSS3的选择器做一个点击按钮切换图片的小图表
通过点击单选框显示不同的图片
像这样
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;
}

这样我们就完成了我们的小图表功能


整理了一晚上的选择器,可能会有遗漏的
如果想起来,日后再补吧

主页传送门

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157210.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • tp5 url 线上访问 在nginx 上 出现404错误,解决办法(1.80nginx 配置 pathInfo)

    tp5 url 线上访问 在nginx 上 出现404错误,解决办法(1.80nginx 配置 pathInfo)

    2021年10月10日
  • 分布式存储系统考虑因素-分区容错性[通俗易懂]

    分布式存储系统考虑因素-分区容错性[通俗易懂]分布式存储系统中的多台服务器通过网络进行连接。但是我们无法保证网络是一直通畅的,分布式系统需要具有一定的容错性来处理网络故障带来的问题。

  • 服务器基础知识全解(汇总版)[通俗易懂]

    服务器基础知识全解(汇总版)[通俗易懂]服务器基础知识全解(汇总版)https://www.zack.cn/archives/729本文对服务器知识进行了汇总,并添加了服务器基准测试和认证章节,内容包括9大章节,从服务器的概念、服务器重要部件技术和架构组成,并且对磁盘、RAID知识,网卡等知识做了深度详细介绍。说明:部分内容首发“智能计算芯世界”微信公众号。简单来说,服务器就是在网络中为其他客户机提供服务的计算机;具有高性能、高可靠、高IO数据传输能力等特点,企业从基础的邮件、打印到核心应用如ERP、数据库等业务,再到我们所熟

  • Git-命令行-删除本地和远程分支

    Git-命令行-删除本地和远程分支

    2021年10月22日
  • 一文读懂C++虚继承的内存模型

    一文读懂C++虚继承的内存模型一文读懂C++虚继承的内存模型1、前言2、多继承存在的问题3、虚继承简介4、虚继承在标准库中的使用5、虚继承下派生类的内存布局解析6、总结1、前言C++虚继承的内存模型是一个经典的问题,其具体实现依赖于编译器,可能会出现较大差异,但原理和最终的目的是大体相同的。本文将对g++中虚继承的内存模型进行详细解析。2、多继承存在的问题C++的多继承是指从多个直接基类中产生派生类的能力,多继承的派生类继承了所有父类的成员。从概念上来讲这是非常简单的,但是多个基类的相互交织可能会带来错综复杂的设计问题,命名冲突

  • pc软件开发用什么语言_java web应用开发

    pc软件开发用什么语言_java web应用开发Windows10SDK预览版需要10030以上版本号的Win10预览版系统才能使用。之前我安装的9926的系统,然后安装VS2015CTP6,再装Win10SDK,但是在新建项目后,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号