CSS3-选择器篇

最新推荐文章于 2024-04-06 00:45:08 发布
最新推荐文章于 2024-04-06 00:45:08 发布
阅读量178 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44908855/article/details/110214319
版权
本文介绍了CSS3中选择器的增强，包括属性选择器（如`[attr]`, `[attr=value]`, `[attr^=value]`, `[attr$=value]`, `[attr*=value]`）、伪类选择器（如`:hover`, `:active`, `:visited`等）和伪元素选择器，阐述了它们在提升CSS表现力和灵活性上的作用。同时，提到了浏览器支持情况，特别是对不同浏览器的私有前缀需求。" 99623048,2116373,LeetCode解题报告：第三大数的寻找,"['LeetCode', '算法', 'Python', '数据结构', '排序']
摘要由CSDN通过智能技术生成

1. CSS3概述

  1. 如同人类的的进化一样，CSS3是CSS2的进化版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷

  2. css当js用

  3. js当后台语言用

2. CSS3现状

  1. 浏览器支持程度差，需要添加私有前缀(移动端)
    a). -webkit- 谷歌(Google)
    b). -moz- 火狐(Firefox)
    c). -o- 欧鹏(Opera)
    d). -ms- IE(Internet Explorer)
    e). -khtml- Konqueror
  2. 移动端支持优于PC端
  3. 不断改进中
  4. 应用相对广泛

3. CSS3选择器

简述：CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容</

最低0.47元/天 解锁文章
何北木
关注
专栏目录
js实现完整的css3选择器.
卓林的专栏
12-04 791
此代码效果基本等同"selectorAPI"
CSS3选择器
小罗的博客
05-03 649
一.基本选择器 1 *：通配符选择器 通用元素选择器，匹配任何元素 * { margin:0; padding:0; } 2.元素选择器(E) 匹配所有使用E标签的元素 p { font-size:24px; } 3 .class：类选择器 class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class .error { color: red; } 4.id选择器（#ID） #container {
jQuery css3中的选择器
liu709127859的专栏
04-08 645
jQuery1.1.1 基础选择器  类选择器 $(‘.class’)$( ‘. 类名称’ )标签选择器 $(‘p’)$( ‘标签名称’ )Id选择器 $(‘#id’)$( ‘#id名称’ )通配符选择器 $(‘*’)$( ‘ *’ )并集选择器（逗号） $(‘h1,h2,h3’)$(‘ h1,h2,h3,h4,h5,h6’)后代选择器(空格) $(‘ul li’)$(‘ul li’);子代选择器...
css选择前几个元素或者后几个元素
口袋的天空的博客
01-22 7735
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #nth-test div:nth-child(-n + 4).
CSS - 选中最后一个元素（选择器）
热门推荐
王佳斌
09-25 3万+
CSS - 选中最后一个元素（选择器）怎么用css选择ul里最后一个li里面的a元素，css选择最后一个元素html标签选择器只认最后一个,选择某类的最后一个如何用css选择器选择某元素下的最后一个子元素?使用CSS选择器选择最后一个元素 |CSS3 :last-child 选择器 | 菜鸟教程CSS07选择第一个子元素和最后一个子元素nth-last-child
css3 复合选择器,CSS复合选择器
weixin_28987001的博客
08-03 1516
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。比如： p.one 选择的是： 类名为 .one 的 段落标签。使用率相对较少记忆技巧：交集选择器 是 并且的意思。 即...又...的意思并...
CSS-语法、选择器
最新发布
weixin_40017062的博客
04-06 924
css概述，用于快速思维回忆
CSS3学习笔记-02-选择器
欢迎访问我的主页：https://www.bookbook.cc
06-02 8487
一、全局选择器 二、标签选择器 三、结构选择器 3.1 后代选择器(华夏子孙 向下无限选择) 3.2 > 儿子选择器 只往下选择一层 3.3 ~ 兄弟选择器 3.4 + 铁兄弟(紧挨着的) 四、[] 属性选择器 4.1 ^ 以什么开始 $以什么结束 4.3 ~ 属性里边有这个值 4.4 * 属性里边有这个字符串 4.5 | 以什么开始 可以跟-符号 也可以选中 五、伪类选择器 5.1 常见伪类列表 5.2 :target 选择器可用于选取当前活动的目标元素 5.3 :empty 隐藏空的元素 六、结构伪类选
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
本篇文章将深入探讨如何解决IE8下CSS3选择器`nth-child()`不兼容的问题，并介绍一些相关的CSS选择器。 `nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-...
css3高级选择器使用方法
12-13
本篇文章将详细介绍CSS3中的属性选择器和结构性伪类选择器。 首先，让我们来看看CSS3的属性选择器： 1. `[att=val]`：这个选择器用于选取具有指定属性且属性值等于`val`的元素。例如，`p[id=p_name]`会选择所有`id...
react-React组件的css选择器
08-15
本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的样式处理。 1. **CSS Modules** CSS Modules是React中常见的一种模块化CSS解决方案，它允许你创建局部CSS，避免了全局样式冲突。每个CSS文件...
css3 伪类选择器快速复习小结
01-19
如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: ...
CSS背景（background）篇
weixin_44908855的博客
06-21 1万+
1. background概述 CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 属性 描述 background-color: 背景颜色 background-image: 背景图片地址 background-repeat: 是否平铺 background-position: 背景位置 background-attachment: 背景固定还是滚动 2. background-image设置背景图 background-image:url("imgs/main
CSS字体样式篇
weixin_44908855的博客
06-21 7058
1. CSS字体样式属性 1.1 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下： 1.2 font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码： 1 | p{ font-family:"微软雅黑";} 注: 可以同时指
CSS3-弹性布局篇
weixin_44908855的博客
11-27 833
1. flex弹性布局 1.1 概述 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。 CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩 性，在响应式开中可以发挥极大的作用。 别名：伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 1.2 布局原理 flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的
CSS3-过渡、变形、动画
weixin_44908855的博客
11-27 495
1. 过渡 在CSS3里使用 transition 可以实现补间动画（过渡效果） 速写语法transition:要过渡的属性、花费时间、运动曲线、何时开始。 /*如果有多组属性变化，用逗号隔开*/ 设置过渡属性名称transition-property :要过渡属性的名称（如width） 设置过渡花费时间transition-duration :过渡花费的时间（默认是0,时间单位为s/秒） 设置过渡时间曲线transition-timing-function :规定过渡效果的时间曲线默认是ea
CSS高级技巧篇
weixin_44908855的博客
06-22 490
1. 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 属性 属性值 作用 cursor: default 白箭头
CSS3-背景篇
weixin_44908855的博客
11-27 385
1. 文本阴影text-shadow text-shadow属性还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片 现在有了css3可以直接使用 text-shadow属性来指定阴影 这个属性可以有两个作用：产生阴影和模糊主体。 这样在不使用图片时能给文字增加质感 语法：text-shadow ：x轴偏移 y轴偏移 模糊距离 阴影颜色; // (必须)x、y轴取正负值 如5px、-5px // (可选)模糊距离必须取正值如：5px // (可选)阴影颜色为色值，也可以是rgba透明色
CSS3选择器详解与实例
"这篇内容主要介绍了CSS3选择器的基本概念和使用方法，包括基本选择器、多元素的组合选择器以及CSS2.1属性选择器。" 在网页设计和开发中，CSS（层叠样式表）是用于控制网页元素样式的重要工具。CSS3选择器的引入，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值