2、css 选择器

Posted 2023-05-01

参考技术A

使用 * 可为所有元素设置样式。

根据标签为元素设置样式

同时设置多个元素组合

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

将类选择器指定为具体标签。这样样式的权重就提高了
注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话，就变成了 span下面所有class是help-block的选择器了

HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素（不只是子元素，是后代元素，子集，孙子级，所有的。。。）。

子元素选择器中选择子元素，不包括孙级及以下元素。

用于选择紧挨着的同级兄弟元素。

用于选择后面的所有指定的兄弟元素或者所有元素。

为具有 class 属性的h1标签设置样式

约束多个属性

具体属性值设置样式

^ 以指定值开头的元素

$ 以指定值结尾的元素

属性内部任何位置出现值的元素，包含关系

~ 属性值中包含指定词汇的元素

| 以指定值开头或以属性连接破折号的元素

jQuery选择器

jQuery选择器

基本选择器

选择id

$("#name"):选择id为name的元素

选择类

$(".name"):选择所有类为name的元素

选择元素

$("p"):选择所有标签为p的元素

通配符选择器

$("*")：选择所有的元素

并列选择器(选择器组)

这里可以并列所有类型的选择器，包括基本选择器，层次选择器，过滤选择器，表单选择器，组合选择器等等所有的选择器，把每一个选择按逗号分隔开，相当于每一个选择器都起作用，返回所有选择器的结果 $("#name,.name,p,div"):选择id为name的元素，所有的class为name的元素，以及所有标签为p的元素 $("p.name,div"):选择所有class名为那么的p元素和所有的div元素 $("div~p,.name"):选择所有的class为name的元素以及div后面的兄弟元素中的所有p元素

层次选择器

这里的每个选择器都可以是所有类型的选择器

选择后代元素

$("div p"):选择div元素的后代中的所有p元素 $(".name p"):选择class为name的元素得后代中的所有p元素 $("#name p"):选择id为name的元素的后代中的所有p元素

选择子元素

$("div>p"):选择div元素的子元素中的所有p元素 $(".name>p"):选择class为name的元素的子元素中的所有p元素 $("#name>p"):选择id为name的元素的子元素中的所有p元素

选择下一个兄弟元素

$("div+p"):选择div元素后面的标签为p的第一个兄弟元素 $(".name+p"):选择class为name的元素后面的标签为p的第一个兄弟元素 $("#name+p"):选择class为name的元素后面的标签为p的第一个兄弟元素 可以使用下面的方法来替代 $("div").next(".name") 与$("div>.name")功能一样

选择后面所有的兄弟元素

$("div~p"):选择div元素后面的标签为p的所有兄弟元素 $("#name~.name"):选择id为name元素的后面的所有的class为那么的兄弟元素 可以使用下面的方法来代替 $("div").nextAll("p")：与$("div~p")的功能一样 另外还有一个siblings方法 $("div").siblings("p"):表示选择div的所有兄弟元素中标签为p的元素，不管前后

过滤选择器

基本过滤选择器

:first

选择第一个元素，前面可以加一个任何类型的选择器，表示选择符合这些要求的选择器中的第一项
$(div:first):选择第一个div元素
$(div p:first):选择div元素的所有标签为p的后代元素中的第一项

:last

表示选择最后一项元素,和:first作用类似，就是选择的条件不同

:even

表示选择奇数项的元素,和:first作用类似，就是选择的条件不同

:odd

表示选择偶数项的元素,和:first作用类似，就是选择的条件不同

:eq(一个数字)

表示选择索引值等一这个数字的项，索引值从0开始
$(div:eq(0)):表示选择第一个div元素
$(div:eq(3)):表示选择第四个div元素 其他的和:first作用类似，就是选择的条件不同

:lt(一个数字)

表示索引值小于这个数字的所有的元素，索引值从0开始，其他的和:first作用类似，就是选择的条件不同

:gt(一个数字)

表示索引值大于这个数字的所有的元素，索引值从0开始，其他的和:first作用类似，就是选择的条件不同

not(selector)

表示选择和selector中给定的条件不同的元素，selector可以使任意的选择器，其他的和:first作用类似，就是选择的条件不同
$("div:not(.name)"):选择div元素中类名不是name的元素

:header

表示选的所有的标题元素h h1 h2等等
$(div :header):选择div的后代元素中所有的标题元素，注意这里有一个空格，如果没有空格就变成了选择所有的div中的标题元素，这样是没有意义的，所以:header一般都是作为一个独立的成分来使用的，不用依托于其他元素
$(":header"):选择页面中所有的标题元素

:animated

表示选择正在播放动画的元素 $(":animated"):页面中所有正在播放动画的元素
$("div:animate"):没有空格，表示选择所有正在播放动画的div元素
$("div :animated"):有空格，表示选择div后代元素中所有的正在播放动画的元素

基本过滤选择器总结

:first,:last,:eq(),:not(),:lt(),:gt(),:even(),:odd()
这些元素必须依托于其他元素或者选择器起作用，所以和前面的内容之间不能有空格
:header
它不依托与前面的元素或者选择器，所以可以单独使用，如果和其他选择器一起使用则是把它当做一个单独的选择器来用。
:animated
它同时具有上面两类元素的特点，既可以依托于其他的元素或者选择器，也可以自己单独使用

