文档章节

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

郑二
 郑二
发布于 2015/03/25 18:48
字数 522
阅读 38
收藏 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 CSS笔记列表与表格

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

菜鸟不菜么
05/01
0
0
《HTML+CSS3权威指南》笔记摘要 - 目录

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

Contac
2011/12/02
0
1
HTML&CSS基础学习笔记1.30-选择器是什么

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

MayaTeacher
2016/09/20
10
1
2018-05-24 CSS选择器和优先级计算

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

瑾瑜爱上猫
05/24
0
0
HTML5开发手机App之:CSS全教程-何韬-专题视频课程

HTML5开发手机App之:CSS全教程—20784人已学习 课程介绍 全面解读CSS2,CSS3以及CSS布局模式等各项知识点,深入系统了解CSS能够实现的各种功能并加以灵活运用。 课程收益 使致力于开发Web前...

pkutao
2016/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
15分钟前
0
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
18分钟前
2
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部