学习笔记 CSS权威指南 第2章 选择符

冉娃娃cq
170 阅读7分钟

第2章 选择符

2.1 样式的基本规则

书上说,以前写样式,只能以类似于style属性这样写,如果要把页面上10个a标签的颜色从黑色换成红色,就得修改十次.好恐怖的样子

2.1.1 元素选择符

  • 在xml中任何标记都可以,html里面,只能是预定义的那些元素

2.2.2 声明和关键字

声明

  • 一条声明 = 一个属性 + : + 一个或多个属性值 + ;

关键字

  • 属性值里面的基本上都是关键字
  • 一般以空格,斜杠分开
h2 { font: large/150% sans-serif; }
a { transition: color, background-color 200ms ease-in 50ms;}

注意

属性或者属性值输错了,这条声明就不会生效啦

2.2 群组

2.2.1 群组选择符

把多个元素选择符写在一起,就是,逗号

h2 { color: red; }
p { color: red; }
// 和上面的等效
h2, p { color: red;}

通用选择符

  • 就是*号
  • 特指度是0-0-0
  • 一般不推荐使用

2.2.2 群组声明

多个选择符写在一起叫群组选择符,多个声明写在一起,就叫群组声明了.....

IE8的兼容问题

  • 老版IE不支持新的HTML5元素
  • 先用js,创建这个元素,然后再应用样式
main: { color: red; } // 在ie6,7,8中不生效

document.createElement('main'); // 这样就会生效了

2.3 类选择符和ID选择符

2.3.1 类选择符

  • 在元素的class属性上加值
  • 在css里,在class属性值前加点即可
<a class="name">

a.name { color: red; }

2.3.2 多个类

<a class="name big">

a.name.big { color: red; font-size: large;}

2.3.3 ID选择符

  • 在元素的id属性里加值
  • 在css里,以id属性值前加#即可
<a id="name">

a#id { color: red; }

2.3.4 在类选择符和ID选择符之间选择

  • 由于DOM脚本的原因,建议id值在整个文档中惟一
  • id选择符不能像类一样串在一起用,因为id的属性值不是空格分开的多个
  • HTML规范里面,类和id的值区分大小写,所以在书写时要注意

2.4 属性选择符

不管是类选择符,还是ID选择符,我们选择的其实都是属性的值.类和ID是专门针对HTML设计的,所以在其他语言中可能根本就不存在类和ID,所以才引入属性选择符

<a title="warning">第1个a元素</a>
<a title="big warning bold">第2个a元素</a>
<a title="bigwarning">第3个a元素</a>
<a title="Warning">第4个a元素</a>

2.4.1 简单属性选择符

a[title]  // => 选中3个

2.4.2 根据精准的属性值选择

a[title="warning"] // => 选择第1个

2.4.3 根据部分属性值选择

选择属性以指定字符开头的元素

a[title|="warning"] // => 选中第1个

选择属性中包含以空格分开的某个词的元素

  a[title~="warning"] // => 选中第1,2个

选择属性中包含某个词的元素

  a[title*="warning"] // => 选中第1,2,3个

匹配开头的子串

a[title^="warning"] // => 选中第1个

匹配结尾的子串

a[title$="warning"] // => 选中第1,2,3个

2.4.4 大小写敏感

  • class,ID,title,URL的值区分大小写
  • 在结束的方括号前加上i就不会区分大小写了
a[title="warning i"] // => 选中第1,2,3,4个

2.5 根据文档结构选择

2.5.1 理解父子关系

  • 根元素
    • html
  • 父元素
    • body是p的父元素
  • 祖辈元素
    • body是span的父辈
  • 子元素
    • img是div的子元素
  • 后代元素
    • img是body的后代元素

2.5.2 后代选择符

  • 即空格
  • 两个元素间的改组是无限的
body span { color: red;} // => 选中第4号的span

2.5.2 选择子元素

  • 一个>大于符号
body > span { color: red;} // => 选不中第4行的span

2.5.3 选择紧领同胞

  • 一个加号+
  • 元素之间的文本不影响结构
p + div { color: red; } // => 会选中第2行的div

2.5.4 选择后续同胞

  • 一个波浪号~
  • 比起+来说,范围更广
p + div { color: red; } // => 会选中第2行的div

2.6 伪类选择符

  • 称为幽灵类
  • 是应用在当前元素上的一种样式,只对所依附的元素有效

