0

0

CSS3复杂选择器_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:22:20

|

1105人浏览过

|

来源于php中文网

原创

1.相邻兄弟选择器

       P+b : 同一个父元素下p标签后面的第一个兄弟元素b;

 

 2.通用兄弟选择器

       p~b : 同一个父元素下p标签后面的所有兄弟元素b;

立即学习前端免费学习笔记(深入)”;

 

3.属性选择器

       将元素属性用于选择器中,从而获取指定元素属性或者值得元素;

       语法:

       [属性] : 匹配 "指定属性" 的 "所有" 元素;

       元素[属性] : 匹配 "指定属性" 的 "指定" 元素;

              input[type] : 获取具备type属性的input;

              input[id]   : 获取具备id属性的input;

       元素[属性][属性] :匹配 "多个指定属性" 的 "指定" 元素;

       元素[属性="值"] :匹配 "指定属性等于值" 的 "指定" 元素;

       元素[属性~="值"] : 匹配 "指定属性中包含这个值(独立的单词)" 的 "指定" 元素;

       元素[属性^="值"] : 匹配 "指定属性以指定值开始" 的 "指定" 元素;

       元素[属性*="值"] : 匹配 "指定属性包含值(可以是非独立的单词)" 的 "指定" 元素;

       元素[属性$="值"] : 匹配 "指定属性以指定值结束" 的 "指定" 元素;

       元素[属性!="值"] : 匹配 "指定属性不等于值" 的 "指定" 元素;

                    

4.目标伪类

       活动的HTML锚点,用于选取当前活动的目标元素;

       语法:

       :target 匹配所有活动锚点

       元素:target 匹配指定元素活动锚点

 

5.元素状态伪类

       主要匹配元素的禁用,启用,选中状态

       多数用在表单元素上;

       :disabled  匹配所有被禁用的元素

       :enabled  匹配所有被启用的元素

绘影字幕
绘影字幕

视频字幕制作神器、轻松编辑影片

下载

       :checked  匹配所有被选中的元素  用于单选和复选;

 

6.结构伪类

       从元素结构(层级结构)上进行划分;

       用于:找 第一个子元素,最后一个子元素,没有子元素,仅仅包含一个子元素

 

       :first-child      匹配父元素的第一个子元素

       :last-child       匹配父元素的最后一个子元素

       :empty           匹配没有子元素的元素

       :only-child      匹配只有一个子元素的元素

       ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素

       E:nth-of-type()只计算父元素中指定的某种类型的子元素,当某个元素的子元素类型不只是一种时,使用nth-of-type来选择会比较有用。

   E:nth-last-of-type()的用法同E:nth-of-type()相同,不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。

   li:nth-of-type(3)的话就会标识它只会选择第三个li元素,别的元素会忽略掉

 

7.否定伪类

       input:not([type="text"]){color:red;}

       input:not(:last-child){background:blue;}

 

8.伪元素选择器

       :first-letter 选取指定选择器的首字符;

              p:first-letter{

                     font-size:40px;

              }

              一帮用于排版,首字符突出等;

 

       :first-line 选取指定选择器的首行字符;

 

       ::selection 匹配用户的选取部分;

              如 选中的文本等

       ::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了,但是需要注意的是,::selection仅接受两个属性,一个是background,一个是color。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

705

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

233

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

117

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

22

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

61

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

30

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

669

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

58

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP基础入门课程
PHP基础入门课程

共33课时 | 2.2万人学习

兄弟连高洛峰CSS3视频教程
兄弟连高洛峰CSS3视频教程

共20课时 | 4.1万人学习

Css3入门基础视频教程
Css3入门基础视频教程

共33课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号