CSS--选择符大全(常用css选择符)

(一)元素选择符

  1. E(某个元素,如p)
  2. id(使用id,如#idName)
  3. class(使用class,如.myclass)
  4. 通配符:*

(二)关系选择符

  1. 包含选择符:E F(E所有的F包含子代,孙代,子子孙孙等等)
  2. 子选择符:E<F(与包含不同的是,子选择符仅限于子代)
  3. 相邻选择符:E F(和E相邻的F,相隔一个都不算)
  4. 兄弟选择符:E~F(和E同级的F的算)

(三)属性选择符:

  1. E[att](E中带有某个att属性的元素)
  2. E[att="val"] (E中带有att且值为val的元素)
  3. E[att~="val"] (E中包含att属性,中存在val值)
  4. E[att^="val"] (E中att属性值以val开头的元素)
  5. E[att$="val"] (E中att属性值为以val结尾的元素)
  6. E[att*="val"] (E中att属性值为包含val字符的元素)
  7. E[att|=="val"] (E中att属性值为val 或者是val-连接的字符串)

(四)伪类选择符

(基于元素某种特性定义的类,伪类通俗点就你不需要再自己定义class,直接使用即可)

  1. E:link (a元素没有被访问时)
  2. E:visited (a元素已经被访问了)
  3. E:hover (鼠标悬浮在元素时)
  4. E:active (鼠标点击到释放时)
  5. E:focus (元素成为输入焦点时)
  6. E:lang(fr) (匹配使用特殊语言)
  7. E:not(s) (匹配没有s样式的元素E)
  8. E:root (匹配E的根元素)
  9. E:first-child (匹配父元素第一个子元素E)
  10. E:last-child(css3) (匹配父元素的最后一个子元素E)
  11. E:only-child(匹配父元素仅有的元素E)
  12. E:nth-child(n)(匹配父元素第n个子元素E)
  13. E:nth-last-child(n)(匹配父元素倒数第n个子元素E)
  14. E:first-of-type(匹配同类型第一个同级兄弟元素E)
  15. E:empty(匹配没有任何子元素(包括text节点)的E)
  16. E:checked:(匹配处于选中状态的元素E,input的radio与checkbox)
  17. E:enabled :(匹配处于可用状态的元素E)
  18. E:disabled: (匹配处于不可以状态的元素E)
  19. E:target: (匹配相关url执行的E元素)

(五)伪对象选择符

  1. E:first-letter (首字下沉)
  2. E:first-line (第一行样式)
  3. E:before (设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性)
  4. E:after (设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性)
  5. E::placeholder (设置input占位符的样式)
  6. E::selection (设置文本被选择时的样式)

本篇是个人笔记,可经常看看。
向前走,也别忘记要多回顾

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

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

相关文章

51nod 1384 全排列

直接使用STL函数就可以 AC代码&#xff1a; #include<bits/stdc.h>using namespace std;int main(){ char a[100]; int n; while(cin>>a) { int nstrlen(a); sort(a,an); do { cout<<a<<endl; }while(next_permutation(a,an)); } return 0;} 转载于:ht…

bzoj4709 [Jsoi2011]柠檬

Description Flute很喜欢柠檬。它准备了一串用树枝串起来的贝壳&#xff0c;打算用一种魔法把贝壳变成柠檬。贝壳一共有\(N(1\le N\le 100000)\)只&#xff0c;按顺序串在树枝上。为了方便&#xff0c;我们从左到右给贝壳编号 \(1...N\) 。每只贝壳的大小不一定相同&#xff0c…

确保任务的执行顺序

有时有必要对线程池中的任务施加一定的顺序。 JavaSpecialists通讯的第206期提出了一种这样的情况&#xff1a;我们有多个连接&#xff0c;使用NIO可以从中读取。 我们需要确保给定连接中的事件按顺序执行&#xff0c;但是不同连接之间的事件可以自由混合。 我想提出一个类似但…

西瓜大战java_Java中的线程及(简单飞机大战)实现

在讲到线程之前我们先聊一下程序&#xff0c;进程&#xff0c;线程这三者的概念&#xff1a;程序是指为了实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合。程序存储在磁盘上&#xff0c;由一系列的文件数据组成。进程&#xff1a;程序运行起来之后就是一个进程…

transition

一、语法 transition: property duration timing-function delay transition属性是个复合属性&#xff0c;她包括以下几个子属性&#xff1a; transition-property &#xff1a;规定设置过渡效果的css属性名称transition-duration &#xff1a;规定完成过渡效果需要多少秒或…

CentOS服务器

CentOS搭建Wordpress 这是一个很有趣的学习链接&#xff1a;https://cloud.tencent.com/developer/labs/lab/10001 可以亲自动手试试,当你联系完之后&#xff0c;还有阅读文档&#xff0c;可以保存记录下来。 登录linux服务器搭建Wordpress用到的命令 登录服务器 登录服务器 s…

rust tpa_Rust(腐蚀)怎么tp求大神指教。请写在下面

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼拆除自己建筑的建筑:/removetp到别人旁边:/tpr 游戏名字接受别人tp:/tpa创造战队:/clan create 战队名字 战队简介(这东西没什么卵用)邀请成员加入战队:/clan invite 游戏名字接受邀请进入战队:/clan join 战队名字查看战队成员:/c…

图解在VC里使用graphics.h画图(相似TC)

1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图&#xff1b; 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> // 引用图形库 #include <conio.h> void main() {initgraph(640, 480); // 初始化画图窗体circle(200, 200, 100…

使用SwingWorker的Java Swing中的多线程

如果要使用Swing用J​​ava编写桌面或Java Web Start程序&#xff0c;您可能会觉得需要通过创建自己的线程在后台运行某些东西。 没有什么可以阻止您在Swing中使用标准的多线程技术&#xff0c;并且需要遵循通常的注意事项。 如果您有多个线程访问相同的变量&#xff0c;则需要…

微信小程序之阻止冒泡事件

众所周知&#xff0c;在微信小程序给标签绑定点击方法大家都会想到 "bindtap" 但是在页面中会遇到 点击 会冒泡而触发其他元素的时间发生 那么怎么办呢 就把引发冒泡事件的始作俑者的 bindtap 更改成catchtap 即可 转载于:https://www.cnblogs.com/wzy0526/p/8423989…

MySql Jar 包下载

MySql JAR 包下载 我们要使用Spring 链接MySql 需要两个Jar 包 一个是C3p0 一个是MySql 的Connection Jar 包 C3p0&#xff1a; 进入下面的网址 http://www.mchange.com/projects/c3p0/ 按照黄色的指示 下载 2. MySql Jar 包 进入MySql 官网 https://dev.mysql.com/down…

c语言以空格分割字符串_c语言中,输入任意字符串,任意空格隔开

c语言中,输入任意字符串,任意空格隔开关注:132 答案:3 mip版解决时间 2021-01-27 16:01提问者更无风月2021-01-27 01:51如题,希望大神代码最佳答案二级知识专家闪光的男人2021-01-27 02:50用scanf以%s读入字符串&#xff0c;即可实现输入以空格分隔的字符串。以下代码功能为&…

Unity经典游戏教程之:是男人就下100层

版权声明&#xff1a; 本文原创发布于博客园"优梦创客"的博客空间&#xff08;网址&#xff1a;http://www.cnblogs.com/raymondking123/&#xff09;以及微信公众号"优梦创客"&#xff08;微信号&#xff1a;unitymaker&#xff09;您可以自由转载&#x…

使用Flying-Saucer生成PDF中的条形码

Flying-Saucer是一个不错的库&#xff0c;可以从Java应用程序中生成PDF文档。 只需生成一堆XHTML&#xff0c;然后将其放入渲染器中&#xff0c;然后使用iText生成所需的文档即可。 但是&#xff0c;当涉及条形码时&#xff0c;Flying-Saucer无法访问iText的内置条形码功能&am…

Html和websocket初识

一、web框架 众所周知&#xff0c;对于所有的Web应用&#xff0c;本质上其实就是一个socket服务端&#xff0c;用户的浏览器其实就是一个socket客户端。 import socketdef handle_request(client):buf client.recv(1024)client.send(b"HTTP/1.1 200 OK\r\n\r\n")cli…

java lombok 视频_Java开发神器Lombok使用详解

最近正在写SpringBoot系列文章和录制视频教程&#xff0c;每次都要重复写一些Getter/Setter、构造器方法、字符串输出的ToString方法和Equals/HashCode方法等。甚是浪费时间&#xff0c;也影响代码的可读性。因此&#xff0c;今天就给大家推荐一款Java开发神器——Lombok&#…

11-[函数进阶]-闭包

1.什么是闭包&#xff1f; 内部函数对外部函数作用域里变量的引用&#xff08;非全局变量&#xff09;&#xff0c;则称内部函数为闭包。 def outer():n 10def inner():print("inner:", n)return innerval outer() print(val) val() 闭包的意义&#xff1a;返回的…

Java应该是更高级别还是更低级别?

总览 Java 8带来了许多简化的功能&#xff0c;例如Lambda表达式&#xff0c; 类型注释和虚拟扩展 。 尽管此功能很重要&#xff1a;a&#xff09;有价值&#xff0c;b&#xff09;赶上较凉的语言&#xff0c;但是这些更丰富&#xff0c;更高级的功能是Java应当重点关注的领域。…

django开发者模式中的autoreload是怎样实现的

在开发django应用的过程中&#xff0c;使用开发者模式启动服务是特别方便的一件事&#xff0c;只需要 python manage.py runserver 就可以运行服务&#xff0c;并且提供了非常人性化的autoreload机制&#xff0c;不需要手动重启程序就可以修改代码并看到反馈。刚接触的时候觉得…

html5与css3入门知识点精炼

<meta name "keywords" content"…………"/>&#xff08;网页搜索时要输入的关键字&#xff09;<meta name "author" content "作者的名字"<meta http-equiv "refresh" content "跳转的时间 ; URL跳转…