龙空技术网

CSS复合选择器

未来2088 198

前言:

现时咱们对“css复合内容”大致比较看重,朋友们都需要学习一些“css复合内容”的相关知识。那么小编在网摘上汇集了一些有关“css复合内容””的相关资讯,希望你们能喜欢,姐妹们快快来学习一下吧!

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

志同道合的小伙伴跟我一起学习交流哦!

第二阶段 CSS307 CSS复合选择器

1 交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special

记忆技巧:

交集选择器是并且的意思。即……又……的意思

比如:p.one选择的是:类名为one的段落标签。

用的相对来说比较少,不太建议使用。

2 并集选择器

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器i选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧:

并集选择器和的意思,就是说,只要逗号隔开的,所有选择器都会执行后面样式。

比如.one,p,#test{color;#F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

3 后代选择器

后代选择器又称为包含选择器,用来选元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。

4 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。

白话:这里的子指的是亲儿子不包含孙子重孙子之类。

比如:.demo>h3{color:red;}说明h3一定是demo的亲儿子。demo元素包含h3

5 课堂练习-测试选择器

在不修改以上代码的前提下,完成以下任务:

1.链接登录的颜色为红色同时主导航栏里面的所有的链接改为蓝色(简单)

2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。(中等)

3.主导航栏里面的一级菜单链接文字颜色为绿色。(难)

6 属性选择器(一)

7 属性选择器(二)

8 伪元素选择器(一)

E::first-letter文本的第一个单词或字(如中文、日文、韩文等)

E::first-line文本第一行;

E::selection可改变选中文本的样式;

伪元素用双冒号来开始,跟之前学的来对比下:

.demo 类选择器,一个点

:first-child 伪类选择器,两个点

::first-letter 伪元素选择器,四个点

9 伪元素选择器(二)

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合 content属性使用。

E:after、E:before在旧版本里是伪元素,CSS3的规范里”:”用来表示伪类,”::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E:after、E:before,这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解

“:"与"∷"区别在于区分伪类和伪元素

效果是:俺今年18岁

before和 after在盒子div的内部前面插入或者是内部后面插入

10 CSS书写规范

开始就形成良好的书写规范,是你专业化的开始。

空格规范

【强制】选择器与 { 之间必须包含空格。

示例:.selector { }

【强制】属性名与之后的:之间不允许包含空格

:与属性值之间必须包含空格

示例:font-size:12px;

选择器规范

【强制】当一个rule包含多个 selector时,每个选择器声明必须独占一行。

示例:

.post,

.page,

.comment {

line-height: 1.5;

}

【建议】选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。

示例:

.comment .avatar {}

【强制】属性定义必须另起一行。

示例:

.selector {

margin: 0;

padding: 0;

}​

【强制】属性定义后必须以分结尾。如上

看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

本章已结束,下篇文章将分享《08 CSS背景及应用》小伙伴们不要错过哟!

标签: #css复合内容