CSS选择器【记录】
1、基本选择器
2、组合选择器
3、伪类选择器
4、伪元素选择器
CSS选择器规定了CSS规则会应用到哪些元素上
1、基本选择器
基本选择器:通配选择器、元素选择器、类选择器、ID选择器、属性选择器
/* 通配选择器、性能最低的一个CSS选择器 */ *{}
/* 元素选择器 */ element{}
/* 类选择器 */ .class{}
/* ID选择器 */ id{}
/* 属性选择器 */ element[attribute]{} element[attribute="value"]{} /* 属性值为value */
element[attribute~="value"]{} /* 属性值有多个,其中一个值为value */
element[attribute|="value"]{} /* 属性值为value或是以value-开头 */ /* 属性值以value开头 */ element[attribute^="value"]{} /* IE7+ */
/* 属性值以value结尾 */ element[attribute$="value"]{} /* IE7+ */
/* 属性值包含value */ element[attribute*="value"]{} /* IE7+ */
2、组合选择器
组合选择器:后代选择器、子选择器、相邻兄弟选择器、兄弟选择器
/* 后代选择器 */ element element{}
/* 子选择器 */ element > element{}
/* 相邻兄弟选择器 */ element + element{}
/* 兄弟选择器 */ element ~ element{} /* IE7+ */
3、伪类选择器
伪类允许基于未包含在文档树中的状态信息来选择元素
/* 未访问 */ element:link{}
/* 已访问 */ element:visited{} /* 出于隐私原因,可以使用此选择器修改的样式非常有限,允许使用的CSS属性为color、background-color、border-color、outline-color */
/* 悬停 */ element:hover{}
/* 点击 */ element:active{}
/* 输入焦点 */ element:focus{} /* 基于元素语言来匹配页面元素 */ element:lang(f){}
/* 匹配不符合参数选择器描述的元素 */ element:not(s){} /* IE9+ */
/* 匹配文档树的根元素 */ element:root{} /* IE9+ */ element:first-child{}
element:last-child{} /* IE9+ */
element:only-child{} /* IE9+ */
element:nth-child(n){} /* IE9+ */
element:nth-last-child(n){} /* IE9+ */ element:first-of-type{} /* IE9+ */
element:last-of-type{} /* IE9+ */
element:only-of-type{} /* IE9+ */
element:nth-of-type(n){} /* IE9+ */
element:nth-last-of-type(n){} /* IE9+ */ /* 空元素 */ element:empty{} /* IE9+ */
/* 选中状态 */ element:checked{} /* IE9+ */
/* 可用状态 */ element:enabled{} /* IE9+ */
/* 禁用状态 */ element:disabled{} /* IE9+ */
/* 锚点指向的元素为目标元素,:target伪类用于选取当前激活的目标元素 */ element:target{} /* IE9+ */
<style>
#demo:target{ color:#f00; }
</style> <a href="#demo">#demo</a>
<div id="demo">:target伪类使用方法</div> <a href="https://madmurphy.github.io/takefive.css/">一个基于:target伪类的更为完善的纯-CSS加亮框</a>
4、伪元素选择器
伪元素表示所有未被包含在HTML的实体
CSS3将伪元素选择器前面的单冒号(:)改为双冒号(::)用以区分伪类选择器,但以前的写法仍然有效
/* 用于块级元素第一行的第一个字符 */ element:first-letter{}
/* 用于块级元素第一行的第一个字符 */ element::first-letter{} /* IE9+ */ /* 用于块级元素第一行 */element:first-line{}
/* 用于块级元素第一行 */element::first-line{} /* IE9+ */ element:before{}
element::before{} /* IE9+ */
element:after{}
element::after{} /* IE9+ */ element::-moz-selection{}
element::selection{} /* IE9+ */
/* 用于文档中被用户高亮的部分,只有一小部分CSS属性可以用于::selection选择器:background-color、color、text-decoration、text-shadow、outline、cursor */ element::-webkit-input-placeholder{}
element::-moz-placeholder{}
element:-ms-input-placeholder{} /* IE10+ */
element::placeholder{}
CSS选择器【记录】的更多相关文章
- CSS选择器的一些记录
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- 【CSS选择器】理解汇总和记录
1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...
- [css选择器]总结:IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- CSS选择器 + Xpath + 正则表达式整理(有空再整理)
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- 牢记 31 种 CSS 选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- 一个容易被忽视的css选择器
之前学的的迷糊了,也不知道什么会什么不会了,跑去面试了.别人列出一堆css选择器,本以为选择器没啥的,结果到那个多类选择器翻车了,.a.b选择同时含a,b类名的,很尴尬所以回来仔细整理了一下.目前根据 ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
随机推荐
- .net的服务转移
问题: 服务器换新,但是本来服务器部署了一些window服务,需要迁移过来 解决过程: 百度了估计几百页了,之前因为老机器挂了,写这个代码布服务的人也早就不在了,所以自己闷头苦找,一个java初级程序 ...
- 彻底填平Static坑(细节决定成败)
static 学习的过程就是填坑的过程,可不要偷懒想着跳过去,你现在跳过去,就相当于给自己挖了一个坑,你迟早会掉进去的,为了避免不掉坑,所以,努力填坑吧! 一.如果没有static会怎样? 需求: 1 ...
- 什么 是JavaScript中的字符串类型之间的转换问题详解? 部分4
字符串类型 单双引号都可以!建议使用单引号!(本人建议:个人觉得单个字符串更利于网页优化@特别地方特别处理!); 判断字符串的长度获取方式:变量名.length html中转义符: < < ...
- 使用以下映射将包含A-ZIS的字母的消息编码为数字:'A' - > 1,'B' - > 2 ...'Z' - > 26 给定包含数字的编码消息,确定解码方式的总数(python)(原创)
题目:有一种将字母编码成数字的方式:'a'->1, 'b->2', ... , 'z->26'.现在给一串数字,给出有多少种可能的译码结果. 实现逻辑: 1,使用队列的数据类型,每一 ...
- Git基本命令 -- 基本工作流程 + 文件相关操作
可以先找一个已经被git管理的项目, 我就使用这个项目吧: https://github.com/solenovex/ID3-Editor 基本工作流程 克隆以后呢, 进入该目录查看一下状态: 然后添 ...
- Google Chrome 书签导出并生成 MHTML 文件
目的 因为某些原因需要将存放在 Google Chrome 内的书签导出到本地,所幸 Google Chrome 提供了导出书签的功能. 分析 首先在 Google Chrome 浏览器当中输入 ch ...
- Quartz的使用案例
一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...
- IdentityServer4(9)- 使用OpenID Connect添加用户身份验证(implicit)
本文为 OpenID Connect 简化模式(implicit) 已更新至.NET Core 2.2 在本快速入门中,我们希望通过 OpenID Connect 协议向我们的 IdentitySer ...
- python args kwargs 传递参数的区别
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- RocketMQ源码 — 五、 主要feature及其实现方式
RocketMQ的主要特点以及实现方式 单机支持1万以上持久队列 所有数据单独存储到一个CommitLog,完全顺序写,随机读 在一个broker上一个DefaultMessageStore管理一个c ...