正文 

当前位置： 首页 > java > java教程

css你可能还不知道的一些知识点

kevin860 kevin860     2022-08-21     597

关键词：

一、特殊选择器

1、* 用于匹配任何的标记

2、> 用于指定父子节点关系

3、E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

4、E ~ F 匹配所有E元素之后的同级元素F

5、名称[表达式]

5.1 E[att] 匹配所有具有att属性的E元素（[att]获取所有的定义了att的标签；E[att=val] 匹配所有att属性等于“val”的E元素；

5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签；

5.3 [att^=val]获取所有定义了att属性并且属性值以val开头的标签；

5.4 [att$=val]获取所有定义了att属性并且属性值以val结尾的标签；

5.5 [att*=val]获取所有定义了att属性并且属性值包含val字符的标签；

5.6 [att~=val]获取所有定义了att属性并且属性值包含val单词的标签；

5.7 [att|=val]获取所有定义了att属性并且属性值等于val或者以val-开头的标签。）

6、伪类/伪元素

6.1 css 伪类用于向某些选择器添加特殊的效果。css 伪元素用于将特殊的效果添加到某些选择器。 

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类伪元素种类区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}

<p><i>first</i><i>second</i></p> //伪类 :first-child 添加样式到第一个子元素

如果我们不使用伪类，而希望达到上述效果，可以这样做：

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：

:p:first-letter {color: red}<p>i am stephen lee.</p> //伪元素 :first-letter 添加样式到第一个字母

那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

.first-letter {color: red}
<p><span class='first-letter'>i</span> am stephen lee.</p>

即我们给第一个字母添加一个 span，然后给 span 增加样式。

两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

总结：

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:pseudo-classes::pseudo-elements但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

简单的说呢:伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。 从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。伪元素产生新对象，在dom中看不到，但是可以操作；伪类是dom中一个元素的不同状态；

6.1 常用的伪类

6.1.1 a:hover,a:link,a:active,a:visited,:focus /*动态伪类*/

6.1.2 :disabled,:enabled,:checked,:read-only,:read-write /*UI状态伪类*/

6.1.2.1 :read-only 只读状态

6.1.2.2 :read-write 非只读状态

6.1.3 css3伪类

6.1.3.1 :nth-child(n)其父元素的第n个元素（如：p:nth-child(2){color:red;} p元素是其父元素的第2个元素的话字体颜色就是红色）

6.1.3.2 nth-last-child(n) 其父元素的倒数第n个元素

6.1.3.3 :nth-of-type(n) （如：p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色）

6.1.3.4 :first-child 其父元素的第一个元素

6.1.3.5 :last-child 其父元素的最后一个元素

6.1.3.6 nth-last-of-type(n) （如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色）

6.1.3.7 :first-of-type 其父元素的第一个p元素

6.1.3.8 :last-of-type 其父元素的最后一个p元素

6.1.4 :not() /*否定伪类选择器*/ (如：p:not(.a){color:red;})

6.2 常用的伪元素

       6.2.1 :before,::after

复制代码
<style type="text/css">
p::before
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
复制代码

6.2.2 ::first-letter

复制代码
<style type="text/css">
p::first-letter
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
复制代码

6.2.3 ::first-line

复制代码
<style type="text/css">
p::first-line
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
复制代码

6.2.4 ::selection

