三. css3新增选择器

最新推荐文章于 2024-06-14 09:24:52 发布
最新推荐文章于 2024-06-14 09:24:52 发布
阅读量36 收藏
点赞数
分类专栏： 前端基础 文章标签： 前端

1. 属性选择器

2. 结构伪类选择器

nth-child ( n )

  • n可以是数字、关键字和公式
  • n如果是数字，就是选择第几个
  • 常见的关键词有 even偶数 odd奇数
  • 常见的公式如下（如果n是公式，则从0开始计算
  • 但是第0个元素 或者超出了元素的个数会被忽略

 3. 伪元素选择器

 注意: before和after必须有content属性

before在内容的前面，after在内容的后面

before和after创建一个元素，但是属于行内元素

因为在dom里面看不见刚才创建的元素，所以我们称为伪元素

Ctrl_CV攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新增选择器
qq_53280201的博客
02-14 722
CSS3给我们新增的选择器，可以更加便捷，更加自由的选择目标元素 1. 关系选择器 ~ //兄弟选择器：选择该元素后面的同级的兄弟元素 例如： h1~p:选择h1元素后面的所有同级p元素。 p~p:选择p元素后面的所有同级p元素，除了第一个p元素 2. 属性选择器 选择器 简介 E[att] 选择具有att属性的E元素 E[att="val''] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头
css3的新增的选择器
ovocc的博客
10-21 1497
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
CSS3 新增选择器
JJ_Smilewang的博客
03-31 1428
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。 1. 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。 1.1 E:first-child E:first-child 这个选择器用于匹配父元素中的第一个子元素E /* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色， 但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
第二讲 CSS3新增选择器
Fiki515的博客
03-15 882
选择器总结如下： 一、通配符选择器（＊） 概念：* 通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素 *{margin：0； padding：0；} .demo *{border:1px solid #000;} 二、元素选择器(E) 概念：元素选择器其实就是文档的元素，如html,body,p,div等等 li{border:1px solid #000;} 三、类选择器（.className） 1、使用类选择器之前需要在html元素上定义类名 &.
css3新增的选择器有哪些？
gcx1992的博客
03-08 824
一、属性选择器： 1.[attribute] 用于选取带有指定属性的元素。 2.[attribute=value] 用于选取带有指定属性和值的元素。 3.[attribute~=value] 用于选取属性值中包含指定词汇的元素。 4.[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 5.[attribute^=value] 匹配属性值以指定值开头的...
CSS3新增的伪类选择器
cidycidy99999的博客
08-24 1661
:first-of-type p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 :last-of-type p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 :only-of-type p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 :only-child p:o...
CSS新增选择器（全）
世界和我们都不该止步于此
03-10 870
CSS新增的选择器，可以说是非常是实用，前端必会，属性选择器：结构伪类选择器（一）结构伪类选择器（二）伪元素选择器
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
m0_53619602的博客
06-06 1199
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“] 效果图： 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
CSS3所有选择器讲解汇总
weixin_44860226的博客
07-28 1371
CSS3选择器是在CSS2.1选择器的基础上新增部分属性选择器和伪类选择器，减少对HTML类和ID的依赖，使编写网页代码更加简单轻松。根据所获取页面中元素的不同，可以把CSS3选择器分为5大类元素选择器、关系选择器、伪类选择器、伪对象选择器和属性选择器。...
CSS3——CSS3 新增选择器
流楚丶格念的博客
07-15 4250
天空之外结构(位置)伪类选择器（CSS3)案例属性选择器案例伪元素选择器（CSS3): 伪类与 :: 伪元素注意案例 结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
详解CSS3选择器的使用方法汇总
12-13
一 通用选择器1 *{}通配选择符(CSS2)：适合所有...CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~
盘点CSS Selectors Level4中新增的选择器
09-22
CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。需要的朋友们下面随着小编来一起学习学习吧
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 507
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 340
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 528
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 314
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
js轮播图有，移入移出事件，左右滑动事件功能
最新发布
tianxianghuiwei的博客
06-14 121
具体的轮播可以根据需求进行调整；
css3新增的选择器
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值