iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >CSS中选择符怎么用
  • 839
分享到

CSS中选择符怎么用

2024-04-02 19:04:59 839人浏览 安东尼
摘要

这篇文章给大家分享的是有关CSS中选择符怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   以下提示注意事项:   1.如何选择使用id选择符还是class选择符:当确

这篇文章给大家分享的是有关CSS中选择符怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  以下提示注意事项:

  1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符。

  2.通用选择符在所有元素上设置样式,并不是只设置继承的默认值。

  eg:

  注意:使用通用选择符,<em>标签里的内容显示为绿色,而不是<h2>标签的蓝色,它没有继承h2标签的样式。

  更改代码:

  此时em继承了h2的样式。

  3.注意后代选择器与子选择器的区别。(另总结

  4.简单伪类:

  (1):active 被激活的元素(例如激活的链接)。

  (2):first-child 元素的第一个子元素。

  (3):focus 有焦点的元素(例如接收输入的表单字段)。

  (4):hover 指向的元素(例如通过鼠标)。

  (5):lang() 特定语言的样式。

  (6):link 未跟踪的链接。

  (7):visited 以前访问过的链接。

  注意:

  (1) 将伪类和其他的类和伪类放在一起使用时,中间不要留空格,只有。和:指示符。

  eg   a.offsite:link{color:green;}

  (2) link伪类和visited伪类经常一起使用,用link伪类设置链接未访问时的样式,用visited设置链接访问后的样式。

  (3) :first-child伪类用于选择元素,选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。(:first-child 伪类前面的部分),那么将规则应用于该元素。

  eg:

  表格中的数字表示支持该属性的第一个浏览器版本号。

  注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>

  ie7.0以前的浏览器是不支持first-child选择器的,所以使用class给特定元素设置样式。

  (4):lang()伪类

  指示规则应用于匹配某种语言的元素;

  eg:

  5.CSS中的伪元素

  :before 插入元素前的内容

  :after 插入元素后的内容

  :first-letter 块元素的第一个字母

  :first-line 块元素的第一行

  (1):first-line伪元素是虚拟伪元素,它只添加应用于首行的特殊样式指示元素的首行。

  eg:

  注意:当浏览器窗口,字体的大小改变时,设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时,网页作者不知道首行 在哪里结束。

  (2):first-letter伪元素可以为块元素的首个字母添加特定的样式。

感谢各位的阅读!关于“CSS中选择符怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: CSS中选择符怎么用

本文链接: https://www.lsjlt.com/news/92342.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS中选择符怎么用
    这篇文章给大家分享的是有关CSS中选择符怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   以下提示注意事项:   1.如何选择使用id选择符还是class选择符:当确...
    99+
    2024-04-02
  • css中有什么选择符
    小编给大家分享一下css中有什么选择符,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是...
    99+
    2023-06-14
  • CSS选择符的使用
    这篇文章主要讲解了“CSS选择符的使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择符的使用”吧!CSS选择符详解一、类型选择符什么是CSS选择符...
    99+
    2024-04-02
  • CSS选择符有什么作用
    本篇内容主要讲解“CSS选择符有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS选择符有什么作用”吧!CSS选择符(选择器):表示要定义样式的对象1...
    99+
    2024-04-02
  • CSS选择符是什么
    这篇文章将为大家详细讲解有关CSS选择符是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 选择符:标签选择符、类选择符、id选择符; 继承不如指定Id>cl...
    99+
    2024-04-02
  • css中有哪些选择符
    这篇“css中有哪些选择符”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“css中有哪些选择符”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。css中...
    99+
    2023-06-06
  • CSS的选择符组怎么定义
    这篇文章主要讲解了“CSS的选择符组怎么定义”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS的选择符组怎么定义”吧!   1. CSS的语法:   ...
    99+
    2024-04-02
  • 如何使用CSS选择符
    如何使用CSS选择符,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。类型选择符(TypeSelectors)语法:E1说明:有的时候我们也将它叫...
    99+
    2024-04-02
  • css中focus选择器怎么用
    这篇文章主要为大家展示了“css中focus选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中focus选择器怎么用”这篇文章吧。   css...
    99+
    2024-04-02
  • 怎么编写高效的CSS选择符
    这篇文章将为大家详细讲解有关怎么编写高效的CSS选择符,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先看一小段 CSS 代码:#menus > li { f...
    99+
    2023-06-08
  • CSS选择符的使用技巧
    这篇文章主要讲解了“CSS选择符的使用技巧”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择符的使用技巧”吧!CSS选择符说明这里介绍CSS的几个选择...
    99+
    2024-04-02
  • CSS子选择符和后代选择符的区别是什么
    这篇文章主要为大家展示了“CSS子选择符和后代选择符的区别是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS子选择符和后代选择符的区别是什么”这篇文章吧...
    99+
    2024-04-02
  • CSS中选择符的实际使用方法
    这篇文章主要介绍“CSS中选择符的实际使用方法”,在日常操作中,相信很多人在CSS中选择符的实际使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中选择符的实际使用...
    99+
    2024-04-02
  • Css选择器怎么用
    这篇文章主要为大家展示了“Css选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css选择器怎么用”这篇文章吧。1.Padding:当元素的 Padd...
    99+
    2024-04-02
  • css中的focus选择器怎么用
    这篇文章给大家分享的是有关css中的focus选择器怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   focus选择器   :focus选择器被用来指定“表单元素”获...
    99+
    2024-04-02
  • CSS选择符有哪些
    小编给大家分享一下CSS选择符有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! id 选择器 #app 类选择器 .co...
    99+
    2024-04-02
  • CSS中的id选择器怎么用
    这篇文章主要介绍了CSS中的id选择器怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 id 选择器可以为标有特定 id 的 HTML...
    99+
    2024-04-02
  • CSS选择符之子代选择符的示例分析
    这篇文章给大家分享的是有关CSS选择符之子代选择符的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。后代选择符用于选取一个标签的所有后代,包括子代和孙辈等;而子代选择符只选取指定父辈的子代标签(指定标签元素...
    99+
    2023-06-08
  • Css中:checked的选择器怎么用
    这篇文章主要为大家展示了“Css中:checked的选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css中:checked的选择器怎么用”这篇文章吧...
    99+
    2024-04-02
  • css中选择符的命名规定
    这篇文章主要介绍“css中选择符的命名规定”,在日常操作中,相信很多人在css中选择符的命名规定问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css中选择符的命名规定”的疑惑...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作