CSS学习---选择器（全）

鹿蹊zz

已于 2022-06-30 16:19:59 修改

阅读量217

点赞数 3

分类专栏： HTML总结文章标签： css html 前端

于 2022-05-03 20:33:08 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/124560863

版权

HTML总结专栏收录该内容

9 篇文章 2 订阅

订阅专栏

CSS全称为层叠样式表（Cascading Style Sheet）它是用来进行网页风格设计的。

一、css语法

选择器声明块

选择器：通过选择器来选中页面中指定的元素

p就是选中页面中所有的p元素

声明块：声明块是紧跟在选择器后面的，使用{}括起来

通过声明块给指定的元素设置样式。样式名:样式值;

名值对一组一组，可以多组；隔开

二、在HTML中引入CSS的方法

1、行内样式/内联样式

在h5标签开始标签内部，通过style属性设置元素的样式,可以写多个

属性值的格式：样式名：样式值；

优点：写的时候方便

缺点：1、结构和表现耦合 2、修改起来不方便

（这种方式用的比较少，不推荐使用）

2、内部样式

将css样式写在头部中的style标签里，通过选择器来选定元素，然后为元素设置样式

优势：修改起来比较方便，

缺点：只能单页面页面使用，不能多页面复用

（学习过程中，可以用内部样式表）

3、外部样式

在html文件外部，设置.css文件，通过link标签引入到html文件中，样式写在.css文件中

优点：可以多页面复用

缺点：不是很方便

（实际开发过程中，推荐使用）

（1）链接式语法：

<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

（2）导入式语法：

<head>
  @import url(“common.css”)
</head>

4、级别：行内样式 > 内部样式 > 外部样式

三、CSS3的基本选择器

1、元素选择器（结构）

作用：根据标签名来选中指定的元素

语法：标签名{}

例如：h1{}

2、id选择器

作用：根据元素的id属性值来选中元素

语法：#id属性值{}（不以数字开头）

例如：#p1{} #pp{}

注意：id选择，对应属性值，一个页面只能用一次

3、class选择器

作用：根据元素的class属性值来选中元素

语法：.class属性值{}

例子：.p2{} .p3{} .pp{}

用法跟id选择器类似，但可以复用

4、通配选择器

作用：选中页面中所有的标签

语法：*{}

5、复合选择器

（1）交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3·····{}

注意：如果选择器中有元素选择器，元素选择器要写在前面

（2）并集选择器

作用：同时选择多个选择器对应的元素

语法：选择器1,选择器2,选择器3·····{}

四、CSS3高级选择器

1.关系选择器

元素之间关系：
    （1）父元素直接包含子元素的元素
    （2）子元素直接被父元素包含的元素
    （3）祖先元素  直接或间接包含后代元素的元素  父元素也是祖先元素
（4）后代元素  直接或间接被祖先元素包含的元素  子元素也是后代元素
    （5）兄弟元素  拥有相同父元素的元素

选择器	类型	功能
E F{}	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素。
E > F{}	子元素选择器	选择匹配的F元素，且匹配的F元素是匹配的E的子元素。
E + F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面。
E ~ F	通用选择器（选择后面的兄弟元素）	选择匹配的F元素，且位于匹配的E元素所有匹配的F元素

2.结构伪类选择器

选择器	功能
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个元素（n: 选择所有元素 2n/even:选中偶数 2n+1/odd: 选中奇数）
E:first-of-type	选择父级元素内具有指定类型的第一个E元素
E:last-of-type	选择父级元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父级元素内具有指定类型的第n个F元素
E:not()	否定伪类，将复合条件的元素从选择器中去除

3.属性选择器

选择器	功能
E[attr]{}	选择含有指定属性attr的E元素
E[attr=val]{}	选择匹配具有属性attr的E元素
E[attr^=val]{}	选择匹配具有属性attr的E元素，并且属性值以val开头
E[attr$=val]{}	选择匹配具有属性attr的E元素，并且属性值以val结尾
E[attr*=val]{}	选择匹配具有属性attr的E元素，并且属性值包含val

4.伪元素选择器（不真实存在元素）

选择器	功能
::first-letter	表示第一个字母
::first-line	表示第一行
::selection	选中的内容
::before	元素的最前面
::after	元素的最后面

注意：before和after需要配合content使用

五、选择器权重

选择器	优先级	举例
!important	最高优先级	style=" "
内联样式	1000	#content
id选择器	100	.content :hover
类(class)、属性、伪类选择器	10	div span a
元素、伪元素选择器	1	::after ::section等。
子选择器，相邻选择器通配符	0
继承的样式	没有优先级

注意：

1、如果优先级一样，则优先使用靠下的样式

2、比较优先级的时候，需要将所有的选择器优先级相加，最后优先级高的，则优先展示

3、选择器权重相加，不会超过上一级选择器的选择器

鹿蹊zz

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS学习---选择器（全）

初始CSSCSS全称为层叠样式表（Cascading Style Sheet）它是用来进行网页风格设计的。一、在HTML中引入CSS的方法有三种：行内样式内部样式外部样式有两种：（1）链接式语法：<head><link href=”style.css” rel=”stylesheet” type=”text/css”></head> （2）导入式语法：<head> @import url.........
复制链接

扫一扫

专栏目录