web CSS选择器、权重及文档标签

后代选择器

  • 后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式
    语法:祖先元素 后代元素 后代元素{ }

给链接定义样式

  • a:link 正常链接
  • a:visited 访问过得链接
  • a:hover 鼠标滑过的链接
  • a:active 正在点击的链接

其他

  • :focus 获取焦点
  • :before 指定元素前
  • :after 指定元素后
  • ::selection 选中的元素

其他选择器

给段落定义样式
  • :first-letter 首字母
  • :first-line 首行
属性选择器

[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

子元素选择器

  • 子元素选择器可以给另一个元素的子元素设置样式
    语法: 父元素>子元素{ }

其他子元素选择器

  • :first-child 选择第一个子标签
  • :last-child 选择最后一个子标签
  • :nth-child 选择指定位置的子元素
  • :first-of-type 选择指定类型的子元素
  • :last-of-type 选择指定类型的子元素
  • :nth-of-type 选择指定类型的子元素

兄弟选择器

  • 除了根据祖先父子关系,还可以根据兄弟关系查找元素
语法:

兄弟元素+兄弟元素{ } 查找后边一个兄弟元素
兄弟元素~兄弟元素{ } 查找后边所有的兄弟元素

否定伪类

  • 否定伪类可以帮助我们选择不是其他东西的某件东西
    语法::not(选择器){ }

继承

  • 继承是指应用在一个标签上的那些CSS样式会同时被应用到其他内嵌标签上,比如为父元素设置了字体颜色,子元素也会应用上相同的颜色

选择器的权重

  • 不同的选择器有不同的权重值
    内联样式:权重是1000
    ID选择器:权重是100
    类、属性、伪类选择器:权重是10
    元素选择器:权重是1
    通配符:权重是0

文本标签

<em>和<strong>
  • em标签表示一段内容中的着重点
  • strong标签用于表示一个内容的重要性
    (这两个标签可以单独使用,也可以一起使用,通常em显示为斜体,而strong显示为粗体)
<i>和<b>
  • i标签会使文字变成斜体
  • b标签会使文字变成粗体
    (这两个标签和em,strong类似,但是这两个标签没有语义)
<small>
  • <small>标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
    (浏览器在显示<small>标签时会显示一个比父元素小的字号)
<cite>
  • 使用<cite>标签可以指明对某内容的引用或参考。例如:戏剧、文章和图书的标题、歌曲、电影、照片或雕塑的名称等。
<blockquote>和<q>
  • <blockquote>和q表示标记引用的文本
  • <blockquote>用于常长引用,q用于短引用
    (在两个标签中还可以使用cite属性来表示引用的地址)
sup和sub
  • sup和sub用于定义上标和下标
<ins>和<del>
  • ins表示插入的内容,显示时通常会加上下划线
  • del表示删除的内容,显示时通常会加上删除线
<code>和<pre>
  • 如果你的内容包含代码示例或文件名,就可以使用code元素
  • pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容