属性选择器

  [title]:选择带有title属性的元素

  [title='hello']:选择属性是title并且值是hello的元素

  [title~='hello']:选择属性是title并且部分值是hello的元素,hello需要是单独的值,以空格分开

  [title*='hello']:选择属性是title并且其中包含了hello的元素

  [title|='hello']:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符

  [title^='hello']:属性以hello开头的任意字符

  [title$='hello']:属性以hello结束的任意字符

  [title^='hello'][title$='.py']:选择属性以hello开头并且以.py结束的元素

连结符

  h1~p:选择h1元素后面的所有同级p元素

  p~p:选择p元素后面的所有同级p元素,除了第一个p元素

  h1+p:选择h1元素后面的第一个同级p元素

伪类选择器

  nth系列,数字

  nth-child():按照位置来算数

  nth-of-type():按照类型来算数

  nth-last-child():从末尾按照位置开始算

  nth-last-of-type():从末尾按照类型来算数

  通过(-n+number)来指定选择前几个元素

  -n会向负数方向增加先从0开始,-1,-2,-3...

  使用:nth-child(odd)或:nth-child(even)实现隔行变色。

单个选择

  first-child:选择第一个元素,按位置
  first-of-type:选择第一个元素,按类型

  last-child:选择最后一个元素,按位置
  last-of-type:选择最后一个元素,按类型

  only-child:没有其他兄弟元素的时候会被选中
  only-of-type:可以有兄弟元素但要类型不同

  使用only-of-type可以让你从其他类型元素中挑选出一个元素来,反之only-child需要元素单独存在才行。这个肯定有大作用,待发现。

伪类

:target

  1.   通过:target来模拟点击事件
  2.   <a href="#a" id="a"></a>
  3.   利用target实现tab栏切换
  4.   使用target伪类,可以轻松地突出显示用户要阅读的评论

利用target制作的tab切换,当然它还是有很多缺陷的,不过大家可以通过它扩展扩展。

:empty
  选择没有子元素并且没有文本节点的元素

:root
  选择根元素,在HTML中root永远是html元素

:not
  参数支持传递一个元素甚至其他伪类选择器,但不支持传递连结符以及伪元素
  选择除了指定参数以外的任意元素

:optional

  选择不是必须填写的input元素

  也就是获取到input没有加required属性的元素

:required

  选择有加required属性的元素

:read-write

  获取可读写的input元素

:read-only

  获取只可读的input元素

:out-of-range

  当input元素的值是超出范围时,max和min限定的范围

:valid

  选择所有合法的输入,适用于表单元素有限制,如最小输入元素和属性的最大值,电子邮件具有合法的电子邮件,或者数值等数字字段。

元素状态伪类

:checked
  当checkbox被选中时

:disabled
  当元素被禁用时

:enabled
  当元素没有被禁用时

伪元素

::first-line
  选择第一行文字

::first-letter
  选择第一个字

::after
  在元素末尾添加一个伪元素

::before
  在元素开头添加一个伪元素

::selection
  应用到选中的文本上

合理利用这些选择器,可以帮你解决很多问题,目前还在研究中,本篇内容长期更新。

转载于:https://www.cnblogs.com/pssp/p/5873926.html

CSS3选择器的研究相关推荐

  1. CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器

    CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...

  2. CSS3 选择器(转)

    http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器 在 CSS 中,选择器 ...

  3. CSS3 选择器——属性选择器

    上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  4. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...

  5. CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿

    一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...

  6. html选择器有哪些child,css3选择器child有哪些?css3选择器child用法详解

    本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...

  7. css3-2 CSS3选择器和文本字体样式

    css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...

  8. html选择器是什么,CSS3选择器是什么?

    首先我们来看一下displaynone的意思是什么? display:none的意思: 隐藏元素并脱离文档,流就是隐藏该区域,不占实际空间,但对后台来说真实存在,可以获取被隐藏的元素简单的来说就是将元 ...

  9. CSS3 选择器 基本选择器介绍

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

最新文章

  1. C语言复习:内存模型2
  2. 函数递归方法反转字符串
  3. 2.10 stack
  4. ICCV2021 比MoCo更通用的对比学习范式,中科大MSRA提出对比学习新方法MaskCo
  5. c语言 万年历编程,用C语言如何编写“万年历”
  6. 第16件事 愿景和目标要接地气
  7. 素描滤镜c语言算法,python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现).pdf...
  8. 判断字符是否包含有特殊字符
  9. 牛牛以前在老师那里得到了一个正整数数对(x, y), 牛牛忘记他们具体是多少了。 但是牛牛记得老师告诉过他x和y均不大于n, 并且x除以y的余数大于等于k。 牛牛希望你能帮他计算一共有,,,
  10. detectron2 ImportError: cannot import name ‘_C‘ from ‘detectron2‘
  11. Tip: JSP开发模式
  12. java调用Ocx控件相关知识
  13. 比特球云盘,离线播放云下载探析
  14. liunx服务器日志在什么位置,系统日志查看位置(Windows+Linux)
  15. 阿里P7被裁员,找工作小半年了,流程走着走着就没了
  16. ubuntu16.04安装、编译LSD-SLAM遇到错误及解决
  17. DSPE-PEG4-Mal分子式:C56H103N2O15P的分子量介绍
  18. oracle 里面加条件判断,oracle 查询的时候加条件判断
  19. Verilog专题(二十五)Lemmings4
  20. 计算机休眠不播放音乐,电脑没有声音了播放音乐进度条还不会动是怎么回事求...

热门文章

  1. 相同字符串的string对象不等
  2. 如何把Access转成SQL Server的方法介绍
  3. Spring Boot -Shiro配置多Realm 1
  4. “光伏进社区” 应及早谋划布局
  5. C++走向远洋——63(项目二2、两个成员的类模板)
  6. 命令模式--command模式
  7. juc线程池原理(六):jdk线程池中的设计模式
  8. 程序员的艺术:排序算法舞蹈
  9. 引发类型为“System.Windows.Forms.AxHost+InvalidActiveXStateException”的异常 解决
  10. 面向对象——三层架构(表现层、业务层、持久层)