文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 类选择器 id 选择器 通配符选择器 三、标签选择器 --...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;...font-size:20px; } CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范 类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ; 不要使用 纯数字 ,
CSS 伪类 选择器 例子 例子描述 :active a:active 选择活动的链接。 :checked input:checked 选择每个被选中的 元素。...CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p::before 在每个 元素之前插入内容。
======================================================================================= 伪类选择器 ? ? ?
DOCTYPE html> CSS3 选择器 -伪类target 网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。...要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。
document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。 伪类选择器根据HTML元素的当前状态来定位它们。...… :is伪类选择器 注意：这最初被指定为:matches()和:any()，但:is()已经成为CSS标准。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...在JavaScript中添加、删除或修改元素可能会影响整个页面的样式，直到闭合的 标签为止。...总结 :is() 和 :where() 伪类选择器简化了 CSS 语法。你对嵌套和CSS预处理器的需求会减少。 :has()更具革命性和令人激动。父级选择将迅速流行起来，我们将忘记黑暗时代。
css04.css 1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9...ch-zn"> 3 4 5 Title 6 7 8 div>[class^=first] { 9 color:yellow; 10 } 11 div>[class$=CD] { 12 color: aqua...1 补充示例 31 属性选择器 2 补充示例 32 属性选择器 3 补充示例... 33 属性选择器 4 补充示例 34 属性选择器 5 补充示例 35 <p
-- 伪类 用于向某些选择器添加特殊的效果 1、a:link：未访问的链接 2、a:visited：已访问的链接 3、a:hover：悬浮（鼠标移动到链接上） 4...、a:active：选定的链接 注：1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。...2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3、伪类名称对大小写不敏感。...-- 通过伪类给超链接添加特殊效果 1、a:link：未访问的链接，未被点击过的链接颜色 2、a:visited：已访问的链接，已被点击过的链接的颜色 3、a:hover：悬浮（
六、伪类选择器和类选择器一起使用 示意图
" href="style.css" /> @import url('styles.css'); 二、CSS 选择器 1...、CSS 基础选择器 CSS 选择器 : 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签...} h3 { font-size:20px; } 类选择器 ( 推荐使用 ) : 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; 首先 , 在标签中的 class...属性中设置类名 , 标签内容 ; 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 , .name { color: blue...; 并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ; 基础选择器1,基础选择器2,基础选择器3 { 属性名称1:属性值1; } 链接伪类选择器 链接伪类选择器
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种...，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器 CSS中有如下四种伪元素选择器...结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。...其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。...总结： 为了方便记忆和查询，把CSS的结构伪类选择器归为四类： 1）通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤
前言 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。...伪类 伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。...也就是符合以下选择器的元素均支持focus状态。...JS获取当前得到焦点的元素 /* * 加载完成时默认返回body * 若某元素获得焦点时，则返回该元素 */ document.activeElement :: HTMLElement 另外还有一个让人误会的属性...总结 尊重原创，转载请注明来自：https://www.cnblogs.com/fsjohnhuang/p/9551799.html ^_^肥仔John 参考 https://css-tricks.com
CSS伪类选择器是什么 1、伪类选择器，同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。...但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。 2、伪类选择器分为两种，静态伪类和动态伪类。 （1）静态伪类：只能用于超链接的样式。...（2）动态伪类：针对所有标签都适用的样式。如下： :hover “悬停”：鼠标放到标签上的时候 :active “激活”： 鼠标点击标签，但是不松手时。...:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点） 以上就是CSS伪类选择器的介绍，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。
1.伪类选择器和伪元素选择器 伪类选择器是用来向某些选择器来添加效果。...（空格） :not（标签名） （3）目标伪类选择器： :target （4）UI元素状态选择器： :enabled :disabled :checked （5）动态伪类选择器： :link...:visited :hover :active （6）用户行为伪类选择器 :focus 伪元素选择器则是用来将特殊的效果添加在选择器上。...：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM 伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构...2.注意 可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus :active :active选择器用于选择活动链接。
伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 静态伪类和动态伪类 伪类选择器分为两种。 （1）静态伪类：只能用于超链接的样式。...对应的代码如下： /*让超链接点击之前是红色*/ a:link{ color:red; } /*让超链接点击之后是绿色...color:green; } /*鼠标点击链接，但是不松手的时候*/ a:active{ color:black; 记住，在css..."Content-Type" content="text/html;charset=UTF-8"> Document <style type="text/<em>css</em>...:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点） 举例1： /* 伪<em>类</em><em>选择器</em>：动态伪<em>类</em> */ /*
在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ） 属性选择器 input[value] 意思是选择的input标签，必须具有value属性 input[type=text...但低于div .box…） 结构伪类选择器 ul:first-child 选择ul中的第一个孩子 ul li:first-child 选择ul中的第一个li ul:last-child 选择ul中的最后一个孩子...因为nth-child在修改样式的时候，会先给ul中的孩子排序，即p为1，div为2，div为3，然后去看nth-child中的数字，发现第一个孩子是p，然后去找前面需要匹配的标签 （此例中为div），...但是nth-of-type是反过来的，它会先看选中的标签是什么（此例中为div），然后为该div中的孩子排序，然后再去匹配nth-of-type中的数字，看看是选中了div中的第几个孩子 找到了之后修改样式...必须要有content属性 --> 第二个稍微有难度，效果如下： 边框.gif 大家可以结合代码稍加修改来理解
文章目录 一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项 一、 ID 选择器 ---- 1、简介 ID 选择器 使用 " #...id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...* ID 选择器 与 类选择器 的使用方法基本一致 ;** 在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ; 2、代码示例 代码示例 : l e 运行效果 : 三、CSS...选择器使用注意事项 ---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span
内联式 书写位置:在 head标签内定义一个stype标签内 CSS语法:css选择器{样式1;样式2} 优缺点:可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用 2....外联式 书写位置:在外部css文件中，在html文件中通过link标签引入css文件 CCS文件内CSS语法:css选择器{样式1;样式2} HTML文件中导入CSS文件语法:<link rel="stylesheet...三种方式的优先级别 内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式 行间式的优先级要高于一切 三.<em>CSS</em><em>选择器</em> 统配<em>选择器</em> * { 样式1; } 标签<em>选择器</em> 标签名 { 样式1; } <em>类</em><em>选择器</em> .<em>类</em>名{ 样式1; } ID<em>选择器</em> #ID名称{ 样式1; } 高级<em>选择器</em>(简单讲解) 标签名.<em>类</em>名{ 样式1; } <!
CSS选择器的一些使用总结 CSS 选择器参考手册 CSS3 选择器——基本选择器 CSS3 选择器——属性选择器 CSS3 选择器——伪类选择器 CSS ::Selection 使用CSS选择器在页面中插入内容
|使用标签选择元素，优先级最低，使用最广泛| 类选择器 ： . |.class{...}|根据class值选择元素| id选择器 | #id{...}...：标签，类， id选择器 ``` /标签选择器 p{ font-size: 50px; color: blue; } /类选择器...TIM截图20200308141955.png 结构化伪类选择器 :root选择器 :root选择器用于匹配文档根元素，在HTML中， 根元素始终是html元素。...只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。 链接伪类 链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。...所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“:"构成。超链接标记的伪类有4种，具体如下表所示。
1. css 选择器的定义css 选择器是用来选择标签的，选出来以后给标签加样式。2. css 选择器的种类标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器3....类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。...-- 无法应用以上样式，每个标签只能有唯一的id名 -->注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。...伪类选择器用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器示例代码 .box1{width:100px...小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种，分别是:标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
