CSS3选择器

基本选择器

  • 回顾选择器
    • 通配符选择器
    • 元素选择器
    • 类选择器
    • ID选择器
    • 后代选择器
  • 新增基本选择器
    • 子元素选择器
    • 相邻兄弟选择器
    • 通用兄弟选择器
    • 群组选择器

子元素选择器

概念:子元素选择器只能选择某元素的子元素

语法:父元素 > 子元素 (Father>Children)

兼容性:IE8 、Firefox、Chrome、Safari、Opera

相邻兄弟元素选择器

概念:相邻兄弟选择器可以选择紧接在另一个元素后的元素,而且她们具有同一个相同的父元素

语法格式:元素 兄弟相邻元素 (Element Sibling)

兼容性:IE8 、Firefox、Chrome、Safari、Opera

通用兄弟选择器

概念:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素

语法格式:元素 ~ 后面所有兄弟相邻元素 (Element ~ Siblings)

兼容性:IE8 、Firefox、Chrome、Safari、Opera

群组选择器

概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开

语法格式:元素1,元素2.....,元素n

兼容性:IE6 、Firefox、Chrome、Safari、Opera

Element[attribute]

概念:选择所有带有attribute属性的元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute="value"]

概念:选择所有使用 attribute="value"的元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute~="value"]

概念:选择attribute属性包含单词“value”的元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute^="value"]

概念:选择attribute属性值以“value”开头的所有元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute$="value"]

概念:选择attribute属性值以“value”结尾的所有元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute*="value"]

概念:选择attribute属性值包含“value”的所有元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element[attribute|="value"]

概念:选择attribute属性值为“value”或以“value-”开头的元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

伪类选择器

  • 动态伪类
  • UI元素状态伪类
  • CSS3结构类
  • 否定选择器
  • 伪元素

动态伪类

这些伪类不存在于HTML中,只有当用户和网站交互的时候才能体现出来

  • 锚点伪类
    • :link
    • :visited
  • 用户行为伪类
    • :hover
    • :active
    • focus

UI元素状态伪类

概念:把":enabled",":disabled",":checked"伪类称为UI元素状态伪类

兼容性:IE9 、Firefox、Chrome、Safari、Opera

:nth选择器

我们把css3的:nth选择器也成为CSS3结构类

选择方法:

  • :first-child
  • :last-child
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-child
  • :only-of-type
  • :empty

Element:first-child

概念:选择属于其父元素的首个子元素每个Element元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element:last-child

概念:选择属于其父元素的最后一个子元素Element元素

兼容性:IE8 、Firefox、Chrome、Safari、Opera

Element:nth-child(N)

概念::nth-child(N)选择器匹配属于其父元素的第N个子元素,不论元素的类型

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

关于参数(N)

  • Element:nth-child(number) ———— 选择某元素下的第number个element元素

  • Element:nth-child(n) ———— n是一个简单表达式,取值从”0“开始计算。这里只能是"n",不能是其他字母代替

  • Element:nth-child(odd)、Element:nth-child(even) ———— odd和even是可用于匹配下标是奇数偶数的element元素的关键字(第一个下标是1)

Element:nth-last-child(N)

概念:匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

Element:nth-last-of-type(N)

概念:匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

Element:last-of-type(N)

概念::last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

Element:only-child(N)

概念::only-child 选择器匹配属于其父元素的唯一子元素的每个元素

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

Element:only-of-type(N)

概念::only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

Element:empty

概念::empty 选择器匹配没有子元素(包括文本节点)的每个元素

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

否定选择器

概念::not(Element/Selector)选择器匹配非指定元素/选择器的每个元素

语法格式:

父元素:not(子元素|子选择器)(Father:not(Children|selector))

兼容性:IE9 、Firefox4 、Chrome、Safari、Opera

伪元素

伪元素 ———— Element::first-line

概念:根据”first-line“伪元素中的样式对element元素的第一行文本进行格式化

说明:”first-line“伪元素只能用于块级元素

伪元素 ———— Element::first-letter

概念:用于向文本的首字母设置特殊样式

说明:”first-letter“伪元素只能用于块级元素

伪元素 ———— Element::before

