最新公告
  • 欢迎您光临欧资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 你想自己做一个网站吗?那你知道网站是怎么做出来的吗?

    你想自己做一个网站吗?你知道网站是怎么做的吗?关注我,不断分享伪类选择器有哪些状态,一步一步做自己的网站。

    自己做一个前端网站,一定要掌握一些知识。其中,你一定知道CSS网站的美容师。如果你想让你的网站漂亮,你必须了解 CSS。昨天分享了四种 CSS 选择器。基本的选择器是通配符选择器、类选择器、标签选择器和 ID 选择器,但是知道这些还不足以制作一个复杂的网站界面。

    更别说网站了,就是一个网页,往往需要成百上千行代码,包含大量的 HTML 结构,光靠基本的选择器是不能满足要求的。关于 CSS 选择器,我们要实现以下几点。

    一、后代选择器

    后代选择器,也称为包含选择器,用于选择元素或元素组的后代。比如p标签中有span标签,那么如果被标签选择器选中,则p span用空格隔开。

    这是一个例子,你可以自己试试

    需要注意的是,当标签嵌套时,内标签成为外标签的后代。后代可以选择这样做。换句话说,它可以选择任何包含的标签。div a的写法会使其选中div下的所有a,并使每个a中的所有文字都变成粉红色,所以后代选择器仍然不能满足某些情况。

    二、子元素选择器

    子元素选择器只能选择元素的子元素(父子元素)。写法是把父标签写在前面,子标签写在后面,中间用`>`连接。

    这是子元素选择器

    子元素选择器可以进一步找到要选择的标签,然后可以更准确的改变要改变的元素的样式,避免污染,这样以后有变化我们的网站就不会乱了。

    三、交集选择器

    交集选择器是和手段。这意味着……和……

    交集选择器由两个选择器组成,找到的标签必须同时满足:标签一的特征和标签二的特征。

    这样,只有 p 中类名 red 的单词发生了变化。

    当我们在浏览器中打开它时,我们可以在我们的网页中看到这三个字的颜色。

    只看到第一个 bian’h

    第一个是标签选择器,第二个是类选择器。两个选择器之间不能有空格。P.red 之间没有空格,但后代选择器必须用空格分隔。

    这就是交集选择器的作用,可以更清楚地区分要选择的标签元素,但是这样就够了吗?当然远远不够。

    四:联合(分组)选择器

    如果某些选择器定义了相同的样式伪类选择器有哪些状态,您可以利用联合选择器,这可以使您的代码更加简洁。联合选择器(CSS选择器分组)是由`,`连接的选择器的组合,通常用于集体声明。

    联合选择器通常用于集体声明。它们用逗号分隔。所有选择器都将执行以下样式。逗号可以理解为sum的意思。

    这里的最后两个不会改变

    打开浏览器可以看到后面不会出现bian了

    联合选择器是一组与要选择的特征相匹配的元素。

    当然,选择器有很多,但最常用的是后代选择器。至于交集和并集选择器,它们只用于一些特殊场景。

    五:其他一些选择器

    因为伪类选择器有很多,比如链接伪类、结构伪类等,这里先解释一下链接伪类选择器。

    为了与我们刚刚学习的类选择器区分开来,类选择器是一个点,例如 .demo {},而我们的伪类使用 2 个点,即冒号,例如:link{} : hover{} : after{} 等. :hover{} 表示当鼠标经过时元素会发生变化,比如鼠标箭头可以变成小手等等。

    六、选择器总结

    后代选择器用于选择元素后代,它选择所有后代

    子选择器选择最近的层级元素,只选择父子

    交集选择器选择两个标签的交集都为的部分,表示

    联合选择器选择一些相同风格的选择器可以在集体声明中使用

    链接伪类选择器改变链接的状态

    标签选择器,选择所有对应的标签

    类选择器选择具有相同类名的所有标签

    ID 选择器选择由唯一 id 标识的标签

    CSSb标签选择器就说到这里了,希望大家多多关注,一起学习,一起交流。

    站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
    欧资源网 » 你想自己做一个网站吗?那你知道网站是怎么做出来的吗?

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    欧资源网
    一个高级程序员模板开发平台

    发表评论