理解这点非常重要,在应用:first-child这种的时候容易搞混

2.6.1 拼接伪类

  • 和类选择符一样,伪类也可以串联拼接在一起
  • 注意别把互相排斥的伪类弄在一起了
a:link:hover { color: red; } // => 未访且悬停时生效
a:link:visited { color: red; } // => 不生效

2.6.2 结构伪类

选择根元素

  • :root
    • 效果和html一样,但特指度不同

选择空元素

  • :empty
    • 在匹配时,惟一考虑文本的选择符
    • 能够匹配img textarea input等空元素

选择惟一的子代

  • :only-child
    • 列出的元素不一定是父子关系
  • :only-oftype
    • 匹配同胞中惟一的那种元素

选择第一个和最后一个子代

  • :first-child
  • :last-child
  • :first-child:last-child
    • 效果等同于:only-child

选择第一个和最后一个某种元素

  • :first-of-type
  • :last-of-type
  • :first-of-type:last-of-type
    • 效果等同于:only-of-type

选择第n个子元素

公式: an +/- b

  • a整数
  • n整数,表示0, 1, 2, 3到无穷大
  • b整数,可选

例: 3n + 1 表示 1, 4, 7, 10...等

  • :nth-child(1)
    • 效果等同于:first-child
  • :nth-child(2n)
    • 效果等同于:even
  • :nth-child(2n + 1) / :nth-child(2n - 1)
    • 效果等同于:odd
  • a:nth-child(n + 9)
    • 效果等同于a:nth-child(8) ~ a

选择每每次n个某种元素

  • :nth-of-type()

这个有点绕了,并且在实际写代码的过程中,很少有这种需求,就不做笔记啦,遇到有需求的时候,再查文档吧

2.6.3 动态伪类

在页面渲染之后,根据页面的变化而变化.

超链接伪类

  • :link 没有被访问的链接
  • :visited 已经访问过的链接
    • 出于安全原因,已访问的链接只支持和颜色有关的属性

用户操作伪类

  • :focus 获得输入焦点的元素
  • :hover 鼠标位于其上的元素
  • :active 用户输入激活的元素
    • 可应用于超链接,菜单项,以及可设置tabindex属性的元素

推荐的伪类顺序是 link-visited-focus-hover-active

2.6.4 UI状态伪类

启用/禁用元素

  • :enabled/:disabled 接受/禁止输入的元素

选中状态

  • :checked 选中的单选或复选框
  • indeterminate 既没有选,又没有不选......听起来有点绕,,实际就是没点过的单选/复选框

默认选项

  • :default 默认选中的单选或复选框

有效性

  • :valid/invalid 满足/不满足有效性验证的输入框

范围

  • :in-range/out-of-range 在最小值和最大值之间/之外的输入框

TMD为什么不直接取valid就行了

可选性

  • :required/:optional 必须/不必须输入值的输入框

可变性

  • :read-write/:read-only 可以/不可以由用户编辑的输入框

2.6.5 :targe伪类

URL片段标识符指向的目标元素可以使用:target伪类

https://a.com#name

2.6.6 :lang伪类

根据文本所选择的语言选择元素

*:lang(fr)
*[lang|="fr"]

注意这两者的区别,前者通过meta元素或协议也可以识别,后者只支持属性识别

这个在多言语环境下用得着吧,目前我接触的东西,知道有这样一个东西就行了

2.6.7 否定伪类

:not(),选择不满足条件的元素,括号中是简单选择符

适用场景

  • 括号里面可以是一个类型选择符,通用选择符,类选择符,ID选择符或伪类
  • 可以串联,相当于也不是

不适用场景

  • 括号里面不能是祖辈后代关系选择符,不能使用群组,不能使用连续符
  • 不有嵌套

2.7 伪元素选择符

伪类使用一个冒号,伪元素使用两个冒号

所有伪元素只能出现在伪元素最后

2.7.1 装饰首字母

::first-letter

  • 装饰非行内元素的首字母

2.7.2 装饰首行

::first-line

2.7.3 使用限制

注意:这两个有使用限制,一是只能用在块级元素上,可用的CSS元素也有限,具体的需要用的时候再来查文档了

2.7.4 装饰前置和兵团内容元素

::before ::after

其实在17年学这个的时候,这些都看过,但好像在实际码代码的过程中,常用的就那几个......

TODO

2.4.3 |=和^=的区别

avatar
文章
阅读
粉丝