概念:在元素的内容前面插入新内容

说明:常用content配合使用

特点:

  • 永远是第一个子元素
  • 行级元素
  • 内容通过content写入
  • 标签中找不到对应的标签

伪元素 ———— Element::after

概念:在元素的内容后面插入新内容

说明:常用content配合使用,多用于清除浮动

伪元素 ———— Element::selection

概念:用于设置在浏览器中选中文本后的背景与前景色

兼容性说明:

::selection
在IE家族中,只用IE9 版本支持,在firefox上要添加前缀
-moz

CSS权重

  • 什么是权重

当很多规则被应用到某一个元素上时,权重是一个决定那种规则生效,或者是优先级的过程

  • 权重等级与权值

行内样式(1000)>ID选择器(100)> 类、属性选择器和伪类选择器(10)> 元素和伪元素(1)> *(0)

  • 权重计算口诀

从0开始,一个行内样式 1000,一个ID 100,一个属性选择器、class或者伪类选择器 10,一个元素名或者伪元素 1

本文转载于:猿2048➝https://www.mk2048.com/blog/blog.php?id=b1kj20j&title=CSS3选择器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

eclipse java工程目录_转载:Eclipse下的java工程目录

对新手来讲,一个Java工程内部的多个文件夹经常会让大家困惑。更可恶的是莫名其妙的路径问题,在Eclipse编写Java程序中,出现频率最高的错误很可能就是路径问题。这些问题原因其实都是一个,就是关于Java工程内的文件结构理解不清&am…

作为JBoss AS 7模块运行Drools 5.4.0 Final

