大家好，又见面了，我是你们的朋友全栈君。 都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。...使用它们可以减少不少冗杂的代码，便捷开发。...下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下（E表示标签）： 选择器 功能描述 E[attribute] 选取带有指定属性的元素...结构伪类选择器 结构伪类选择器是css3中新增的选择器，主要作用是通过文档结构的先后关系来匹配特定的元素，从而减少结构代码中ID属性和class属性的定义，使得文档更简洁。...3.UI伪类选择器 css3中共定义了11中UI伪类选择器。如下： 实例如下： <!
HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些...CSS 3中与用户界面有关的伪类 选择器含义示例E:enabled匹配表单中激活的元素input[type="text"]:disabled { background:#ddd;}E:disabled匹配表单中禁用的元素...CSS 3中的结构性伪类 选择器含义示例E:root匹配文档的根元素，对于HTML文档，就是HTML元素p:nth-child(3) { color:#f00; } p:nth-child(odd) {...，注意，文本节点也被看作子元素 10.CSS 3的反选伪类 选择器含义示例E:not(s)匹配不符合当前选择器的任何元素:not(p) { border:1px solid #ccc; } 11....CSS 3中的 :target 伪类 选择器含义 E:target匹配文档中特定”id”点击后的效果 相关阅读： CSS 1.0~3.0选择器（中） CSS 1.0~3.0选择器（上）
CSS选择器回顾 ID选择器 类名选择器：多类（.class1.class2）不被ie6支持 标签（元素）选择器 组合（后代）选择器 通配符选择器 直接子元素选择器 >：ie6不支持 相邻兄弟选择器 +...：ie6不支持 属性选择器 伪元素选择器 伪类选择器 CSS新增选择器 通用兄弟（关联）选择器：~，选择后面的所有的子元素 属性选择器（新增的）： E[attr~="value"]：指定属性名，并且具有属性值...； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-child(length);/*参数是具体数字*/ :nth-child...() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； 其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以...:empty 选择的元素里面没有任何内容 :not 否定选择器 UI元素状态伪类 我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML
中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器...建议使用:root方法。 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...8.CSS3 结构性伪类选择器—nth-child(n) :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。...要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。 11.CSS3选择器 :checked选择器 在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。...在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。
(不推荐使用) 2 × 伪元素 选择器 说明 版本 常用 ::before 在元素前插入的内容 2 √ ::after 在元素后插入的内容 2 √ ::first-letter 元素的首字母 1 ×...这些选择器组成的选择器系统是整个CSS体系里的核心，使用选择器能带来以下好处。...伪元素在HTML代码里未声明却能正常显示，在页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的伪元素，早在CSS2就出现了。 起初伪元素的前缀使用单冒号语法。...当然笔者还是提倡同学们使用单冒号语法标记伪类，使用双冒号语法标记伪元素，这样在代码形式上就能一眼区分出来。 ::before和::after的使用场景很多，也是笔者着重研究的技巧之一。... 复制代码 这样就无法分离结构与行为了，导致CSS必须跟着HTML走，只能使用绝对定位将固定到指定位置。
(不推荐使用) 2 × 伪元素 选择器 说明 版本 常用 ::before 在元素前插入的内容 2 √ ::after 在元素后插入的内容 2 √ ::first-letter 元素的首字母 1 ×...这些选择器组成的「选择器系统」是整个CSS体系里的核心，使用选择器能带来以下好处。...，使用上述技巧就无法完成了。...伪元素在HTML代码里未声明却能正常显示，在页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的伪元素，早在CSS2就出现了。...当然笔者还是提倡同学们使用「单冒号语法」标记伪类，使用「双冒号语法」标记伪元素，这样在代码形式上就能一眼区分出来。 ::before和::after的使用场景很多，也是笔者着重研究的技巧之一。
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。...X[title] a[title] { color: green; } 属性选择器。比如上述代码匹配的是带有title属性的链接元素。...在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）...X[foo~="bar"] 属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。...根据CSS3 Selectors规范，从技术上讲，您应该使用两个冒号::的伪元素语法。但是，为了保持兼容，用户代理也将接受单个冒号用法。实际上，在这一点上，在项目中使用单冒号版本更为明智。
4、id选择器(#ID) ID选择器和类选择器相似，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个...这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。.../css3/pseudo-class-selector 1、动态伪类 动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类...IE6-8浏览器不支持:not()选择器 5、伪元素 CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整...“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。...严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。 CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。...结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。...比如我们这里的这个demo，你想让列表中的第一个”li”具有与其他”li”有不同的样式，我们就可以使用:first-child来实现。
相邻选择器 弟弟选择器 属性选择器 语法 示例 分组与嵌套 伪类选择器 语法 示例 标准伪类索引 选择器参考表 网站分享 CSS快速入门 简介 层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术...(pycharm) 引入方式 1.style内部直接编写css代码,平时学习、练习的时候推荐使用 2.link标签引入外部css文件,正式工作、实际生产环境推荐使用 选择器 简介 CSS选择器是CSS...它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”； css是用来调节标签样式的 那为什么需要学选择器呢?...[attr operator value s] 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。...，那么使用分组和嵌套可以减少代码的冗余； 匹配标签之间用逗号隔开，标签与标签是或的关系； 并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用； /*并列的情况
CSS的选择器除了根据id、class、属性等从DOM中获取元素的以外，还有很重要的一类，用来获取元素的特别内容或特别状态，这就是 伪元素(Pseudo-elements) 和 伪类(Pseudo-classes...) [I] 伪元素 伪元素是对元素中的特定内容进行操作，选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。...[1.1] ::before 和 ::after 相比于其他伪元素大都是对文档中已有部分的选择，::before 和 ::after 则是向文档树中加入内容，这些内容并不存在于HTML源代码中，但确是可见的...标签，对应的h2就会高亮 一些简单的tab切换等也可以在不借助js的情况下用:target实现了 [2.2] 用:not过滤掉不符合的元素 :not(x)括号中可以应用几乎所有的选择器语法 :not可以搭配其他伪类使用...和 pattern约束，判断是否校验通过 可以组合使用，如 input:focus:invalid [2.6] jQuery选择器中支持的部分“伪类” :checked :focus :disabled
我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。...:checked 选中状态的元素。 例如，我们使用 :checked 来实现一个简单的待办事项列表。 ?...结构选择器 结构选择器非常强大，它是基于元素在DOM中的位置进行匹配。 这类型选择器特殊的地方在于它允许通过传入参数的方式来操作。...下面是关于使用参数的多个例子： ul:nth-child(2) 位置排序是第二个的元素。 ul:nth-child(4n) 位置排序是 (4, 8, 12, …)的元素。...其中 n 是从零开始，然后 n 为1，再 n 为2，依此类推匹配所有符合表达式的元素。 结构选择器中使用参数来做匹配的选择器如下： :nth-child() 正序匹配某个元素的一个或多个子元素。
今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。...E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4....2.1中的伪类 序号 选择器 含义 13....2.1中的伪元素 序号 选择器 含义 20....E:not(s) 匹配不符合当前选择器的任何元素 实例： :not(p) { border:1px solid #ccc; } 十一、CSS 3中的 :target 伪类 序号 选择器 含义 44
这个案例我们无需编写任何 JavaScript 代码，这里主要运用了 CSS checkbox hack 的技术进行实现。...这篇文章运用了复杂的CSS选择器、flex box 和 Grid 布局、 CSS checkbox 的伪类选择器 checked 等技术 一、 首先看看幻灯的效果展示 如下图所示，一个功能完备漂亮的幻灯片图片组件...，在这个案例中，我们使用CSS的Grid新布局，将图片放置在1行1列的单元网格中，示例如下图所示： 与上图对应的CSS代码如下： .featured-wrapper .featured-list {....featured-wrapper容器，如下图所示： 这里需要注意的是，这些箭头与 radio 按钮一一对应关联，这里我们用到了::before 和 ::after伪元素创建圆形元素，示例代码如下：...，如下图所示： 在这里，为了将图片标题放置在图片之上，我们用的不是传统的CSS定位，这里我们应用了CSS Grid技巧。
所以，我们选用 nth-of-type()选择器以及:checked ~伪类选择器来实现主要的功能， 首先我们来看HTML部分： 在点击跳转时，选中框的跳转动画，所以，在这三十个元素中，需要通过设置不同的transition-delay属性来控制跳转时的动画，在上面的GIF图中可以看出，跳转的动画是逐渐变快的...，所以我们在每一个类中，逐渐增加。...第一个是0，第二个我们设置0.004s，依次增加，同样，我们需要给每一个子元素的before伪类增加一个animation-delay属性，时间和这些子元素相同，由于这些设置比较占篇幅，我将把这次的代码发到...GIthub上面，大家可以自行查看 Github地址:https://github.com/cxwht/css-demos/blob/master/checkcss.html 然后在基本的CSS设置之后
最近在做一些面试的工作，我经常会问的一个问题就是：CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊，再追问下去就没了，这让我很是意外！...看来这基础的东西，大家都说很重要，可真正能静下心来去看的并不多，更别说在项目中灵活使用了！...CSS3 E:not(s) { sRules } 匹配不含有s选择符的元素E /** 除最后一个li之外，所有li加一条底边线 **/ li:not(:last-child) { border-bottom...--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--> 结构性伪类选择符 E:empty :checked CSS3 E:checked {...-- 假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中 --> #demo:target {
唯一子元素选择器 p:only-child 选择每个p元素是其父级的唯一子元素 :nth-child(n) 伪类选择器 p:nth-child(2) 选择每个p元素是其父级的第二个子元素 :nth-last-child...~=de]不能选中任何行，因为它class中以空格分隔的属性值中没有“de”的属性值 说到这个属性选择器，我还要多说一点 我在表格中的示例是这么写的 a[src=\.pdf] 是因为“.”它不认识，我们需要加...“\”转义 不过css中属性选择器也可以写成引号的形式 比如说下面代码时等价的 a[src=\.pdf] a[src=".pdf"] a[src ##子元素选择器## 下面的一堆什么type、child...的选择器都是针对子元素在父元素中的位置的 表格中列出的很详细了 我主要谈谈type、child的区别， 以最简单的:first-child和:first-of-type为例 0 CSS3的选择器做一个点击按钮切换图片的小图表 通过点击单选框显示不同的图片 像这样 首先我们需要编写html代码 使用三个radio和三个img元素 <input
前言 css选择器非常之多，常见的如class选择器，id选择器，标签选择器等等。每个的用法都有所区别，虽然很多都能到达同样的效果，但还是有一些更优的选择。 ?...class、id、标签选择器 这个几个就不细说了，class和标签选择器主要用来设置样式上面，id选择器推荐不要用在css样式上，更多是用在js操作dom时，选择元素。...element1~element2 p~div 选择前面有 元素的每个 元素。 ? A标签伪类选择器 :link a:link 所有未被访问的链接(a标签的默认样式)。...:last-of-type p:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分) ?...input状态选择器 :focus 获得焦点的 input 元素 :enabled 每个启用的 input 元素 :disabled 每个禁用的 input 元素 :checked 每个被选中的 input
CSS只有一个全局作用域，但是Shadow DOM中的样式不会影响外面的样式。...类选择器 .container 敏感 ID选择器 #id 敏感 选择器命名可以以数字开头，但是在CSS中需要转义，如下面是合法的： .1-foo {color:red;} /* 不合法...checkbox的:checked伪类比[checked]属性选择器优势在于JS控制选中的时候（checkbox.chencked = true这种情况），由于没有改变checked属性，所以[checked...就是我们在标签中设置required或者pattern等属性的时候，会判断是否有效，匹配对应的伪类。...树结构伪类 :root匹配根元素，IE9以上才支持，在XHTML中根元素就是html，另外也可以匹配的SVG的根元素，但不能匹配Shadow DOM的的根元素，Shadow DOM的的根元素是:host
CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。 例如，针对第一个或最后一个子元素。...注意： CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。... : nth-child伪类 CSS3引入了一个新的:nth-child伪类，使可以将给定父元素的一个或多个特定子对象作为目标。...提示： CSS :nth-child(N)选择器在必须选择以特定间隔或模式（例如在偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。...DOCTYPE html> 使用带有选择器的CSS伪类示例 a.red:link
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
