【CSS】选择器及样式优先级

总结

1.选择器类型

    ID 选择器

    类选择器、属性选择器、伪类选择器

    元素选择器(标签选择器)、关系选择器(层次选择器)、伪元素选择器

    通配符选择器

2.样式优先级

注意:

(1) ... > 通配符 > 继承 > 浏览器默认属性。

(2) 可以实现自动继承的样式:font-size、text-indent、line-height。

3.选择器详解

(1)基本选择器:

         ID 选择器(#id)、 类选择器(.class)、元素选择器(E)、通配符选择器(*)、群组选择器

(2)属性选择器:

         E[attr]、E[attr=val]、E[attr|=val]、E[attr~=val]、E[attr*=val]、E[attr^=val]、E[attr$=val]

         E[attr]               E可以省略

         E[attr|=val]       作用相当于 E[attr=val] 和 E[attr^=val]

(3)伪类选择器(:):

         [1] 动态伪类选择器:

              E:link、E:visited、E:acitved、E:hover、E:focus

              输入框:hover / focus(点击以后)

              链接:link(初始呈现,未操作状态) / hover(悬浮时)/ active(点击瞬间)/ visted(看过之后呈现的)

         [2] 目标伪类选择器:E:target

         [3] 语言伪类选择器:E:lang(language)

         [4] UI元素状态伪类选择器:

              E:checked、E:enabled、E:disabled

         [5] 结构伪类选择器:

              E:nth-child(n)、E:nth-last-child(n)、E:first-child、E:last-child、E:only-child

              E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-of-type

              E:empty、E:root

              E F:nth-child(n) 和 E F:nth-of-type(n) 的区别:

              E F:nth-child(n) 是指元素 E 的第 n 个子元素,如果同时该子元素是元素F,则选中;否则选不中。

              E F:nth-of-type(n) 是指元素 E 的第 n 个 F 子元素。

              n 可以是(odd、even)、(2n+1、2n+2)、(n+5、-n+5)、(3n)等。

 

         [6] 否定伪类选择器:E:not(F)

(4)关系选择器(层次选择器):

选择器描述
E  F后代选择器的作用是选择某元素的所有后代元素。   
E>F子选择器只能选择某元素的子元素。
E+F 相邻兄弟选择器可以选择紧临其后的一个同胞元素。
E~F通用兄弟选择器可以选择紧临其后的所有同胞元素。

(5)伪元素选择器(::):

         ::first-letter、::first-line、::before、::after、::selection

         ::before、::after  是指插入额外内容的位置;要为伪元素生成内容,还需要配合 content 属性。

         ::selection  是用来匹配突出显示的文本,且仅接受两个属性,一个是 background ,另一个是 color 。

 

参考:

CSS3选择器

END

CSS选择器是用于选择HTML文档中的元素的模式。常见的CSS选择器包括: 1. 元素选择器:通过元素的标签名选择元素,如`p`选择所有的段落元素。 2. 类选择器:通过元素的class属性选择元素,使用`.`符号,如`.container`选择class为"container"的元素。 3. ID选择器:通过元素的id属性选择元素,使用`#`符号,如`#header`选择id为"header"的元素。 4. 属性选择器:通过元素的属性选择元素,如`[type="text"]`选择所有type属性值为"text"的元素。 5. 后代选择器:通过元素的后代关系选择元素,使用空格分隔,如`.container p`选择class为"container"的元素内部的所有段落元素。 6. 子元素选择器:通过元素的直接子元素关系选择元素,使用`>`符号,如`.container > p`选择class为"container"的元素下的直接子元素中的所有段落元素。 7. 相邻兄弟选择器:通过元素的相邻兄弟关系选择元素,使用`+`符号,如`h2 + p`选择紧接在h2元素后面的p元素。 8. 伪类选择器:通过元素的状态或位置选择元素,如`:hover`选择鼠标悬停的元素。 CSS选择器优先级表示了当多个选择器同时应用于同一个元素时,哪个选择器样式规则会被应用。通常,优先级的计算规则如下: 1. ID选择器优先级最高,为100。 2. 类选择器、属性选择器和伪类选择器优先级为10。 3. 元素选择器和伪元素选择器优先级为1。 4. 通配符选择器和继承的样式没有优先级,其优先级为0。 如果多个选择器具有相同的优先级,则后面出现的选择器会覆盖前面出现的选择器。如果多个选择器具有不同的优先级,则优先级高的选择器样式规则会被应用。 需要注意的是,使用`!important`声明可以提升样式规则的优先级,但是过度使用会导致样式难以维护和调试,应尽量避免滥用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值