前端-CSS3学习笔记二

最新推荐文章于 2023-06-17 11:36:12 发布

钟离酉月

最新推荐文章于 2023-06-17 11:36:12 发布

阅读量595

点赞数

分类专栏：前端-CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45068245/article/details/122201775

版权

前端-CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了CSS3中的选择器，包括复合选择器、关系选择器、属性选择器、伪类选择器和伪元素。内容涵盖交集选择器、并集选择器、子元素和后代元素的选择，以及属性选择器的各种匹配方式。此外，还讲解了超链接的四种伪类状态和样式的继承原则。最后提到了选择器权重的概念，解析了如何解决样式冲突。

摘要由CSDN通过智能技术生成

日期：2021/12/27

所看视频链接：B站尚硅谷

内容：

P31_复合选择器

1.交集选择器
        作用：选中同时符合多个条件的元素
        语法：选择器1选择器2选择器3选择器n{}
        例子：

		div.red{
			color:blue;
		}

将class为red的div中字体颜色设置为为blue

		.a.b.c{
			color：green；
		}

                        将class为a、class为b、class为c的字体设置为green
注：交集选择器中如果有元素选择器，必须使用元素选择器开头
2.并集选择器（选择器分组）
        作用：同时选择多个选择器对应的元素
        语法：选择器1，选择器2，选择器3，选择器n{}
        例子：

		#b1，h1,.p1,span,div.red{}

P32_关系选择器

1.元素关系
        父元素
                直接包含子元素的元素是父元素
        子元素
                直接被父元素包含的元素是子元素
        祖先元素
                直接或间接包含后代元素的元素是祖先元素
                一个元素的父元素也是祖先元素
        后代元素
                直接或间接被祖先元素包含的元素是后代元素
                子元素也是后代元素
        兄弟元素
                拥有相同父元素的元素是兄弟元素
2.子元素选择器
        作用：选中指定父元素的指定子元素
        语法：父元素 > 子元素
        例子：

		div > span{}
		div.red > span{}

3.后代元素选择器
        作用：选中指定元素内的指定后代元素
        语法：祖先后代
4.兄弟元素选择器（任选一个作为兄）
        1.选择下一个兄弟（紧挨着）
                语法：兄 + 弟
        2.选择下边所有的兄弟
                语法：兄 ~ 弟

P33_属性选择器

[属性名]选择含有指定属性的元素

	p[title]{}

p标签中含有title属性
 ——秋水共长天一色
 ——秋水共长天一色
 ——秋水共长天一色

		<p>秋水共长天一色</p>

[属性名=属性值]选择含有指定属性和属性值的元素

	p[title=abc]{}

p标签中含有title属性且属性值为abc
——秋水共长天一色

		<p title="abcde">秋水共长天一色</p>

		<p title="hello">秋水共长天一色</p>

[属性名^=属性值]选择属性值以指定值开头的元素

	p[title^=abc]{}

p标签中含有title属性且属性值以abc开头
 ——秋水共长天一色
 ——秋水共长天一色

		<p title="hello">秋水共长天一色</p>

[属性名$=属性值]选择属性值以指定值结尾的元素

	p[title$=abc]{}

p标签中含有title属性且属性值以abc结尾
——秋水共长天一色

		<p title="abcde">秋水共长天一色</p>

		<p title="hello">秋水共长天一色</p>

[属性名*=属性值]选择属性值中含有某值的元素的元素

	p[title*=e]{}

p标签中含有title属性且属性值任意一位含有e

		<p title="abc">秋水共长天一色</p>

——秋水共长天一色
——秋水共长天一色

P34_伪类选择器

1.伪类（不存在的类，特殊的类）
        用来描述一个元素的特殊状态
                比如：第一个子元素、被点击的元素、鼠标移入的元素
        一般情况下都是使用 : 开头
                :first-child        第一个子元素

			/*ul > li:first-child{}*/

:last-child 最后一个字元素
 :nth-child（） 选中第n个子元素
 特殊值：
 n 第n个 0<n<正无穷
 2n(even) 表示选中偶数位的元素
 2n+1(odd) 表示选中奇数位的元素
 以上这些伪类都是根据所有的子元素进行排序

:first-of-type

			/*ul > li:first-of-type{}*/

                :last-of-type
                :nth-of-type()
                这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

                :not()否定伪类
                        将符合条件的元素从选择器中去除
                        例子：

				ul > li:not(:nth-child())

				ul > li:not(:nth-of-type())

P35_超链接的伪类

1.没访问过的链接

	:link		用来表示没访问过的链接（正常的链接）

2.访问过的链接

	:visited	用来表示访问过的链接

由于隐私的原因，所以visited这个伪类只能修改链接的颜色
3.鼠标移入的状态（所有元素都可以用）

	:hover		用来表示鼠标移入（未点击）的状态

4.鼠标点击状态

:active		用来表示鼠标点击的状态（想查看时可以长点所设置状态的网页部分）

P36_伪元素

1.伪元素
表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头

	::first-letter		表示第一个字母

	::first-line		表示第一行

	::selection			表示选中的内容（复制时选中的内容）

	::before			元素的开始（无法被选中）

	::after				元素的最后（无法被选中）

before和after必须结合content使用

			a::after {
				content: "→";
			}

P37_餐厅练习介绍

CSS Diner

P38_继承

1.样式的继承
        为一个元素设置的样式同时也会应用到它的后代元素上
        发生在祖先和后代之间
        继承的设计是为了方便开发
                利用继承可以将一些通用的样式统一设置到共同的祖先元素上
                        这样只需要设置一次即可让所有的元素都具有该样式
注：并不是所有的样式都会被继承
                比如：背景相关的、布局相关等样式不会被继承

P39_选择器的权重

1.样式的冲突
        通过不同的选择器，选中同样的元素，并为相同的样式设置不同的值时，此时就发生了样式的冲突
发生样式冲突时，应用那个样式由选择器的权重（优先级）决定
2.权重
        内联样式                    1,0,0,0
        id选择器                     0,1,0,0
        类和伪类选择器         0,0,1,0
        元素选择器                0,0,0,1
        通配选择器                0,0,0,0
        继承的样式                没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级显示
        分组选择器是单独计算的
        选择器的累加不会超过其最大的数量级
        如果优先级计算后相同，优先使用靠下的样式
可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式
注：开发中慎用！