精华内容
下载资源
问答
  • 列举常用的属性选择器
    千次阅读
    2022-04-04 17:50:37

    一、写在前面
    css选择器有很多,但是常用到的也就几个,今天总结一下。
    二、具体选择器
    2.1、id选择器

    #myId {}
    

    2.2、类选择器

    .myClass {}
    

    2.3、标签选择器

    p,h1 {}
    

    2.4、后代选择器

    div h1 {}
    

    2.5、子选择器

    div>h1 {}
    

    2.6、兄弟选择器(所有的兄弟)

    ul~h1 {}
    

    2.7、相邻兄弟选择器

    ul+h1 {}
    

    2.8、属性选择器

    li[name='sss'] {}
    

    2.9、伪类选择器

    h1:hover {}
    

    2.10

    h1::before{}
    

    2.11、通配符选择器*

    * {}
    
    更多相关内容
  • 本文给大家汇总介绍了jQuery的四种选择器的使用方法以及示例,非常的简单实用,希望对大家学习jquery能够有所帮助。
  • 三种常用CSS选择器

    千次阅读 2021-06-02 20:39:10
    CSS样式表的样式规则是由三个部分构成:Selector(选择器),Property(属性)和Value(属性的取值)。 基本的格式如下:Selector {property:value; property:value;…; property:value}

     每个样式都是由一系列规则组成,每条规则有两部分:选择器和声明。每条声明又是属性和值的组合。规则左边是选择器,右边是CSS属性和值。CSS选择器指明文档中要应用此样式的元素,可以有多种形式。

    (1)标签选择器 标签选择器也称标记选择器,HTML中的每个标签都有默认的样式,标签选择器的主要作用是提供重新定义HTML元素样式的方法。例如,以下为给<p>标签定义的样式。

    以上样式定位文档中的p标签的样式为“字体为宋体,字号为24px,颜色为红色”。应用该样式的页面中的所有p标签都将具有“字体为宋体,字号为24px,颜色为红色”的样式。

    (2)ID选择器 ID选择器使用时需要设置标签的ID属性,对与一个网页而言,每一个标签均可以使用ID="ID名"的形式对ID属性进行名称的指派。 在定义ID选择器时,要在ID名称前面加一个“#”号。

    (3)类选择器 使页面中的某些标签(可以是不同的标签)具有相同的样式。CSS定义的时候和ID选择器差不多,只不过把#换成.。

     

    展开全文
  • jQuery常用选择器有哪些?

    千次阅读 2021-11-30 22:24:17
    jQuery常用选择器有哪些? jQuery里面使用最频繁的选择器应该就是 id选择器$('#element-id') class选择器$('.class-name') 标签选择器$('element-name')了。另外还有: 1.层次选择器(能者多劳) 通过DOM元素间...

    jQuery常用选择器有哪些?

    jQuery里面使用最频繁的选择器应该就是

    id选择器$('#element-id')

    class选择器$('.class-name')

    标签选择器$('element-name')了。另外还有:

    1.层次选择器(能者多劳)

    通过DOM元素间的层次关系获取元素,主要层次关系包括后代、父子、相邻、兄弟关系等。

    根据祖先元素匹配所有后代元素: $('ancestor descendant')

    根据父元素匹配所有的子元素: $('parent > child')

    匹配所有紧接在prev元素后的相邻元素: $('prev + next')

    匹配prev元素之后的所有兄弟元素:$('prev ~ siblings')

    2.过滤选择器(能者多劳)

    过滤选择器根据某类过滤规则进行元素的匹配,以:开头。过滤选择器又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

    简单过滤选择器

    获取第一个和最后一个元素:

    $(':first')

    $(:last')

    获取所有索引值为偶数和奇数的元素,索引值从0开始:

    $(':even')

    $(':odd')

    获取等于、大于和小于索引值的元素:

    $(':eq(index)')

    $(':gt(index)')

    $(':lt(index)')

    获取除给定的选择器外的元素:

    $(':not(selector)')

    内容过滤选择器

    获取包含给定文本的元素:$(':contains(text)'):

    获取所有不包含子元素或者文本的空元素:$(':empty')

    获取含有选择器所匹配的元素的元素: $(':has(selector)')

    获取含有子元素或文本的元素: $(':parent')

    可见性过滤选择器

    获取所有不可见的元素,或者type为hidden的元素:

    $(':hidden')

    获取所有可见的元素:

    $(':visible')

    属性过滤选择器

    获取包含给定属性的元素: $('element[attribute]')

    获取属性是给定值的元素: $('element[attribute=value]')

    获取属性不是给定值的元素:$('element[attribute!=value]')

    获取属性是以给定值开始的元素:$('element[attribute^=value]')

    获取属性是以给定值结束的元素: $('element[attribute$=value]')

    获取属性是包含给定值的元素: $('element[attribute*=value]')

    子元素过滤选择器

    获取父元素下的第一个、最后一个子元素:

    $(':first-child')

    $(':last-child')

    表单对象属性过滤选择器

    获取表单中所有被选中的元素:$(':checked')

    获取表单中所有被选中option的元素:$(':selected')

    3.表单选择器

    通过它可以在页面中快速定位某表单里面写的元素。

    获取所有input、textarea、select等input元素:$(':input')

    获取所有单行文本框:$(':text')

    获取所有密码框:$(':password')

    获取所有单项按钮:$(':radio')

    获取所有复选框:$(':checkbox')

    获取所有提交按钮:$(':submit')

    获取所有图像域:$(':image')

    获取所有重置按钮:$(':reset')

    获取所有按钮:$(':button')

    获取所有文件域:$(':file')

    展开全文
  • 常用选择器 id选择器#id #firstname 选择 id=“firstname” 的所有元素。 类选择器.class .intro 选择 class=“intro” 的所有元素。 通配符* * 选择所有元素 标签选择器element p 选择所有 p元素。 并级选择器...

    常用选择器

    id选择器#id
    #firstname 选择 id=“firstname” 的所有元素。

    类选择器.class
    .intro 选择 class=“intro” 的所有元素。

    通配符* * 选择所有元素

    标签选择器element
    p 选择所有 p元素。

    并级选择器element,element
    div,p 选择所有 div 元素和所有 p 元素。

    父子级element element
    div p 选择 div元素内部的所有 p元素。

    直接子级element>element
    div>p 选择父元素为 div 元素的所有 p 元素。

    相邻兄弟选择器element+element
    div+p 选择紧接在 div 元素之后的所有 p 元素。

    属性选择器[attribute]
    [target] 选择带有 target 属性所有元素。

    属性值选择器[attribute=value]
    [target=_blank] 选择 target="_blank" 的所有元素。

    选择器的权重规则

    权重是什么?

    如果一个标签里面又有类又有id选择器的话,标签的渲染会听谁的话呢?

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择器的权重</title>
        <style>
            #box {
                background-color: red;
            }
            
            .box {
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div class="box" id="box">div1</div>
    </body>
    
    </html>
    

    在这里插入图片描述
    根据渲染结果我们可以得出,它听了id选择器的话。
    因为选择器之间的权重不一样,如果选择器之间的css产生冲突,那么权重越大的可以覆盖掉权重小的
    但是由于css有三种不同的引入形式(行内,内部,外部)所以根据不同的引入形式,权重也不一样: 行内的权重最重, 内部的权重次之,写在 外部css文件里面的样式权重最低

    一、选择器类型

    1、ID  #id

    2、class  .class

    3、标签  p

    4、通用  *

    5、属性  [type=“text”]

    6、伪类  :hover

    7、伪元素  ::first-line

    8、子选择器、相邻选择器

    二、权重计算规则

    第一等:代表内联样式,如: style=””,权值为1000。
    第二等:代表ID选择器,如:#content,权值为0100。
    第三等:代表类,伪类和属性选择器,如.content,权值为0010。
    第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。
    通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
    继承的样式没有权值。
    三、比较规则

    1,0,0,0 > 0,99,99,99,也就是说从左往右逐个等级比较,前一等级相等才往后比

    1, 0 , 0, 0
    0, 99 , 99 , 99

    !important 的作用是提升优先级,加了这句的样式的优先级是最高的

    css3新增常用选择器

    :first-of-type
    p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。

    :last-of-type
    p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。

    :only-of-type
    p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。

    :only-child
    p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。

    :nth-child(n)
    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。

    :nth-last-child(n)
    p:nth-last-child(2) 同上,从最后一个子元素开始计数。

    :nth-of-type(n)
    p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个 p 元素。

    :nth-last-of-type(n)
    p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。

    :first-child
    p:first-child 选择属于父元素的第一个子元素的每个 p 元素。

    :last-child
    p:last-child 选择属于其父元素最后一个子元素每个 p 元素。

    :not(selector)	
    :not(p)	选择非 p元素的每个元素。
    

    其他更多选择器清前往w3school

    展开全文
  • 作为一个Web开发者,掌握...严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=的方式,应该是CSS的一种
  • CSS常用属性

    千次阅读 2022-03-31 16:21:36
    包含css常用文本属性,css常用背景属性,和其他css常用属性
  • 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 基本语法格式:*{ 属性1:属性值1;属性2:属性值2;} 例子 使用该选择器定义样式,清除所有HTML标记的默认边距。 *{ ...
  • 选择器的权重

    千次阅读 2021-04-08 20:15:28
    概念:在Css中,有一些属性, 如果给父级元素设置了,那么它的后代元素都将继承这个属性。 如: p、h3标签,可以从它的祖先元素中继承了文字的属性,没有继承盒子的属性。 注:只有文字的属性能够继承,盒子的属性不能...
  • CSS选择器用法大全

    千次阅读 2021-06-10 16:10:32
    CSS基础选择器CSS选择器又分为标记选择器、类选择器、id选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器,对它们的具体解释如下。1. 标记选择器标记选择器是指用HTML标记名称作为选择器,按标记...
  • 【jquery】jquery选择器有哪些

    千次阅读 2020-03-25 16:05:06
    4大类:基本选择器、层次选择器、过滤选择器、表单选择器 ...基本选择器是JQuery最常用选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。 $("#myELement") 选择id值等于...
  • css类选择器大全

    千次阅读 2022-03-04 11:07:57
    文章目录一、常用的scc选择器?二、使用步骤2.读入数据总结 # 前言 ...class(属性选择器)>type(违元素选择器)>*所以 二、使用步骤 2.读入数据 代码如下(示例): 总结 提示:这里对文章进
  • CSS 三种基础选择器

    千次阅读 2020-08-28 13:06:08
    在 CSS 中三三种最基本的选择器,分别是标签选择器、类选择器(class)、ID选择器。 我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式,也就是将 CSS 代码单独放置到一个 .css 文件内,然后再引入这个 ...
  • 选择器类型: 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 :hover 7、伪元素 ::first-line 8、子选择器、相邻选择器   权重计算规则: 1、第一等:代表内联...
  • jQuery的选择器分类都有哪些?

    千次阅读 2020-12-18 20:26:31
    其中在过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。 目录 jQuery的选择器分类都有哪些?基本过滤选择器层次选择器简单...
  • css基础选择器有哪些

    千次阅读 2019-01-25 09:11:21
    css基础选择器有哪些(熟记) 一、选择器作用:规范了页面中哪些元素能够定义好样式,同时也能帮助我们去 二、选择器分类 1. 通用选择器(只能放在样式表) 1. 作用:匹配页面上的所有元素 2. 语法:* ...
  • CSS基础选择器(7种)

    千次阅读 2020-04-05 10:06:52
    标记选择器选择器 id选择器 通配符选择器 标签指定式选择器 后代选择器 并集选择器 (1)标记选择器 标记选择器是指用 HTML标记 名称作为 选择器 ,按标记名称分类,为页面中 某一类标记 指定 统一 的CSS样式。...
  • css选择器知识点+案例及运行结果

    千次阅读 2021-04-22 16:42:31
    选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 在样式规则中,选择器用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。其中,属性属性值以“键值对”的形式出现,用英文“:”连接...
  • CSS的四种基本选择器和四种高级选择器

    万次阅读 多人点赞 2018-07-11 13:48:38
    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 CSS的选择器分为两大类:基本选择题和扩展选择器。 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的...
  • CSS选择器用于选择你想要的元素的样式的模式。伪类元素主要用于对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。 伪类选择器 1.UI元素状态伪类选择器 UI元素状态伪类选择器主要用于根据UI...
  • 首先,jquery选择器返回jquery对象!!! 只不过jquery对象有length属性,会告诉你这个jquery对象包含多少个dom对象。 如果直接使用jquery对象,可以去参阅jquery文档。 其次jquery对象根据下标取值后,会返回dom...
  • 一、打开属性标签编制程序有多种方法可以启动属性标签编制程序:(1)启动SolidWorks 2013,选择【任务窗格】>【SolidWorks资源】中的【属性标签编制程序】,如图1所示。图1 任务窗格中的属性标签编制程序(2)点击...
  • css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器?css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型。 我们话不多说,直接...
  • jQuery选择器及jQuery基本操作

    千次阅读 多人点赞 2020-03-18 20:23:31
    jq选择器2. 属性操作3. Class操作4. 样式操作5. 内容操作6. 尺寸操作 1. jq选择器 jq的选择器,就是在执行jq函数时传参 是用来获取DOM元素的方法,通过下标可以获取其中某一个DOM元素 $ 函数不管使用选择器选中了...
  • CSS选择器的权重

    千次阅读 2021-05-13 17:45:10
    每天一个前端面试题之 CSS选择器的权重 首先,CSS样式的引入有三种方式,行间样式,内联样式,外联样式。 其权重为 行间样式>内联样式>外联样式 其次,CSS的选择器有以下类型: 1)id选择器(#id) 使用ID...
  • jQuery常用选择器

    千次阅读 2019-09-01 01:44:22
    2.jQuery选择器基于:ID、类、属性等"寻找",或"选择"HTML元素,除了已经存在的CSS选择器,还有一些自定义选择器! 3.jQuery中,所有选择器都以:$ 符号开头,例如: $(); jQuery元素选择器 元素选择器:基于...
  • Playwright选择器

    千次阅读 2021-08-02 21:42:22
    Playwright选择器CSS选择器标签IDClass其他属性多种属性同时使用组合选择器伪类XPATH选择器playwright自定义选择器文本选择器定位可见元素按包含的元素定位根据页面布局定位元素定位第n个元素总结 Playwright支持...
  • 2、id选择器#id属性值{ } 3、类选择器·class属性值{ } 4、选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对应的元素(通常用于集体声明) 语法:选择器1,选择器2,选择器n{ } 5、复合选择器...
  • 一、简述在上一篇Qt 之 样式表的使用——样式选择器(上篇) 文章中讲述了前四种样式选择器,今天完成剩下的几种选择器的介绍。二、样式选择器样式表的样式规则今天开头先简单讲解一下样式表的样式规则。 Qt文档给...
  • CSS选择器的权重计算

    千次阅读 2017-02-28 16:42:55
    刚好是在做面试题的时候,发现有一个题目时关于CSS选择器的权重计算,当时脑海中只知道:id>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,至于权重的计算其实没有多大的印象,所以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,184
精华内容 24,473
热门标签
关键字:

列举常用的属性选择器