css的选择符有哪些

css的选择符有:1、通配选择符;2、类型选择符;3、属性选择符;4、子对象选择符;5、ID选择符;6、类选择符;7、选择符分组;8、伪类及伪对象选择符。其中,通配选择符选定文档目录树(DOM)中的所有类型的单一对象。

css的选择符有哪些-Worktile社区

1、通配选择符

语法:{ sRules }

说明:通配选择符。选定文档目录树(DOM)中的所有类型的单一对象;假如通配选择符不是单一选择符中的少数组成,“*”可以省略。

示例:

*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }

2、类型选择符

语法:E { sRules }

说明:类型选择符。以文档语言对象(Element)类型作为选择符。

示例:

td { font-size:14px; width:120px; }
a { text-decoration:none; }

3、属性选择符

  • E [ attr ] { sRules }:选择具有 attr 属性的 E;
  • E [ attr = value ] { sRules }:选择具有 attr 属性且属性值等于 value 的 E;
  • E [ attr ~= value ] { sRules }:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”必须的;
  • E [ attr |= value ] { sRules }:指定了属性名,并且属性值仅是value或者以“value-”开头的值(比如说left-con)。

4、子对象选择符

语法:E1 > E2 { sRules }

说明:子对象选择符。选择所有作为 E1 子对象的 E2 。

示例:

body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }

5、ID选择符

语法:#ID { sRules }

说明:ID选择符。以文档目录树(DOM)中作为对象的少数标识符的 ID 作为选择符。

示例:

#note { font-size:14px; width:120px;}

6、类选择符

语法:E.className { sRules }

说明:类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。在IE5+,可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。

示例:

div.note { font-size:14px; }
/* 所有class属性值等于(包含)"note"的div对象字体尺寸为14px */ 
.dream { font-size:14px; } 
/* 所有class属性值等于(包含)"note"的对象字体尺寸为14px */

7、选择符分组

语法:E1 , E2 , E3 { sRules }

说明:选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。

示例:

.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }

8、伪类及伪对象选择符

语法:

  • E : Pseudo-Classes { sRules }
  • E : Pseudo-Elements { sRules }

说明:伪类及伪对象选择符。

  • 伪类选择符。伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
  • 伪对象选择符。伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。

示例:

div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }

延伸阅读

基本选择器的优先级

通常我们用四位数字表示优先级,一位一位的进行比较。如,一种选择器的优先级是 0 1 1 0,另一种选择器的优先级是 0 1 0 2,那么就从名列前茅位开始比较,两者均是0,此时看第二位,都是1,第三位,前者为1,后者为0,1自然是比0大的,所以,前者的优先级级别更高。

  • id选择器。用四位数字表示id选择器的优先级就是:0 1 0 0。如:#con {}
  • 类名选择器。用四位数字表示类名选择器的优先级就是:0 0 1 0。如:.h5course {}
  • 标签名选择器。用四位数字表示标签名选择器的优先级就是:0 0 0 1。如:div {}
  • 伪类选择器(如:hover等a标签常见的四种伪类)。用四位数字表示伪类选择器的优先级就是:0 0 1 0
  • 通配符选择器(*)。当通配符单独出现的时候,其优先级为:0 0 0 0。如果它存在于后代选择器当中,涉及到优先级叠加运算的时候,其优先级为:0 0 0 1。

文章标题:css的选择符有哪些,发布者:Z, ZLW,转载请注明出处:https://worktile.com/kb/p/34388

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年1月5日 上午2:05
下一篇 2023年1月5日 上午2:45

