iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >CSS3常用三大选择器是什么
  • 944
分享到

CSS3常用三大选择器是什么

2024-04-02 19:04:59 944人浏览 薄情痞子
摘要

今天小编给大家分享一下css3常用三大选择器是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一

今天小编给大家分享一下css3常用三大选择器是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

模块化开发

CSS1 中定义了网页的基本属性:

字体、颜色、基本选择器等

CSS2中在CSS1的基础上添加了高级功能

浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)

CSS3遵循的是模块化开发。发布时间并不是一个时间点,而是一个时间段。

通用选择器:*  选择到所有的元素

选择子元素:> 选择到元素的直接后代

相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素

普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素

:nth-child 选择指定索引处的子元素

         nth-child(n) 父元素下的第n个子元素

         nth-child(odd)奇数子元素

         nth-child(even)偶数子元素

:nth-last-child(n) 倒数第n个子元素

:nth-of-type(n) 父元素下的第n个指定类型的子元素

:nth-last-of-type父元素下的倒数第n个指定类型的子元素

:first-child 选择父元素下的第一个子元素

:last-child 选择父元素下的最后一个子元素

:only-child 选择父元素下唯一的子元素

:only-of-type选择父元素下指定类型的唯一子元素

:root 选择文档的根目录,返回html

E[attr] 属性名,不确定具体属性值

E[attr="value"] 指定属性名,并指定其对应属性值

E[attr ~="value"] 指定属性名,其具有多个属性值空格隔开,并包含                  value值

E[attr ^= "value"] 指定属性名,属性值以value开头

E[attr $="value"] 指定属性名,属性值以value结束

E[attr *="value"] 指定了属性名,属性值中包含了value

E[attr |= "value"] 指定属性名,属性值以value-开头

UI伪类选择器:

         :enabled 选择启用状态元素

         :disabled 选择禁用状态元素

         :checked 选择被选中的input元素(单选按钮或复选框)

         :default 选择默认元素

         :valid、invalid 根据输入验证选择有效或无效的input元素

         :in-range、out-of-range 选择指定范围之内或者之外受限的元素

         :repuired、optional 根据是否允许:required属性选择input元素

动态伪类选择器:

 :link 选择链接元素

 :visited 选择用户以访问的元素

 :hover 鼠标悬停其上的元素

 :ative 鼠标点击时触发的事件

 :focus 当前获取焦点的元素

其他伪类选择器:

 :not(<选择器>) 对括号内选择器的选择取反

 :lang(<目标语言>) 基于lang全局属性的元素

 :target url片段标识符指向的元素

     :empty选择内容为空的元素

 :selection 鼠标光标选择元素内容

以上就是“CSS3常用三大选择器是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网node.js频道。

--结束END--

本文标题: CSS3常用三大选择器是什么

本文链接: https://www.lsjlt.com/news/92290.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS3常用三大选择器是什么
    今天小编给大家分享一下CSS3常用三大选择器是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2024-04-02
  • 常用css3基本选择器是什么
    这篇文章主要介绍了常用css3基本选择器是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 常用css3基本选...
    99+
    2024-04-02
  • CSS3 only-child选择器的作用是什么
    CSS3 only-child选择器用于选取某个元素的唯一子元素。只有当一个元素为其父元素的唯一子元素时,才会被选中。这个选择器可以...
    99+
    2023-10-12
    CSS3
  • 三大CSS选择器的用法
    本篇内容主要讲解“三大CSS选择器的用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“三大CSS选择器的用法”吧!这里向大家描述一下CSS选择器中子选择器、相邻...
    99+
    2024-04-02
  • css3新增伪类选择器是什么
    本篇内容介绍了“css3新增伪类选择器是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • css3中类选择器指的是什么
    这篇文章主要介绍“css3中类选择器指的是什么”,在日常操作中,相信很多人在css3中类选择器指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css3中类选择器指的是...
    99+
    2024-04-02
  • CSS3 :nth-child()选择器有什么用
    CSS3 :nth-child()选择器用于选择指定父元素下的特定位置的子元素。它允许你根据位置选择子元素,并且可以与其他选择器组合...
    99+
    2023-10-12
    CSS3
  • css3选择器怎么用
    今天小编给大家分享一下css3选择器怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 ...
    99+
    2024-04-02
  • CSS3新增的属性选择器是什么
    这篇文章主要介绍CSS3新增的属性选择器是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 元素的属性,我们都知道是什么。例如下面代码中type和value就是input元素的属...
    99+
    2024-04-02
  • CSS3中有哪些常用的选择器
    这篇文章给大家介绍CSS3中有哪些常用的选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1. 根选择器 :root:root{}就等同于html{}, 一般来说, 推荐使用:roo...
    99+
    2024-04-02
  • 在css3中not()选择器有什么用
    这篇文章给大家分享的是有关在css3中not()选择器有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   not()选择器   在CSS3中,:not()选择器中主要...
    99+
    2024-04-02
  • css3新增选择器有什么
    这篇文章主要讲解了“css3新增选择器有什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3新增选择器有什么”吧!css3选择器有:“[att^="val"]”、“...
    99+
    2023-06-14
  • css3中id选择器指的是什么意思
    这篇文章给大家分享的是有关css3中id选择器指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在css中id选择器的意思是:能够选中带有...
    99+
    2024-04-02
  • css常用的三种选择器解释
    css常用的三种选择器解释:1、标签选择器。2、class选择器。3、id选择器。标签选择器样式的名称要与标签名称相同,且代码中的p标签(<p>标签选择器</p>)对应已设置好的p的样式(p{color:blue;}...
    99+
    2024-04-02
  • CSS3选择器怎么运用
    这篇“CSS3选择器怎么运用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS3选择器怎...
    99+
    2024-04-02
  • 常见的CSS3选择器有哪些?
    CSS3是一种用于网页设计的样式表语言,它具有丰富的选择器,这些选择器可以帮助我们更精确地指定要样式化的HTML元素。下面将介绍一些常用的CSS3选择器,并给出相应的代码示例。 元素选...
    99+
    2024-02-24
    元素选择器 id选择器 类选择器 html元素 属性选择器 伪类选择器
  • css3有什么新增的选择器
    小编给大家分享一下css3有什么新增的选择器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! css3...
    99+
    2024-04-02
  • css3选择器的作用
    CSS3选择器的作用及代码示例 CSS(层叠样式表)是一种用于定义网页样式的语言,通过CSS3选择器,我们可以精确地选择并修改页面中的特定元素,从而实现更灵活的样式控制。本文将介绍CS...
    99+
    2024-02-22
    作用 选择器 id选择器 伪类选择器
  • css3属性选择器怎么用
    小编给大家分享一下css3属性选择器怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在css3还未出现之前。我们...
    99+
    2024-04-02
  • css3层次选择器怎么用
    本篇内容主要讲解“css3层次选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3层次选择器怎么用”吧! 用法:1、后...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作