一、特殊选择器
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}<br /><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,:blur /*动态伪类*/
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 id="你好">你好</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>
<style type="text/css">#d1{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;}@keyframes mymove{from {left:0px;}to {left:200px;}}</style></head><body><div id="d1"></div></body>
2.1 渐变
<style type="text/css">#d1{ height:200px; width:400px; border:solid 1px red; /*线性渐变,开始位置,结束位置,开始的颜色,结束的颜色,色标(色标位置,色标颜色,可以有多个色标,色标即是颜色过渡点)*/ //background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff)); /*径向渐变,内圆圆心位置,内圆半径,外圆圆心半径,外圆半径,开始颜色,结束颜色,色标*/ background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));}</style></head><body><div id="d1"></div></body>
2.2 响应式布局
<style type="text/css">/*屏幕宽度大于900的时候*/*{ padding:0px; margin:0px; font-family:"微软雅黑";}#header{ height:100px; border:solid 1px red; margin:0px auto;}#main{ margin:10px auto; height:400px;}#footer{ margin:0px auto; height:100px; border:solid 1px red;}@media screen and (min-width:900px){ #header,#footer { width:800px; } #main { width:800px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:394px; height:400px; border:solid 1px red; float:left; } #main-right { width:200px; height:400px; border:solid 1px red; float:left; }}@media screen and (min-width:600px) and (max-width:900px){ #header,#footer { width:600px; } #main { width:600px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:396px; height:400px; border:solid 1px red; float:left; } #main-right { display:none; }}@media screen and (max-width:600px){ #header,#footer { width:300px; } #main { width:300px; height:400px;; } #main-left { display:none; } #main-center { width:300px; height:400px; border:solid 1px red; } #main-right { display:none; }}</style></head><body><div id="header">头部</div><div id="main"> <div id="main-left">主题-左边</div> <div id="main-center">主题-中间</div> <div id="main-right">主题-右边</div></div><div id="footer"></div></body>

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

禅工作室 13.0.1
功能强大的PHP集成开发环境

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)