CSS选择器

派小星_
90 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

1 通用选择器

* {​}

效率比较低，尽量少用;

2 简单选择器

id注意事项： 一个HTML文档里面的id值是唯一的，不能重复

  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识

  • 最好不要用标签名作为id值

3 属性选择器

  • 拥有某一个属性 [att]

  • 属性等于某个值 [att=val]

  • 其他的（不用记住）

    • [attr^=val]: 属性值以val开头;

    • [attr*=val]: 属性值包含某一个值val;

4 后代选择器

  • 后代选择器一: 所有的后代(直接/间接的后代)

    选择器之间以空格分割

  • 后代选择器二: 直接子代选择器(必须是直接自带)

    选择器之间以 > 分割;

5 兄弟选择器

  • 兄弟选择器一：相邻兄弟选择器

    使用符号 + 连接

  • 兄弟选择器二: 普遍兄弟选择器

    使用符号 ~ 连接

无论是相邻兄弟选择器还是普遍兄弟选择器，都是往后选，选不到前面的兄弟

6 选择器组 - 交/并集选择器

交集选择器

选择器之间无任何连接符号

如：
p.box1   表示标签名为p，并且 class 名为 box1 的
div#father.box1  表示标签名为 div 并且 id 值为 fahter 并且 类名为 box1 的

并集选择器

选择器间以 , 号分割

.one, .two {}  选中了俩

7 伪类

什么是伪类（Pseudo-classes）

伪类是选择器的一种，它用于选择处于特定状态的元素;

常见伪类

动态伪类

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标挪动到链接上(重要)

a:active 激活的链接（鼠标在链接上长按住未松开）

/* a元素的链接从来没有被访问过 */
a:link {  color: red;}

​/* a元素被访问过了颜色 */
a:visited {  color: green;}

​/* 鼠标悬浮在元素上面 */
a:hover {  color: blue;}​

/* 点下去了, 但是还没有松手 */
a:active {  color: purple;}

使用注意：

  • :hover 必须放在 :link 和 :visited 后面才能完全生效

  • :active 必须放在 :hover 后面才能完全生效

  • 所以建议的编写顺序是 :link、:visited、:hover、:active

:active 通常用在 a、button 元素上

:hover 也能用在其他很多元素上

8 伪元素选择器

  • ::before 和 ::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)

  • 常通过 content 属性来为一个元素添加修饰性的内容。

  • **注意：**伪元素是行内非替换元素，要设置宽高必须用到设置 display 属性

content也可以用 url

avatar
文章
阅读
粉丝