复制代码
<style type="text/css">
::selection
{
color:red;
background-color:#00F;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
复制代码

二、CSS权重

1、权重列表

复制代码
<style>
/*A>B>C>D>0*/
.main-content{color:#666;}/*0*/
h3{color:#f00;}/*D*/
.h3{color:#0f0;}/*C*/
.main-content h3{color:#00f;}/*CD*/
.main-content .h3{color:#0ff;}/*CC*/
#h3{color:#ff0;}/*B*/
</style>
</head>
<body>
<div class="main-content">
   <h3 class="h3" id="h3">你好</h3>
</div>
</body>
复制代码

三、CSS3新增属性

1、定义文本样式

1.1 文字阴影text-shadow

复制代码
<style>
p
{
    font-size:60px;
    font-weight:900;
    color:#999;
    text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半径、颜色*/
    -15px 15px 5px #333,
    -15px -15px 5px #333;
}
</style>
</head>
<body>
<p>HTML5+CSS3</p>
</body>
复制代码

1.2 文字缩进text-indent

1.3 文本换行

复制代码
<style>
p
{
    width:100px;
    border:solid 1px red;
    word-wrap:break-word;/*断单词*/
    word-break:break-all;/*断字符*/
    white-space:nowrap;/*强制在一行内显示所有文本*/
}
</style>
</head>
<body>
 <p>中英混对萨排的时候English English English English English</p>
</body>
复制代码

1.4 文本溢出

复制代码
<style type="text/css">
div
{
    width:200px;
    white-space:nowrap;
    border:solid 1px red;
    text-overflow:clip;/*不显示省略标记，而是简单的裁切掉*/
    text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记*/
    overflow:hidden;
}
</style>
</head>

<body>
<div>的撒打算打算打算大神大神大神大神大神</div>
</body>
复制代码

1.5 圆角 border-radius

1.6 阴影 box-shadow

1.7 背景图片铺满 background-size:cover

1.8 transform

复制代码
<style type="text/css">
#d1
{
    width:100px;
    height:100px;
    background-color:#00F;
}
#d1:hover
{
    transform:rotate(40deg) scale(1.2);/*顺时针旋转40度，放大1.2倍*/
    transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/
    transform:skew(30deg,-10deg);/*水平倾斜30度，垂直倾斜10度*/
}
</style>
</head>

<body>
<div id="d1"></div>
</body>
复制代码

1.9 平滑过渡 transition

复制代码
<style type="text/css">
#d1
{
    width:100px;
    height:100px;
    background-color:#00F;
}
#d1:hover
{
    background-color:#F00;
    transition:background-color 1s ease-in;/*过渡的属性，如果是所有的则是all，经历的时间，过渡效果*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
复制代码

2.0 更复杂的动画 animation 

复制代码
<style type="text/css">
#d1
{
    magin:0px auto;
    width:959px;
    height:613px;
    background-image:url("11.jpg");
    animation:x-spin 20s infinite linear;/*动画名称，经历时间，播放次数(为infinite则一直播放)，播放方式*/
}
@-webkit-keyframes x-spin
{
    0%{
        transform:rotateX(0deg);/*沿x轴开始旋转*/
    }
    50%{
        transform:rotateX(180deg);/*沿x轴旋转180*/
    }
    10%{
        transform:rotateX(360deg);/*沿x轴旋转360*/
    }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
查看详情

这些自动化测试框架知识你还不知道？

这些自动化测试框架知识你还不知道？！　　无论是在自动化测试实践，还是日常交流中，经常听到一个词：框架。之前学习自动化测试的过程中，一直对“框架”这个词知其然不知其所以然。　　最近看了很多自动化相关的资... 查看详情

关于git的基础知识可能你还不知道(代码片段)

Gitgit版本控制工具版本控制工具分类优势安装检查git是否安装成功检查git的版本号Git结构Git和代码托管中心本地库和远程库修改git里面框和文字的大小:注意:总结:git版本控制工具项目模块小组分开开发,每个人开发完后需要整合... 查看详情

这些自动化测试框架知识你还不知道

无论是在自动化测试实践，还是日常交流中，经常听到一个词：框架。之前学习自动化测试的过程中，一直对“框架”这个词知其然不知其所以然。最近看了很多自动化相关的资料，加上自己的一些实践，算是对“框架... 查看详情

都2017年了，h5这些知识你还不知道?

一、交互上，慎用横屏展示效果。但是在今年的微信传播中，好的创意也可以尝试使用。     　　原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比... 查看详情

听说你还不知道completablefuture？(代码片段)

...进，橘子之后再进入讲解。阅读这篇文章需要知道的前置知识点有， 查看详情

你可能不知道的一些gopackages知识(代码片段)

关于GoPackage关于GoPackageGoPackages主要用来把相关的functions,variables,和constants组织到一起，这样你就可以很方便的迁移Packages和把它们用到自己的程序中。注意除了mainpackage，Gopackages不是自治程序，不能被编译成可执行文件。它们必... 查看详情

javascript优雅的实现方式包含你可能不知道的知识点

有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，发散... 查看详情

你可能还不知道的apk签名绕过方法

...意了，不要随意点个链接就升级，你的正宗应用可能升级成山寨应用哦。Google在12月发布的安全公告中提到的“Janus”漏洞，可使攻击者在不改变原应用签名的情况上，注入恶意代码。Android应用的包名和签名是唯... 查看详情

新版微信这些变化你可能还不知道！

iOS微信在7月14号发布的微信8.0.8版本后，之前我也讲过，关于微信更新到这个版本后可以自定义新消息提示音，以及语音消息铃声，如果你想回顾可以到之前的文章：微信更新8.0.8新变化QQ大呼内行 ，点击... 查看详情

关于自增id你可能还不知道(代码片段)

导读：在使用MySQL建表时，我们通常会创建一个自增字段(AUTO_INCREMENT)，并以此字段作为主键。本篇文章将以问答的形式讲述关于自增id的一切。注：本文所讲的都是基于Innodb存储引擎。1.MySQL为什么建议将自增列id设为主键？如果... 查看详情

关于自增id你可能还不知道(代码片段)

导读：在使用MySQL建表时，我们通常会创建一个自增字段(AUTO_INCREMENT)，并以此字段作为主键。本篇文章将以问答的形式讲述关于自增id的一切。注：本文所讲的都是基于Innodb存储引擎。1.MySQL为什么建议将自增列id设为主键？如果... 查看详情

学习算法你必须知道的一些基础知识（文末福利）

...一下这些知识。1.1　概率论概率就是描述一个事件发生的可能性。我们生活中绝大多数事件都是不确定的，每一件事情的发生都有一定的概率（确定的事件就是其概率为100%而已）。天气预报说明天有雨，那么它也只是说明天下... 查看详情

spring中你可能不知道的事(代码片段)

...actoryPostProcessorImportImportSelector，还介绍了一些其他的零碎知识点，正如我上一节所说的，Spring实在是太庞大了，是众多Java开发大神的结晶，很多功能，很多细节，可能一辈子都不会用到，不会发现，作为普通开发的我们，只能... 查看详情

关于线程池,那些你还不知道的事

一、背景　　最近在学习线程相关的知识，然后顺理成章少不了学习线程池，刚开始在没有深入的学习之前，感觉线程池是很神秘的东西，而且完全想不到怎么才能实现一个自己的线程池，然后还能保证它的可用性，然后就一直... 查看详情

想轻松入门python编程，这10个经典案例你还不知道嘛？

...a;基本常识+这10经典案例。而同时有着系统的Python基础知识点和10个经典案例的教材，只有这本书《Python基础教程》，一 查看详情

你可能不知道的前端知识点(代码片段)

...vac/the-front-end-knowledge-you-may-dont-know发掘被我们忽略的前端知识点。所有的讨论以issues的形式进行，任何人都可以在issues区围观讨论。本repo的目的在于搜集、讨论，最终的内容会整理成文章、PPT、PDF发布在小密圈。须知#1索引#2缘... 查看详情

七个你可能不了解的css单位

...恰恰是最正确的工具。今天，我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计 查看详情