相关推荐

  • 如何处理员工的迟到和旷工问题

    处理员工的迟到和旷工问题是组织管理的关键挑战。本文将深入探讨四个核心方向:1、明确并传达迟到和旷工的政策,2、采用灵活的工作时间安排,3、设立并执行奖惩制度,4、通过沟通了解并解决根本原因。在此基础上,本文还将描述如何确保整个过程公平透明,促进良好的工作纪律。 1、明确并传达迟到和旷工的政策 2、采…

    2023年8月9日
    7100
  • 什么编程语言写脚本好

    写脚本一般使用JavaScript。JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言。 JavaScript(简称“…

    2023年2月21日
    23200
  • APICloud的版本更新和云修复有什么区别

    APICloud的版本更新和云修复的区别有:1、实现方式不同;2、应用场景不同;3、发布频率不同。实现方式不同是指,版本更新需要发布新的应用版本,用户需要下载安装,而云修复可以在后台实时生效,用户无需进行任何操作。 一、版本更新 版本更新是指在应用发布后,随着功能改进和Bug修复,开发者需要将新的应…

    2023年7月30日
    4800
  • 为什么Web开发中前端和后端是分开的

    这是因为:一、技术栈不同;二、提高开发效率;三、提高维护性和可扩展性;四、更好的团队合作。前端和后端开发使用的技术栈不同。前端开发人员需要掌握HTML、CSS和JavaScript等技术,以及各种框架和库,如React、Angular和Vue。js等。 一、技术栈不同 前端和后端开发使用的技术栈不同…

    2023年5月28日
    5700
  • oa办公系统用什么前台框架

    用以下前台框架:一、Bootstrap;二、Vue.js;三、React;四、Element;五、Ant Design。Bootstrap是Twitter开发的一个简洁、直观、强悍的前端框架,它提供了大量的CSS、JavaScript组件,适用于开发响应式布局、移动设备优先的Web项目。 一、Boo…

    2023年5月28日
    8500
  • 常见的软件开发模型有哪些

    常见的软件开发模型有:1、瀑布模型;2、快速原型模型;3、渐增模型;4、喷泉模型;5、迭代模型;6、敏捷开发模型。其中,使用瀑布模型开发时是通过设计一系列阶段顺序展开的,从系统需求分析开始直到产品发布和维护,每个阶段都会产生循环反馈。 1、瀑布模型 瀑布模型(Waterfall Model) 是一个…

    2023年1月5日
    1.1K00
  • 为什么要有头文件

    有头文件是因为计算机过去的速度太慢,无法将整个程序编译成一个大的Binary。为了解决这个问题,程序被分割成多个cpp文件,每个文件单独编译成对象object文件,然后由链接器负责生成dll或者可执行文件。头文件是用户应用程序和函数库之间的桥梁和纽带。 有头文件是因为计算机过去的速度太慢,无法将整个…

    2023年2月22日
    21200
  • 个人web开发asp.netcore和php7之间区别

    从学习曲线上来看,PHP明显比ASP.NET core要平滑易学,上手快,开发Web网站现成轮子多,开发效率高。http://ASP.NET core则不一样,它建构于.NET core平台之上,与整个.NET core技术群关联密切。 1、首先是运行效率上,ASP.NET Core 很快。因为 ….

    2023年2月9日
    17400
  • 项目施工管理和项目工程管理的区别有哪些

    项目施工管理和项目工程管理的区别有:1、管理阶段不同;2、关注重点不同;3、范围不同。项目施工管理主要关注于项目的实际施工阶段,包括工程建设、安装、调试和验收等。项目工程管理则涵盖了整个项目的生命周期,从项目立项规划到项目交付和运营维护等多个阶段。 一、项目施工管理 项目施工管理是指在工程项目实施阶…

    2023年7月31日
    15100
  • 有哪些比较好的测试用例管理工具

    比较好的测试用例管理工具:1、PingCode;2、TestRail;3、Jira;4、PractiTest;5、Kualitee;6、Zephyr Enterprise;7、 禅道;8、MeterSphere;9、Bugzilla;10、Tes较好ia。其中,PingCode 是国内的一站式软件研…

    2023年1月1日
    15800

发表回复

登录后才能评论
联系我们
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部