内容过滤选择器

:contains(text)

选取后代元素中含有给定的文本内容的元素，和元素或者各种选择器联合起来起作用
$(div:contains("我")):选取后代元素中含有“我”的div元素
$(div p:contains("w")):选取为div的后代元素的p元素的后代中，含有“我”的所有的p元素

:has(selector)

选取后代元素中含有符合selector要求的元素，和其他元素或者选择器一起使用
$("div:has(.name)"):选择后代元素中含有类名的name的元素的div元素

:empty

选择不含有子元素（包括文本元素）的元素

:parent

选择含有子元素（包括文本元素）的元素

属性过滤选择器

[attr]

选择含有某个属性的元素
$("div[title]“):选择含有title属性的div元素

[attr=value]

选择属性值等于某个值得元素
$("div[title=test]”):选择title属性的值等于test的div元素

[attr!=value]

选择属性不值等于某个值得元素
$("div[title!=test]”):选择title属性的值不等于test的div元素

[attr^=value]

选择属性值以某个字符或者字符串开头的元素
$("div[title^=te]”):选择title属性的值以te开头的div元素

[attr$=value]

选择属性值以某个字符或者字符串结尾的元素
$("div[title$=te]”):选择title属性的值以te结尾的div元素

[attr*=value]

选择属性值中包含某个字符或者字符串的元素 $("div[title*=te]”):选择title属性的值中含有te的div元素

[selector1][selector1]...[selectorN]

可以多个属性选择器混合使用 $("div[title=te][width=100px]”):选择title属性值为te，width属性为100px的div元素

子元素过滤选择器

:nth-child()

括号中可以放数字，表达式，odd，even
表示选择某个元素的父元素中索引值为几的子元素，索引值从1开始 $("ul li:nth-child(2)"):找到ul的所有后代li元素，找到每一个li元素的父元素中第二个子元素
$("ul li:nth-child(even)"):找到ul的所有后代li元素，找到每一个li元素的父元素中索引值为奇数的子元素 
$("ul li:nth-child(odd)"):找到ul的所有后代li元素，找到每一个li元素的父元素中索引值为偶数的子元素
$("ul li:nth-child(3n+1)"):找到ul的所有后代li元素，找到每一个li元素的父元素中索引值为3n+1的子元素

:first-child

找到父元素中的第一个子元素 $("ul li:first-child"):找到ul的所有后代li元素，找到每一个li元素的父元素中的第一个子元素

:last-child

找到父元素中的最后一个子元素 $("ul li:last-child"):找到ul的所有后代li元素，找到每一个li元素的父元素中的最后一个子元素

:only-child

判断某个元素是否是它父元素中的唯一元素，如果是则返回这个元素，如果不是则不返回任何东西 找到父元素中的第一个子元素 $("ul li:only-child"):找到ul的所有后代li元素，判断每一个li是否是它的父元素中唯一的元素，如果是则匹配这个li，如果不是，则什么都不匹配。

可见性过滤选择器

:hidden

选取所有不可见的元素，即可以作为一个独立的选择器使用，也可以和其他选择器一起使用 $(":hidden"):选取页面中所有不可见的元素
$("div:hidden"):选择所有不可见的div元素 $("div :hidden"):选择div后代元素中所有的不可见得元素

:visible

选取所有可见的元素，即可以作为一个独立的选择器使用，也可以和其他选择器一起使用 $(":visible"):选取页面中所有可见的元素
$("div:visible"):选择所有可见的div元素 $("div :visible"):选择div后代元素中所有的可见得元素

表单过滤选择器

这类选择器主要针对表单元素

:enabled

选取所有可用的元素。即可以单独作用，也可以和其他选择器一起作用 $("form :enabled"):选取form元素的后代元素中所有可用的元素,有空格 $("input:enabled"):选取所有可用的input元素，没有空格

:disabled

选取所有不可用的元素。即可以单独作用，也可以和其他选择器一起作用 $("form :disabled"):选取form元素的后代元素中所有可用的元素 $("input:enabled"):选取所有不可用的input元素，没有空格

:checked

选择被选中的元素，主要针对单选复选框 $("input:checked"):选取input中被选中的元素

:selected

选择被选中的元素，主要针对下拉列表，select，option $("option:selected"):选取option中被选中的元素 $("select :selected"):选取select后代元素中中被选中的元素

表单选择器

这些元素都是独立使用的元素

:input

选择所有的input，textarea，select，button元素

:text

选取所有type为text的input元素

:password

选取所有type为password的input元素

:radio

选取所有type为radio的input元素

:checkbox

选取所有type为checkbox的input元素

:submit

选取所有type为submit的input元素

:image

选取所有type为image的input元素

:button

选取所有的button元素

:file

选取所有的上传域，即type为file的input元素

组合选择器

上诉所有的选择器，可以按任意的方式组合起来，形成一个强大的组合选择器。同时，一个组合选择器可以放在选择器组中，当成选择器组中的一项。 $(div p:nth-child(1)):首先找到div所有的后代p元素，然后找到所有p元素的父元素中的第一个子元素。