选择器
记录常用选择器方式,验证Q阅支持情况。
元素选择器
按照给定的节点名称,选择所有匹配的元素。
本章中使用元素选择器,为各个选择器标题添加上绿下蓝的边框。
类选择器
按照给定的 class 属性的值,选择所有匹配的元素。
使用该选择器,为“类选择器”四字赋予红色。
ID 选择器
按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
使用该选择器,去除首行缩进,添加1字宽做边框。
属性选择器
按照给定的属性,选择所有匹配的元素。
使用该选择器,去除首行缩进,标题居中。
选择器列表
, 是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
▼
關關雎鳩,在河之洲。窈窕淑女,君子好逑。
參差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,輾轉反側。
參差荇菜,左右采之。窈窕淑女,琴瑟友之。
參差荇菜,左右芼之。窈窕淑女,鐘鼓樂之。
▲
1、3、5楷体,2、4宋体,但都有下划线。
后代组合器
“ ”(空格)组合器选择前一个元素的后代节点。
▼
▲
父元素设置居中,后代节点添加边框,边框距离图片有3个像素的空白。
直接子代组合器
> 组合器选择前一个元素的直接子代的节点。
▼
關關雎鳩,在河之洲。窈窕淑女,君子好逑。
參差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,輾轉反側。
▲
第一行设置居中,并将字色赋予红色。
一般兄弟组合器
~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
▼
表3—2 跨国公司外国来源收入主要类型
资料来源:26 USC. § 862. Income from sources without the United States.
▲
标题和图注都居中,图注文字为蓝色且字号小于正文。
紧邻兄弟组合器
+ 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
▼
- Mix flour, baking powder, sugar, and salt.
- In another bowl, mix eggs, milk, and oil.
- Stir both mixtures together.
- Fill muffin tray 3/4 full.
▲
第3行文本变为粉色。第2行右边有1字宽边框。
伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
左右1字边框,下面1像素边框,文本居中。
伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
上一段如果支持伪选择器,会有红色括号括住。