Manchan's blog Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
    • CSS选择器的优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
      • 元素选择器的级联语法
      • 标签选择器二三事
      • 特殊的标签选择器:通配选择器
    • 属性选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
    • 树结构伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-25
目录

元素选择器

元素选择器主要包括两类,一类是标签选择器,一类是通配符选择器。

# 元素选择器的级联语法

不同类型的 CSS 选择器的级联使用是非常常见的,如:

svg.icon {
    vertical-align:-.25em;
}
1
2
3

元素选择器的级联语法和其他选择器的级联语法有两个明显的不同之处。

  1. 不能重复自身

    类选择器、ID 选择器和属性值匹配选择器都可以重复自身,例如:

    .foo.foo {}
    #foo#foo {}
    [foo][foo] {}
    
    1
    2
    3

    但是元素选择器不能重复自身:

    foo*foo {} /*无效*/
    
    1

    因此,元素选择器无法像其他选择器那样通过重复自身提高优先级,但可以增加body或html嵌套、:not()伪元素等方法提高优先级。

  2. 必须写在最前面

    input[type="radio"] {}/*有效*/
    [type="radio"]input {}/*无效*/
    
    1
    2

# 标签选择器二三事

标签选择器又叫类型选择器,它是一个相对比较简单的选择器,虽然不区分大小写但是建议使用主流的小写。

# 标签选择器混合其他选择器的优化

input[type="radio"] {}
a[href~="http"]{}
img[alt] {}
1
2
3

实际上上面例子里的标签是可以并推荐省略的,因为很多属性是某些标签元素所特有的。

div#cs-some-id {}
1

由于ID是唯一的,故没有理由在这种情况下使用div标签选择器。

# 标签选择器与自定义元素

对于现代浏览器,我们可以直接使用自定义元素的标签控制自定义元素的样式。

<html>
    <x-element>自定义元素</x-element>
</html>

<style>
    x-element {
        color:chocolate;
    }
</style>
1
2
3
4
5
6
7
8
9

# 特殊的标签选择器:通配选择器

通配选择器是一个特殊的标签选择器,它可以指代所有类型的标签元素,包括自定义元素,以及<script>、<style>、<title>等元素,但是不包括伪元素。

当通配选择器和其他选择器级联使用的时候,星号都是可以省略的。

由于通配选择器 (*)匹配所有元素,因此它是比较消耗性能的一种 CSS 选择器,同时由于其影响甚广,容易出现一些意料之外的样式问题,因此请谨慎使用。

微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/11/25 19:40:50
精通CSS选择符
属性选择器

← 精通CSS选择符 属性选择器→

最近更新
01
文档
02-03
02
前端面试学习
01-02
03
Markdown首行缩进
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式