详解 CSS 属性 -&n…
来源:互联网 发布:linux 查看系统分区 编辑:程序博客网 时间:2024/06/11 02:00
之前写了一篇
首先,阅读 w3c
CSS
伪类用于向某些选择器添加特殊的效果。 CSS
伪元素用于将特殊的效果添加到某些选择器。
可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css
伪类种类
伪元素种类
区别
这里用伪类 :first-child
:first-letter
p>i:first-child {color: red}<<span class="hljs-title" style="box-sizing: border-box;">p>
<<span class="hljs-title" style="box-sizing: border-box;">i>first</<span class="hljs-title" style="box-sizing: border-box;">i> <<span class="hljs-title" style="box-sizing: border-box;">i>second</<span class="hljs-title" style="box-sizing: border-box;">i></<span class="hljs-title" style="box-sizing: border-box;">p>
:first-child
如果我们不使用伪类,而希望达到上述效果,可以这样做:
.first-child {color: red}<<span class="hljs-title" style="box-sizing: border-box;">p>
<<span class="hljs-title" style="box-sizing: border-box;">i class="first-child">first</<span class="hljs-title" style="box-sizing: border-box;">i> <<span class="hljs-title" style="box-sizing: border-box;">i>second</<span class="hljs-title" style="box-sizing: border-box;">i></<span class="hljs-title" style="box-sizing: border-box;">p>
即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看为元素:
p:first-letter {color: red}<<span class="hljs-title" style="box-sizing: border-box;">p>
I am stephen lee.</<span class="hljs-title" style="box-sizing: border-box;">p>
:first-letter
那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?
.first-letter {color: red}<<span class="hljs-title" style="box-sizing: border-box;">p>
<<span class="hljs-title" style="box-sizing: border-box;">span class='first-letter'>I</<span class="hljs-title" style="box-sizing: border-box;">span> am stephen lee.</<span class="hljs-title" style="box-sizing: border-box;">p>
即我们给第一个字母添加一个 span
,然后给 span
两者的区别已经出来了。那就是:
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
总结
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3
:Pseudo-classes::Pseudo-elements
但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
0 0
- 详解 CSS 属性 -&n…
- Note 452067.1 &n…
- jcop external&n…
- ExecutionLog2 View -&n…
- poj 2739 sum of&n…
- Lesson 55 Not a&n…
- Lesson 57 Can I&n…
- Lesson 59 In or&n…
- 10071 - Back to&n…
- ACM: uva 11210 &n…
- ACM: uva 1325 -&n…
- ACM: uva 1432 -&n…
- ACM: poj 2786 -&n…
- ACM: poj 3972 -&n…
- ACM: uva 1362 -&n…
- ACM: uva 1069 -&n…
- Linux 下 PHP 对&n…
- 使用 grep 的 -o&n…
- 浅谈HTTP中Get与Post的区别
- Jquery AJAX POST与GET之间的区别
- css3容易混淆记错的记录
- 利用@media screen实现网页布…
- C++中的--【排序算法】
- 详解 CSS 属性 -&n…
- css有哪些种类的选择器
- CSS选择器大全
- 细说HTML元素的ID和Name属性的区别
- 常见图片格式jpg、jpeg、png、gif…
- Why is the fold action necessary in Spark?
- 解释下浮动和它的工作原理?清除浮…
- Flex 布局教程:语法篇
- 为什么利用多个域名来存储网站资源…