CSS selector

zorpan 发布于2019-08-30 14:05 / 1892人阅读

摘要：选择直接父元素为元素的元素选择元素同级的第一个选择元素同级的所有，选择所有和选择元素内部的所有第一个编号为匹配父元素下仅有的一个子元素，匹配父元素下使用同种标签的唯一一个子元素，

div>p（选择直接父元素为div元素的p元素）
div+p（选择div元素同级的第一个p）
div~p （选择div元素同级的所有p）
div，p （选择所有div和p）
div p （选择div元素内部的所有p）

第一个child编号为1
p:nth-child(3)
p:nth-child(odd)
p:nth-child(even)
p:nth-child(2n+11)

p:nth-last-child(n)
p:last-child

p:nth-of-type(n)
p:nth-last-of-type(n)
p:last-of-type

p:not(:last-of-type)

p:only-child(匹配父元素下仅有的一个子元素，equal :first-child:last-child OR :nth-child(1):nth-last-child(1))
p:only-of-type(匹配父元素下使用同种标签的唯一一个子元素，equal :first-of-type:last-of-type OR :nth-of-type(1):nth-last-of-type(1))

p:root(匹配文档的根元素，对于html文档，就是html元素)
p:empty(匹配一个不包含任何子元素的元素，文本节点也被当作子元素)

p:enabled
p:disabled
p:checked
:not(p)

p:first-of-type(parent下面第一个type是p的孩子)
p:first-child(nth-child(1))(parent下面第一个child, 必须是p)

$("input[name="aaa"]").attr("checked”) //checked属性的值
$("input[name="aaa"]").prop("checked’) //radiobutton 选中 or 没选中
$("input[name="aaa"]").is(":checked’) //radiobutton 选中 or 没选中

$(’select option’).filter(‘:selected’)
$(’select option’).filter(‘[selected]’)

$(‘:text’).val($(‘’).val());

^= (start with)
$= (ends with)
= (exactly equal)
!= (not equal)
*= (contains)
e.g. $(‘[id^=“item”]")

GPU云服务器云服务器 Selectors Selector css引入css css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115768.html

我对CSS选择器的认识

摘要：还有两个选择器是功能性的，它们可以给元素已有内容之前或之后添加新内容。我做了一个项目，里面包含一个测试选择器的小功能，请看这里。二归纳下文中所有的都代表任何一个有效的选择器。我对CSS选择器的认识一、简述　　　　CSS选择器是对HTML元素进行选择的筛选条件，大概可以分为两类：特征选择器——根据元素自身所具有的某种特征进行筛选，比如名称、ID、属性等；关系选择器——根据元素与其他元...

李世赞 2019-04-23 13:27 评论0 收藏0
前端杂谈: CSS 权重 (Specificity)

摘要：前端杂谈权重权重想必大家都听说过一些简单的规则大部分人也都知道较长的权重会大于较短的权重高于但是具体规范是什么浏览器是按照什么标准来判定不同选择器的权重的呢让我们来看一下官方文档是怎么说的第一个关键词官方文档中用特异性来表示一个和其元素的相前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css sele...

SimonMa 2019-08-29 17:18 评论0 收藏0
CSS Selector覆盖顺序

摘要：我们都知道的定义是可以被覆盖的，但是覆盖的顺序可能并不清楚，本文的目的就在于介绍的覆盖顺序。之间的优先级顺序以下是不同之间的优先级，选择器。终极覆盖法关键字能够覆盖一切定义，无视前面提到的优先级顺序。我们都知道CSS的定义是可以被覆盖的，但是覆盖的顺序可能并不清楚，本文的目的就在于介绍CSS的覆盖顺序。三种类型CSS的优先级顺序 CSS有三种类型: inline style：以s...

bigdevil_s 2019-08-29 11:09 评论0 收藏0
JQuery干货篇之处理元素

摘要：表示要设置的属性名称，返回值就是要设置的属性值实例设置字体大小使用相对值设置属性值，在原有的基础上加上获取标签的字体同时设置多个属性方法方法设置或返回被选元素的文本内容。 JQuery干货篇之处理元素注意这里用的还是我前两篇用的例子，详情请看我的博客 attr attr() 方法设置或返回被选元素的属性值。语法： $(selector).attr(attribute) 返回被选...

tuantuan 2019-08-29 12:27 评论0 收藏0
JQuery干货篇之处理元素

摘要：表示要设置的属性名称，返回值就是要设置的属性值实例设置字体大小使用相对值设置属性值，在原有的基础上加上获取标签的字体同时设置多个属性方法方法设置或返回被选元素的文本内容。 JQuery干货篇之处理元素注意这里用的还是我前两篇用的例子，详情请看我的博客 attr attr() 方法设置或返回被选元素的属性值。语法： $(selector).attr(attribute) 返回被选...

weij 2019-08-20 16:01 评论0 收藏0
JQuery干货篇之处理元素

摘要：表示要设置的属性名称，返回值就是要设置的属性值实例设置字体大小使用相对值设置属性值，在原有的基础上加上获取标签的字体同时设置多个属性方法方法设置或返回被选元素的文本内容。 JQuery干货篇之处理元素注意这里用的还是我前两篇用的例子，详情请看我的博客 attr attr() 方法设置或返回被选元素的属性值。语法： $(selector).attr(attribute) 返回被选...

zhaofeihao 2019-08-01 16:44 评论0 收藏0