css选择器

目录

css的引入方式

⚡行内引入

⚡内嵌引入

⚡外联引用

⚡引入方式的优先级

css三大特性

选择器

⚡标签选择器

⚡类选择器

⚡id选择器

⚡后代选择器

⚡子选择器

⚡伪类选择器

:hover

:focus

结构伪类选择器

为元素选择器

⚡通用选择器

⚡群组选择器

⚡相邻选择器

“+”

“~”

⚡属性选择器

以某个值开头

以某个值结尾

包含某个值

css:层叠样式表(Cascading style sheet)

css的引入方式

行内引入

这种引入方式在之前的HTML学习中也有使用过。通过标签的style属性来引入css样式。

内嵌引入

css选择器_第1张图片

通过选择器,在head部分通过style标签来引入css样式。

css选择器_第2张图片

外联引用

css选择器_第3张图片

        首先,先创建一个.css文件,然后在HTML中,使用link标签,在href属性中通过相对路径的方式,及那个.css文件引入进来。

css选择器_第4张图片

引入方式的优先级

css选择器_第5张图片

       行内引入的优先级最高,而内嵌引入和外联引入的优先级不分高低,后来运行到的样式代码会覆盖前面的。       

       当通过不同的引入方式同一个元素设置了相同的样式后,就会根据引入方式的优先级来判断元素的样式。

css选择器_第6张图片

       我们可以看到当三种引入方式都针对文本的大小和背景颜色时,只有行内引入的样式生效,也说明了行内引入的优先级最高。

css选择器_第7张图片

内嵌引入和外联引入的优先级会根据代码的先后顺序决定,后面的会覆盖前面的样式。

css三大特性

css选择器_第8张图片

选择器

标签选择器

css选择器_第9张图片

类选择器

css选择器_第10张图片

id选择器

css选择器_第11张图片

后代选择器

css选择器_第12张图片

css选择器_第13张图片

我们发现使用后代选择器会作用给父类选择器的所有后代。两个span标签中的内容都设置了样式

子选择器

css选择器_第14张图片

css选择器_第15张图片

发现只有一个span添加了样式,也就是div的直系子后代被设置了样式。

伪类选择器

css选择器_第16张图片

:hover

css选择器_第17张图片css选择器_第18张图片

:focus

css选择器_第19张图片

css选择器_第20张图片

结构伪类选择器

参考之前博客(http://t.csdnimg.cn/TOTb6)中的隔行变色部分。

为元素选择器

这个主要使用在去浮动效果中。

css选择器_第21张图片

通用选择器

css选择器_第22张图片

通用选择器一般是用来去除浏览器默认样式的。

群组选择器

css选择器_第23张图片

css选择器_第24张图片

相邻选择器

“+”

css选择器_第25张图片

css选择器_第26张图片

“~”

css选择器_第27张图片

css选择器_第28张图片

属性选择器

css选择器_第29张图片

以某个值开头

css选择器_第30张图片

css选择器_第31张图片

以某个值结尾

css选择器_第32张图片

css选择器_第33张图片

包含某个值

css选择器_第34张图片

css选择器_第35张图片

你可能感兴趣的:(HTML,css,前端)