Drools 5引入了业务逻辑集成平台,该平台为规则,工作流和事件处理提供了统一的集成平台。 它是从头开始设计的,因此每个方面都是一流的公民,毫不妥协。 Drools 5已分为4个主要子项目: Drools Guvnor(BRMS …

postgres 支持的线程数_线程池被打满了怎么处理呢,你是否真的了解线程池?

0、前言线程池,顾名思义就是线程的池子,在每次需要取线程去执行任务的时候,没必要每次都创建新线程执行,线程池就是起着维护线程的作用,当有任务的时候就取出一个线程执行,如果任务执行完成则把线程放回到池…

[树形DP]没有上司的舞会

题目链接 思考 首先本题中的关系是一种树形结构,而且符号最优子结构和无后效性,所以可以进行记忆化搜索。 那么首先要在这颗树中选出一个点作为根节点,按照习惯我们将没有父节点的点作为根节点。 接下来要思考的是 状态: dp[i][0…

网页自适应

1.viewport标签 基本语法&#xff1a; <meta name”viewport” content”widthdevice-width,initial-scale1” /> 上面这行代码的意思是&#xff0c;面积的100%&#xff0c;网页宽度默认等于屏幕宽度&#xff08;widthdevice-width&#xff09;, 原始缩放比例&#x…

java 大数处理

头文件&#xff1a;import java.util.*;import java.math.*; Scanner cin Scanner (System.in);//读入while(cin.hasNext())//等价于!EOFncin.nextInt();//读入一个int型的数ncin.nextBigInteger();//读入一个大整数 输出&#xff1a; System.out.print(n);//打印nSystem.out.…

java provider_Java SPI(Service Provider Interface)

//ServiceLoader实现了Iterable接口&#xff0c;可以遍历所有的服务实现者public final class ServiceLoaderimplements Iterable{//查找配置文件的目录private static final String PREFIX "META-INF/services/";//表示要被加载的服务的类或接口private final Clas…

带有自定义注释的Java注释教程

Java注释提供有关代码的信息&#xff0c;并且它们对所注释的代码没有直接影响。 在本教程中&#xff0c;我们将学习Java注释&#xff0c;如何编写自定义注释 &#xff0c;注释用法以及如何使用反射来解析注释 。 注释是在Java 1.5中引入的&#xff0c;现在它已在Hibernate&…

mybatis通用mapper_全网最全Mapper解析,附实操代码帮你更好理解

今天给大家介绍一位老朋友当你第一次接触Java开发的时候&#xff0c;这个老朋友就和你形影不离&#xff0c;当你要进行ORM的时候&#xff0c;单表的增删改查&#xff0c;这位老朋友给了你极大的帮助&#xff0c;不知道你想到他了吗&#xff1f;对&#xff0c;这就是通用mapper&…

初尝微信小程序2-基本框架

基本框架&#xff1a; .wxml &#xff1a;页面骨架 .wxss &#xff1a;页面样式 .js &#xff1a;页面逻辑 描述一些行为 .json &#xff1a;页面配置 创建一个小程序之后&#xff0c;app.js,app.json,app.wxss是必须的&#xff0c;而且名字也不能随意更改&#xff0c;…

JSP内置对象,动作,指令总结

总的来说关于JSP界面有九大内置对象,7大动作,三大指令,现在博主就将这些粘贴出来,此文是很久前整理的学习笔记,如有雷同请谅解! jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String getParameter…

洛谷 P1795 无穷的序列_NOI导刊2010提高(05)

P1795 无穷的序列_NOI导刊2010提高&#xff08;05&#xff09; 题目描述 有一个无穷序列如下&#xff1a; 110100100010000100000… 请你找出这个无穷序列中指定位置上的数字 输入输出格式 输入格式&#xff1a;第一行一个正整数N&#xff0c;表示询问次数&#xff1b; 接下来的…

java 取字符串中的数字_java截取字符串中的数字

随便给你一个含有数字的字符串&#xff0c;比如&#xff1a;String s"eert343dfg56756dtry66fggg89dfgf";那我们如何把其中的数字提取出来呢&#xff1f;大致有以下几种方法&#xff0c;正则表达式&#xff0c;集合类&#xff0c;还有就是String类提供的方法。1 Stri…

番石榴的对象类:Equals,HashCode和ToString

如果您有幸使用JDK 7 &#xff0c;那么新的可用Objects类 &#xff08; 至少对我来说 &#xff09;是实现“通用” Java对象方法&#xff08;例如equals&#xff08;Object&#xff09; [with Objects.equals&#xff08;Object&#xff0c;Object &#xff09; ]&#xff0c; …

此服务器的时钟与主域控制器的时钟不一致_中移动“超高精度时间同步服务器”开标,两家中标...

8月25日&#xff0c;中国移动发布《2020年至2022年同步网设备集中采购_中标候选人公示》公告。两家中标。同步网技术比较小众&#xff0c;但是同步网是5G承载网的重要一环&#xff0c;分享一下&#xff0c;供大家参考。中标情况 标包1-时钟同步设备中标候选人依次排序为&#x…

java 异常管理员_GitHub - kangZan/JCatch: Exception异常管理平台,支持Java、PHP、Python等多种语言...

什么是JCatch当程序发生异常(Exception)&#xff0c;处理方式一般是通过日志文件记录下来&#xff0c;这种方式很容易被忽略&#xff0c;而且查询起来比较麻烦。JCatch提供了一种方案&#xff0c;当程序发生异常时&#xff0c;通过JCatch平台接口提交到JCatch平台&#xff0c;由…

oled

gnd、vcc、clk、miso、rst、mosi、cs 转载于:https://www.cnblogs.com/scrazy/p/7892733.html

使用html css js实现计算器

使用html css js实现计算器&#xff0c;开启你的计算之旅吧 效果图&#xff1a; 代码如下&#xff0c;复制即可使用&#xff1a; <!DOCTYPE html><html lang"en"> <head> <meta charset"utf-8"> <style> /* 主体 */ .co…

面向对象的三个基本特征

面向对象的三个基本特征是&#xff1a;封装、继承、多态。封装 封装最好理解了。封装是面向对象的特征之一&#xff0c;是对象和类概念的主要特性。封装&#xff0c;也就是把客观事物封装成抽象的类&#xff0c;并且类可以把自己的数据和方法只让可信的类或者对象操作&#xff…

Spring构造函数注入和参数名称

在运行时&#xff0c;除非在启用了调试选项的情况下编译类&#xff0c;否则Java类不会保留构造函数或方法参数的名称。 这对于Spring构造函数注入有一些有趣的含义。 考虑以下简单的类 package dbg; public class Person {private final String first;private final String …