首页 > 其他分享 >CSS选择器_基础选择器和扩展选择器

CSS选择器_基础选择器和扩展选择器

时间:2022-10-22 11:44:38浏览次数:41  
标签:状态 元素 扩展 id 语法 选择器 CSS 属性

5. 选择器:筛选具有相似特征的元素
* 分类:
  1. 基础选择器
    1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
      * 语法:#id属性值{}
    2. 元素选择器:选择具有相同标签名称的元素
      * 语法: 标签名称{}
      * 注意:id选择器优先级高于元素选择器
    3. 类选择器:选择具有相同的class属性值的元素。
      * 语法:.class属性值{}
      * 注意:类选择器选择器优先级高于元素选择器

  2. 扩展选择器:
    1. 选择所有元素:
      * 语法: *{}
    2. 并集选择器:
      * 选择器1,选择器2{}

    3. 子选择器:筛选选择器1元素下的选择器2元素
      * 语法: 选择器1 选择器2{}
    4. 父选择器:筛选选择器2的父元素选择器1
      * 语法: 选择器1 > 选择器2{}

    5. 属性选择器:选择元素名称,属性名=属性值的元素
      * 语法: 元素名称[属性名="属性值"]{}

    6. 伪类选择器:选择一些元素具有的状态
      * 语法: 元素:状态{}
      * 如: <a>
        * 状态:
          * link:初始化的状态
          * visited:被访问过的状态
          * active:正在访问状态
          * hover:鼠标悬浮状态

标签:状态,元素,扩展,id,语法,选择器,CSS,属性
From: https://www.cnblogs.com/xuche/p/16815607.html

相关文章

  • 选择器-基础选择器、扩展选择器、CSS属性
    选择器-基础选择器 <title>选择器</title><style>#div1{color:red;}#class1{color:gray;}......
  • CSS与HTML结合方式和CSS语法格式
    3.CSS的使用:CSS与html结合方式 1.内联样式 *在标签内使用style属性指定css代码 *如:<divstyle="color:red;">hellocss</div> 2.内部样......
  • CSS概述
    1.概念:CascadingStyleSheets层叠样式表*层叠:多个样式可以作用在同一个html的元素上,同时生效2.好处: 1.功能强大 2.将内容展示和样式控制分离 ......
  • CSS与html的结合方式、CSS语法格式
    CSS与html的结合方式<!--内联样式,在标签内使用style属性指定css代码--><divstyle="...">Hello</div><head><metacharset="UTF-8"><title>Title</ti......
  • CSS速览
    CSS样式引入样式种类外部样式表:<linkrel="stylesheet"type="text/css"href="mystyle.css">内部样式表:<style>内联样式表:style=""优先级:通用选择器(*)标签选......
  • css模块化导致antd引入无效的问题
    我用的是webpack5,在react18中配置cssmodule后导致antd全局样式失效,这时候可以考虑css单独配置不用模块化,less也单独有一套自己的配置,启用模块化,less用于业务代码,css用于第......
  • 伪类选择器
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>伪类选择器</......
  • HTML-案例-注册页面,CSS-概述
    HTML-案例-注册页面<!--定义表单from,post:获取#号--><formaction="#"method="post"><!--边框1集中,宽度500--><tableborder="1"align="center"width......
  • 纯css星空效果
    vue2版的<!--*@Description:星空*@Autor:赵婧*@Date:2022-09-0717:27:44*@LastEditors:赵婧*@LastEditTime:2022-10-2110:17:58--><template>......
  • docker安装postgres并启用postgis扩展
    镜像查看所有镜像dockerimages可以直接拉取postgis镜像dockerpullpostgis也可以在已有镜像上安装postgres,再启用扩展;dockerpullpostgres容器查看启动的容器......