第37章 伪类选择器以及伪元素

最新推荐文章于 2024-04-13 12:25:32 发布
最新推荐文章于 2024-04-13 12:25:32 发布
阅读量85 收藏
点赞数
分类专栏： 阅-H52 文章标签： html5 css3.伪类选择器以及伪元素 :hover :after 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器以及伪元素</title>
<style>
/*:root 选择器匹配文档根元素。设置 HTML 文档的背景色：*/
:root{ background:#036;}
body{ background:#fff;}
p.aaas{ text-align:left; color:#c00;}
p.right{ text-align:right; color:#0F0;}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
p:first-line{ color:#f60; background:#F00;}
p:first-letter{ color:#0F3; font-size:18px;}
li{ list-style:none;}
li:before{ content:"[前面]"; color:#00F;}
li:after{ content:"[后面]"; color:#6F3;}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>

<br/>
<a href="###" target="_blank">伪类选择器</a>
<br/>
<p>
        在CSS中，主要有四个伪元素选择器<br/>
        first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
    <li><a href="###">伪类选择器</a></li>
</ul>
</body>
</html>

效果图：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>not选择器</title>
<style>
:root{ background:#3F0;}
body *:not(h1){ background:#fff;}
:empty{ background:#f60;}
</style>
</head>
<body>
<h1>not选择器</h1>
<p>阅谁问君诵，水落清香浮。</p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td></td>
        <td>4</td>
    </tr>
    <tr>
		<td>A</td>
        <td>B</td>
        <td>C</td>
        <td></td>
    </tr>
</table>
</body>
</html>

效果图：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器first-child、last-child、nth-child和nth-last-child</title>
<style>
/*
li:first-child{ background:#f60;}
li:last-child{ background:#f60;}
li:nth-child(odd){ background:#0C6;}
li:nth-child(even){ background:#0C6;}
li:nth-child(3n+1){ background:#f60;}
li:nth-child(3n+2){ background:#f60;}
li:nth-child(4n+1){ background:#f60;}
li:nth-child(4n){ background:#f60;}
*/
li:only-child{ background:#00F;}

</style>
</head>

<body>
<h1>选择器</h1>
<h1>唯一的</h1>
<ul>
    <li>第一个项目</li>
</ul>


<h1>很多的</h1>
<ul>
    <li>第一个项目</li>
    <li>第二个项目</li>
    <li>第三个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
    <li>第二个项目</li>
    <li>第三个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
</ul>
</body>
</html>

效果图：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
:target 选择器可用于选取当前活动的目标元素。
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。
这个被链接的元素就是目标元素(target element)。
*/
:target{ background:#000; color:#fff;}
</style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

 效果图：

 

 

 

iteye_17658
关注
专栏目录
详解CSS3中的选择器（三）伪类选择器
weixin_42071117的博客
06-03 1019
今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。 什么是伪类选择器呢 做过Web网页开发的童鞋都经常看到css样式中有这么一种类型p:first-child { ... }，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 div:before {...}。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。 伪类选择器也是最复杂的一种选择器，共有六大子类型： 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI状
【37】CSS3（1）—— 新增选择器④伪元素选择器
倏存的博客
04-08 764
1.新增伪元素2. h5 写法和传统写法区别3. 伪元素的注意事项4.举例
伪类选择器
xiahang1121的博客
05-05 385
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*点击之前 */ a:link{color: red;} /*点击之后 */ a:visited{color:...
CSS选择器之【伪类/元素选择器】
xustart7720的博客
06-23 730
前言目前为止，我们已经学习了如何使用HTML文档中定义的元素选择文档的内容。CSS中还定义了伪选择器，它们提供了更复杂的功能，但非直接对应HTML文档应以的元素。伪选择器主要分两种：伪元素和伪类。一、伪元素选择器1）：first-letter 该类选择器主要用于向指定的选择器添加指定的效果。选择“块级元素”文本段落中的首个字符，只能对“块级元素”生效。 首先，元素的display计算值必须是 blo
伪类选择器和伪元素
weixin_38606332的博客
07-04 1955
伪类选择器什么是伪类？伪类就是与类一样能够定义样式，但却不是真正意义上的类。 不是真正意义上的类？也就是说你可以在css中定义它的样式，就像定义类一样，但是你在HTML中不能找到该伪类的踪影。 HTML中没有伪类的踪影，那它是如何实现样式的呢？浏览器会在后台向这些伪类增加和删除元素。对于&lt;a&gt;元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visit...
html伪类选择器Before,css3 伪元素和伪类选择器详解
weixin_31060209的博客
06-07 1156
伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪元素选择器：并不是针对真正的元素使...
HTML5-CSS3-新增标签-多媒体、表单属性、input标签、属性选择器、结构伪类选择器、伪元素选择器、2D旋转
解启超
02-19 325
HTML5 一、什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些...
【36】CSS3（1）—— 新增选择器③结构伪类选择器
倏存的博客
04-08 527
结构伪类选择器1.介绍2. 补充3.所有结构伪类选择器举例
web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）
翟浩浩Android专栏
12-21 590
参考文档：https://man.ilovefishc.com/css3/ 一、基本选择器： 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样式 style 二、复合选择器： 1交集选择器 element.class || element#id 2并集选择器 element1,element2,element3,... 3后...
web前端css学习笔记(3)——伪类选择器、选择器优先级
m0_52353966的博客
04-01 1150
本节学习伪类、伪类选择器。本节接上一节，学习了最后的伪类选择器和伪元素选择器。选择器优先级有自己的计算方式，从左往右计算。
CSS之选择器
weixin_45604020的博客
06-22 4176
选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。
WEB—CSS知识点总结
weixin_53960460的博客
07-10 416
1、伪类选择器CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。
【从零开始学CSS | 第二篇】伪类选择器
fckbb的博客
07-13 2845
上一篇文章我们详细的为大家介绍了一些常见的选择器，这几篇我们将再次介绍CSS中的一个常见选择器——伪类选择器，他的种类繁多，希望各位可以对它有一个比较好的掌握程度。
伪类选择器的简单介绍
weixin_45824120的博客
11-24 3261
一、伪类选择器介绍 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。 伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。 二、伪类选择器的分类 伪类选...
CSS基础语法、基本选择器、元素选择器、类选择器、ID选择器、伪类和伪元素选择器
dream_follower的博客
06-18 1831
今天终于开始学前端了，以前一直被其他事给耽误，这一次不会了！哈哈哈！ 1、定义CSS的基本语法 定义的基本语法分为两个组成部分，一是选择器，二是属性说明 选择器{ 属性1：属性值1； 属性2：属性值2； … } 选择器指定了对哪些网页元素进行样式设置，选择器可以是HTML标签名、元素的类名、元素的ID名等。而且根据选择器的构成形式可以将选择器分为基本选择器和复合选择器。 将CSS...
HTML5与CSS学习笔记 伪类选择器，属性选择器，子元素选择器，兄弟元素选择器，文本标签及样式
最新发布
VAN
04-13 1071
伪类选择器： 表示元素的一种特殊的状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类 为没有访问过的链接设置颜色 a:link为没有访问过的链接设置一个颜色 a：visited为访问过的链接设置一个颜色，浏览器通过历史纪录来判断链接是否访问过。 由于涉及到了用户的隐私问题，所以使用visited伪类只能设置字体的颜色，...
伪类选择器：相对于父元素的伪类
xqiitan的专栏
03-06 2474
伪类选择器：选择某些元素更加方便（是否添加了 type，last） a）之前学习的：a:hovar a:link a:active a:visted b）以某元素相对于其父元素 或 兄弟元素的位置来获取元素的 结构伪类。 E:first-child: 查找E这个元素的父元素的第一个子元素E E:last-child: 查找最后一个元素 E:nth-chil...
深入理解CSS第一章：基础知识详解
- 伪元素选择器：选择元素的特定部分，例如`::before`。 - 群组选择器：同时选择多个元素，例如`h1, h2, h3`。 知识点四：CSS的继承性和层叠性 CSS中的继承性指的是某些CSS属性可以从父元素继承到子元素，例如字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值