CSS选择器 & 文本属性 & 背景属性

最新推荐文章于 2023-03-31 02:27:02 发布

零碎゛記忆。

最新推荐文章于 2023-03-31 02:27:02 发布

阅读量256

点赞数 1

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/qq_42827425/article/details/88649787

版权

HTML & CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

选择器

基本选择器
群组选择器（并集选择器）
交集选择器：多个选择器之间没有空格，表示同时满足多个选择器要求的元素才会被获取到
层次选择器
a) 后代选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代
b) 子代选择器:用 > 隔开基本选择器，表示后一个选择器是前面的子代
c) 相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）
d) 兄弟选择器：E~F:表示获取到E后面所有的同级的F元素
动态伪类选择器 l v h a
a) a:link 锚链接被访问前添加样式
b) a:visited 锚链接被访问后添加样式
c) e:hover 鼠标悬停在元素上添加样式
d) e:active 鼠标点击元素时添加样式
e) :focus 表单元素被聚焦时，添加样式
目标伪类选择器

<!--目标:target{}-->
<head>
    <style type="text/css">
    p{  
        display:none;
    }
    :target{
          display:block; 
          width: 300px;
           height: 300px;
           background: red; 
        }
    </style>
</head>
<body>
    <a href="#p1">点我1</a>
    <a href="#p2">点我2</a>
    <p id="p1">1</p>
    <p id="p2">2</p>
</body>

语言伪类选择器

q:lang(no){quotes:"#""#";}
<q lang="no"></q>

否定伪类选择器
:not(E) 除了E以外的所有元素
F:not(E) 除了E以外的所有F元素
ui状态伪类选择器
:enabled 可用的表单元素添加样式
:disabled 禁用的表单元素添加样式
:checked 被选中的表单元素添加样式
::selection 内容被选中添加样式
结构伪类选择器
:first-child 满足为父元素的第一个孩子
E:first-child 满足为父元素的第一个孩子，且要满足为E元素
E:last-child 满足为父元素的最后一个孩子，且要满足为E元素
E:nth-child(n) 满足为父元素的第n个孩子，且要满足为E元素
E:nth-last-child(n) 满足为父元素的倒数第n个孩子，且要满足为E元素
6n even 2n-1（odd）父元素的奇数个孩子 -n+a:1-a
E:first-of-type 满足为父元素的第一个E类型的孩子
E:empty 获取内容为空的元素
属性选择器
E[attr] 拥有attr属性的E元素添加样式
E[attr="val"]attr属性值等于val的E元素添加样式
E[attr*="val"]attr属性值包含val的E元素添加样式
E[attr^="val"]attr属性值以val开头的E元素添加样式
E[attr$="val"]attr属性值以val结尾的E元素添加样式
伪元素选择器

文本属性

文本阴影 text-shadow：x-offset（右） y-offset(下) blur(模糊区域) color[,...];
文本溢出 width white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
单词换行 word-wrap:break-word;
自定义字体
创建字体@font-face{ font-family: "给字体起名字" ; src:url(); }
用字体
省略号正确四部写法：
（1）设置宽度
（2）不允许换行white-space:nowrap;
（3）超出隐藏：overflow:hidden;
（4）省略号：text-overflow:ellipsis;

背景属性

background-size 背景图片的尺寸
数值、百分比：水平方向垂直方向 (大部分情况都会被扭曲)
cover 背景图片完全覆盖容器（不会扭曲，图片可能会丢失）
contain 容器完全包含背景图片（不会扭曲。容器会有空白区域）
background-origin ：背景的定位区域
padding-box 说明background-position:0 0;默认在padding的左上角
content-box 说明background-position:0 0;默认在content的左上角
border-box 说明background-position:0 0;默认在border的左上角

零碎゛記忆。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器 & 文本属性 & 背景属性

选择器基本选择器群组选择器（并集选择器）交集选择器：多个选择器之间没有空格，表示同时满足多个选择器要求的元素才会被获取到层次选择器 a) 后代选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代b) 子代选择器:用 > 隔开基本选择器，表示后一个选择器是前面的子代c) 相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）d) 兄弟选择器：E...
复制链接

扫一扫