网站关键字优化公司,wordpress自动创建子站,中铁建设集团门户网登录失败,金华网站开发注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时再头部记得机上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、什么是伪类
1.1 伪类基础使用
小媛这一节咱们讲啥
1_bit这一节咱们先讲伪类。
小媛什么是伪类
1_bit这个知识点有点抽象伪类指给当前整个 html 代码已经存在的元素标签模拟添加一个类样式来实现一种效果。
小媛果然很抽象这不是跟之前的类样式一样吗
1_bit这两者还是有一点区别的例如我们想使 body 主体内容中的第一个 p 标签颜色为红那么就可以这样写代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程 伪类 伪元素/titlestylep:first-child {color: red}/style
/head
bodyp第1个段落 这个段落刚好是第一个为段落标签则生效/pspanspan标签内容/spanp第2个段落/pspan第二个span标签内容/span
/body
/html小媛那个 p:first-child 是什么
1_bit这是伪类的写法例如“标签:伪类”代码中 first-child 指的是第一个元素标签如果是 p 那意思就是 p 的第一个元素后面的 first-child 就是“指给当前整个 html 代码已经存在的元素标签模拟添加一个类样式来实现一种效果”。
小媛还是不清楚。
1_bit那我再给你说说吧。按照之前学习我们知道了如何创建一个类样式也就是如下代码形式。 1_bit这样的话就需要当前 p 元素去调用这个样式而使用伪类则不需要这样写。
小媛奥这就是这个“伪”的意思吗
1_bit哈哈哈可以这样说并且伪类是已经定义好了的你可以理解为名称。对了我们还可以在外面加一个 div包裹起来由于 div 是一个容器也可以对 p 元素用伪类生效。 小媛那 div 是啥东西没搞明白。
1_bitdiv 是一个容器可以对整个 html 元素进行区域划分例如一个页面中如果有很多个不同的内容有标题、最新内容、最热内容、推荐用户其实这些不同区域的内容就可以使用 div 进行分隔随后使用 css 样式对其进行排版使其在页面上“摆放”在不同位置。
小媛奥我明白了所以 div 就是用于对整体进行区域划分的并且通过div 使这一块的元素摆放在页面的不同位置
1_bit对的是这个意思。div 还可以进行嵌套就是一个 div 中又包含一个 div也可以包含多个因为“一块”内容也是需要进行排版也分为很多区域例如下面这个展示。 小媛懂了具体的还没开始学对吧你就是告诉我 div 的作用。
1_bit是的所以之前那个用 div 的那个示例只是介绍一下使用 div 包裹起来也没啥问题依旧生效。
小媛明白了。
1_bit当然也可以直接使用css类进行调用也行例如下面示例。 小媛直接在标签名后面一个小数点就是类名了对吧
1_bit是的。
小媛那我明白了不过还有一个问题就是 first-child 这些伪类是固定的吗还有哪些呢
1.2 超链接伪类
1_bit伪类还有挺多的下面介绍几个较为常用的伪类就用超链接 a 标签增加效果的伪类为例例如设置超链接未访问时颜色、已访问时颜色、鼠标滑过颜色、已选中后颜色为例。未访问颜色的设置使用 link 伪类、已访问使用visited、鼠标滑过使用hover、已选中使用active。如下示例为演示demo。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程 伪类 伪元素/titlestylea:link{color: red}a:visited{color:blue}a:hover{color:green}a:active{color:orange}/style
/head
bodya hrefhttp://www.baidu.com这是个链接/aa hrefhttp://www.csdn.com这也是个链接/a
/body
/html小媛哇感觉很舒服呀这样我做出来的一个网页导航也能美美哒的了。
1_bit是的但是你需要注意一个点在使用以上说明的这几个伪类时我们需要注意 hover 必须被写于 link 和 visited 之后否则无法生效哟还有就是 active 必须放在 hover 之后也才生效这点一定要注意。
小媛明白了。
1.3 其他伪类
1_bit我们在之前内容中有使用过列表标签 ul那如何使用伪类给列表的第一项元素标记值呢这个也很简单查看以下示例。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程 伪类 伪元素/titlestyleul li:first-child{color: orangered;}/style
/head
bodyulli第一项值/lili第二项值/lili第三项值/li/ululli第一项值/lili第二项值/lili第三项值/li/ul
/body
/html小媛原来如果指定某个元素下的元素只需要在他们之家加一个空格就可以了呀。
1_bit是的咱们再看一个示例将会更加清晰这种方式。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程 伪类 伪元素/titlestyleul li:first-child{color: orangered;}p a:first-child{color: brown;}/style
/head
bodyulli第一项值/lili第二项值/lili第三项值/li/ululli第一项值/lili第二项值/lili第三项值/li/ulp这是个p标签/pp这是个p标签/pp这是 p 元素内容a hrefhttp://www.baidu.com这是 p 元素下的 a 标签/a/p/body
/html小媛哇可以这样呀我明白了。
1_bit还可以给第一个 li 元素中的某个标签一个样式例如如下示例。 1_bit结果如下。 小媛又解锁了一个新知识了解了。
1_bit伪类还有很多咱们可以通过这个链接查看其它的伪类 点击查看
二、伪元素
1_bit现在咱们开始讲一下什么是伪元素。
小媛还有伪元素呀
1_bit对的伪元素和伪类的理解概念类似伪元素就是指模拟一个元素来实现某种效果。例如先看一个简单的示例咱们在一句话中需要给开头的第一个字标红这个时候常规的写法如下。 小媛这个我懂那伪元素呢
1_bit伪元素就很简单了如下示例就可以直接使第一个字符编程绿色了。 1_bit伪元素的写法就是 标签::伪元素随后即可对对应的样式进行生效。
小媛哇真的好方便呀。
1_bit伪元素还可以使用 first-line第一行、before在什么之前、after在什么之后等例如如下示例。 1_bit以上示例中第一个p标签的文字为绿色、第一行first-linep标签的颜色为红色、在标签之后after添加文本其中 content 就是文本属性添加的文本是“在后面添加了文本”、最后一个为 before在什么之前添加文本。这些伪元素还可以给予样式颜色大小等最终的演示效果如下 小媛哇原来是这么回事我明白了。
1_bit这两节的 css 相关内容咱们就说道这现在有了基本的css知识点在之后的学习中会更加的舒服咱们在之后还会开启一个CSS学习的阶段届时将会更好的学习CSS 相关的内容随后就可以制作比较精美的网页了。
小媛迫不及待了。
目录
【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
