前端学习笔记(二) - css简介、伪类、常用选择器及其优先级

最新推荐文章于 2023-05-14 21:04:24 发布

sunshine2285

最新推荐文章于 2023-05-14 21:04:24 发布

阅读量292

点赞数 1

分类专栏：前端文章标签： css简介 css选择器选择器优先级伪类 css基础语法

本文链接：https://blog.csdn.net/sunshine2285/article/details/88912293

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css：层叠样式表，主要实现页面的表现效果
- 可以将css样式编写到元素的style属性中，称为内联样式，只对当前元素生效，不方便复用，不推荐使用
- 可以将css样式写到<head>标签内
```
    <style type="text/css">
        p{
            color:red;
            font-size:40px;
        }
    </style>
```
- 可以将css样式写到外部的css文件中，这样最利于复用且有利于浏览器缓存，通过以下方式引用
```
    <link rel="stylesheet" type="text/css" href="style.css" />
```
css注释： /* */
css语法：选择器 {声明块}
- 选择器：通过选择器可以选中页面指定的元素，并且将声明块中的元素应用到选择器对应的元素上
- 声明块：卸载{}内，键值对，形如key:value;，:号连接，;号隔开多个声明
<div>：块元素，独占一行，无论内容多少，<div>标签没有任何语义(或表示一块区域)，主要用于对页面布局
<span>：内联元素，所谓的行内元素，只占自身大小的元素，直到放不下时自动换行，主要用来选中文本来设置样式
<a>内可以放任意元素，<p>内不可以放任何块元素
元素之间的关系：父子元素，祖先和后代元素，兄弟元素
伪类：专门用来表示元素的一种特殊的状态，用于对特殊状态的元素设置样式，但是设置的属性有一定限制，a:link,a:visited，a:hover,a:active,伪类
伪元素：为在元素特殊位置的地方设置特定格式，firstletter,firstline,before,after 伪元素

常用选择器 (css选择器)[http://www.w3school.com.cn/css/css_selector_type.asp]

选择器类型	语法	作用
元素选择器	`元素名{}`	可以为页面内所有该元素设置为样式
id选择器	`#id{}`	可以选择页面内唯一的一个元素设置
类选择器	`.class{}`	可以选择一类元素，需要给元素设置`class`属性，一个元素可以设置多个`class`属性
选择器分组	`选择器1, 选择器2, 选择器N{}`	可以选中多个元素,`逗号`分割
统配选择器	`*{}`	可以选中所有元素
复合选择器	`选择器1 选择器2 选择器N{}`	可以选中同时满足多个条件的元素，`空格`分割
后代元素选择器	`祖先元素后代元素{}`	选中祖先元素下的后代元素
子元素选择器	`父元素 > 子元素{}`	选中父元素的子元素
伪类选择器	`元素:状态{}`	选中特殊状态元素
伪元素选择器	`元素:位置{}`	选中特殊位置的元素
属性选择器	`p[属性]`/`p[属性=值]`	选中具有指定属性的元素，值可以不写
属性选择器	`p[属性^=值]`	选中具有指定属性的元素且属性值以指定值开头的
属性选择器	`p[属性$=值]`	选中具有指定属性的元素且属性值以指定值结尾的
属性选择器	`p[属性*=值]`	选中具有指定属性的元素且属性值中包含值的
子元素选择器	`p:first-child`	选中特定位置的子元素
兄弟元素选择器	`span + p{}`	选中一个元素后紧跟着的兄弟元素
兄弟元素选择器	`span ～ p{}`	选中一个元素后紧跟着的所有该类兄弟元素

选择器可以结合使用
子元素 p:nth-child() 可以选择任意位置的子元素，p:nth-child(even) 选中偶数行，p:nth-child() 选中奇数行，可以实现表格或者行的奇偶行不同表现
()[]

否定伪类：:not(选择器),用于剔除某些特定元素
样式继承：子元素会继承父元素的样式，利用继承的这个特性可以将一些基础的样式设置给父元素，但并不是所有的样式会被继承，例如background-color等不会被继承
选择器的优先级：当使用不同的选择器选中同一个元素时，在设置相同的样式的时候，显示优先级高的选择器设置的样式

选择器类型优先级
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
统配选择器(*) 0
继承的样式最低优先级
特别注意：
- 当选择器中包含多种选择器时，需要将多种选择器的优先级相加后比较，相加之后的结果不会超过它的最大数量级
- 当几个选择器的优先级相同的时候，显示最后一个选择器设定的样式
- 并集选择器的优先级单独计算
- 可以在样式之后添加 !important 可以将样式设置为最高优先级
伪类的顺序：<a>的伪类顺序:link = visited > hover > active

选择器类型	优先级
内联样式	1000
id选择器	100
类和伪类选择器	10
元素选择器	1
统配选择器(*)	0
继承的样式	最低优先级

sunshine2285

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记(二) - css简介、伪类、常用选择器及其优先级

前端基础(二)css：层叠样式表，主要实现页面的表现效果可以将css样式编写到元素的style属性中，称为内联样式，只对当前元素生效，不方便复用，不推荐使用可以将css样式写到<head>标签内 <style type="text/css"> p{ color:red; font-size:...
复制链接

扫一扫