文档章节

【css技术指南笔记】 第二章 选择器 伪类

郑二
 郑二
发布于 2015/03/25 18:48
字数 522
阅读 38
收藏 0
点赞 0
评论 0

选择器

<div>
    <h2>An H2</h2>
    <p>This is paragraph</p>
    <p>Paragraph 2 has <a href="#">a link</a></p>
    <a href="#">Link</a>
</div>


  1. 子选择符:div>a ; 结果:<a>Link</a>,意思是只能选中所有的儿子,而不包括所有的孙子

  2. 紧邻同胞选择符:h2+p ;结果:<p>This is paragraph</p>

  3. 一般同胞选择器:h2~a;结果:<a>Link</a>,选中在 h2 之后的兄弟(同辈元素),在 h2 之前的 a 是不会被选中的

  4. 通用选择器:div * a;结果<a>a link</a>,选中 div 的孙子 a

  5. 属性选择符:a[href] 选中 a 标签有 href 属性的

    1. a[href="#"] 选中 a 标签 href 属性为#的

伪类

分为两种:1、UI 伪类,某种状态,例如 a 鼠标悬停;2、结构化伪类,例如某组元素第一个或最后一个

  • UI 伪类;一个冒号 : 表示伪类,两个冒号 :: 表示 CSS3 新增的伪类

    • 链接伪类,如果需要使用多个,尽量按照 l v h a 的顺序:

      • a:link 普通状态,等待被点击

      • a:visited 已经点击过(访问过)

      • a:hover 鼠标悬停

      • a:active 正在被点击,鼠标按下的状态

    • :focus 伪类,获得元素焦点时,input:focus{border:2px solid #444;}

    • :target,例:

      • #more_info:target{background:#eee;}

      • <h2 id="more_info">This is the information you are looking for.</h2>

      • 当浏览器的链接为 smartisan.com#more_info 时,则h2的背景则会变成 #eee

  • 结构化伪类:

    • :first-child :last-child

      • li:first-child 选中的是 li 组中的第一个 li,而不是 li 的第一个孩子

    • nth-child 

      • li:nth-child(2) 选中第二个 li,计数不是从0开始的

      • li:nth-child(odd) 奇数列,li:nth-child(event) 偶数列

  • 伪元素,!伪元素的信息不会被搜索引擎获得

    • p::first-letter{font-size:200%;} 将 p 中的第一个字符选中,效果:abc

    • p::first-line{font-variant:samll-caps;} 将 p 中的第一行全变为大写,不同浏览器尺寸第一行都是不一样的

    • ::before ::after

      • <p class="age">24</p>

      • p.age::before{content:"Age: ";}

      • p.age::after{content:" years."}

      • 结果:Age: 24 years.


© 著作权归作者所有

共有 人打赏支持
郑二
粉丝 0
博文 18
码字总数 4318
作品 0
朝阳
程序员
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac ⋅ 2011/12/02 ⋅ 1

HTML CSS笔记列表与表格

加粗: b strong 换行: 安全换行 倾斜: i em 删除: s del 下划线: u ins 小号字体: 小号 上标: 1 下标: 2 添加双引号: 双引号 引用标题: 引用标题ppp ×...

菜鸟不菜么 ⋅ 05/01 ⋅ 0

第二章 jQuery选择器

锋利JQuery 第二章 jQuery选择器 2.1 jQuery选择器是什么 1.CSS选择器 表2-1 常用的CSS选择器 选择器 语法 描述 示例 标签选择器 E{ CSS规则 } 以文档元素作为选择符 td{ font-size:14px; wi...

LuXing ⋅ 2014/04/07 ⋅ 0

HTML&CSS基础学习笔记1.30-选择器是什么

选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法。 选择器主要分为:元素标签选择器、通用选择器、类选择器、ID选择器、属性选择器、组合选择器、伪类选择器、伪元素选择器...

MayaTeacher ⋅ 2016/09/20 ⋅ 1

CSS3.0学习笔记

#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链...

崔林 ⋅ 2013/06/24 ⋅ 0

2018-05-24 CSS选择器和优先级计算

一、CSS的三大特性? 1.1 继承:子类能够继承父类的某些样式 1.2 优先级:不同选择器定义的样式具有不同的优先级数量 1.3 层叠:当优先级数量相同时,后面定义的样式的覆盖前面定义的样式 二...

瑾瑜爱上猫 ⋅ 05/24 ⋅ 0

CSS选择器笔记

去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选...

阮一峰 ⋅ 2009/03/12 ⋅ 0

Less-学习笔记

这是less官网的介绍: http://www.1024i.com/demo/less/document.html 大家都是在一起学习,最好的地方无疑就是官网,不过每个人学习方式和基础不同,以至于学完后掌握才会出现差异 开源中国...

透笔度 ⋅ 2015/10/16 ⋅ 0

CSS选择器笔记

阮一峰 发表于 2009年03月12日 去 年我学jQuery 的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

第4章--对链接应用样式

简单的链接样式 Css 的两个特殊的选择器,称为链接伪类选择器 1.:link伪类选择器用来寻找没有被访问过的链接, 2.:Visited伪类选择器用来寻找被访问过的链接 可以用来对链接应用样式的另外两...

Q_z ⋅ 2014/02/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部