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)


相关推荐

  • web图书销售管理系统_图书管理系统的主要功能有哪些?

    web图书销售管理系统_图书管理系统的主要功能有哪些?我们都已经了解到图书管理系统使用带来的好处,那么图书管理系统到底能给图书管理实现哪些功能。1、基础资料商品信息齐全,易学易用商品信息,供货商,客户,员工,仓库等基本参数的设置。支持一品多码管理。可快速检索商品,提高收银效率。可按岗位角色分组、分层、分级进行自定义权限管理。2、采购管理按需采购商商品,节省库存成本系统提出按需采购,市场拉动采购理念,减少库存积压,提高存货流转率。系统按照库存上下限来建…

  • idea中如何使用svn_svn中文使用教程

    idea中如何使用svn_svn中文使用教程首先,使用的时候,自己得先在电脑上安装个小乌龟。也就是svn啦。第一步安装小乌龟。如下:具体安装好像没什么具体要求,一路next,就好。如上图箭头所示,在安装TortoiseSVN的时候,默认commandlineclienttools,是不安装的,这里建议勾选上。这个我不确定我当时选没选,不过呢,你给安装上,也是没问题的。把上面的勾选取消了,就可以…

  • 配置tomcat的环境变量

    配置tomcat的环境变量配置Tomcat的环境变量注意:配值tomcat之前要将JDK的JAVA_HOME和path都配置好,否则后续会出现Tomcat无法启动或者闪退等问题。1.首先下载tomcat,并且解压到目录:2.第二步鼠标右键计算机->属性->高级系统设置,进去之后,点击环境变量,如下图所示3.第三步开始配置tomcat的环境变量,新建系统变量名CATALINA_BASE,值为tomcat的安装路径,如下图所示:4.第四步新建系统变量CATALINA_HOME,值tomcat

  • wing是什么_完全二叉树的深度

    wing是什么_完全二叉树的深度设一个 n 个节点的二叉树 tree 的中序遍历为(1,2,3,…,n),其中数字 1,2,3,…,n 为节点编号。每个节点都有一个分数(均为正整数),记第 i 个节点的分数为 di,tree 及它的每个子树都有一个加分,任一棵子树 subtree(也包含 tree 本身)的加分计算方法如下:subtree的左子树的加分 × subtree的右子树的加分 + subtree的根的分数若某个子树为空,规定其加分为 1。叶子的加分就是叶节点本身的分数,不考虑它的空子树。试求一棵符合中序遍历为(1,2,

  • 网络安全-自学笔记

    网络安全-自学笔记目录WEB(应用)安全前端安全xss攻击后端安全文件上传漏洞WebShell解析安全数据安全sql注入通信安全WEB(应用)安全前端安全xss攻击后端安全文件上传漏洞WebShell解析安全数据安全sql注入网络安全-sqlmap学习笔记通信安全网络-http协议学习笔记(消息结构、请求方法、状态码等)…

  • vue截取字符串最后一个.后的字符_vue获取某个字符之后的字符串

    vue截取字符串最后一个.后的字符_vue获取某个字符之后的字符串**stringObject.substring(start,stop)用于提取字符串中介于两个指定下标之间的字符。**start必需。一个非负的整数,规定要提取的子串的第一个字符在stringObject中的位置。stop可选。一个非负的整数,比要提取的子串的最后一个字符在stringObject中的位置多1。如果省略该参数,那么返回的子串会一直到字符串的结尾。start从0开始到…

发表回复

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

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