前端知识汇总-----CSS选择器和CSS3新增选择器

短命女 2022-09-25 09:26 198阅读 0赞

**CSS选择器：**

基础选择器：

\*       匹配所有的选择器

E      标签选择器p,header,aside

.info  class选择器

\#info   id选择器

**关系选择器：（相邻兄弟选择器）**

E+F      紧贴着E的元素第一个元素，即F

E~F      E后面的所有兄弟节点都生效

E F       包含元素

E>F      指定E的子元素F

**伪对象选择器：（可以精确选择文本和元素前后元素）**

E::first-letter        选择文本的第一个元素

E::first-line          选择文本的第一行元素

E::before            选择所选E元素的前一个标签

E::after               选择所选E元素的后一个标签

E::selection        鼠标选中的元素的样式

结构伪类选择器：(可以精确选择一个父元素对应多个子元素的组合)

从爸爸来找儿子的关系：

E:nth-child(n)     选择E元素的爸爸的子元素，

E:first-child        选择E元素的爸爸的第一个儿子(子元素)

E:last-child       选择E元素的爸爸的最后一个儿子（子元素）

E:only-child       选择E元素的爸爸的唯一个儿子（子元素），只有当时独生子女才会被选中，如果爸爸有多个儿子就不会被选择

从元素的兄弟找关系:

E:nth-of-type     选择E作为节点找兄弟，包括自己

E:first-of-type    选择E作为节点找第一个兄弟

E:last-of-type    选择E作为节点找最后一个兄弟

E:only-of-type   选择E作为节点找唯一一个E，只有当是独生子女才会被选中

UI元素状态伪类选择器：

E:checked   被选中

E:enable     文本框允许使用

E:disabled  文本框禁止使用

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3新增选择器汇总

属性选择器 E\[attr\] E\[attr=val\] E\[attr^=val\] 开头 E\[attr$=val\] 结尾 E\[a

Bertha 。/ 2022年12月18日 02:58/ 0 赞/ 122 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 353 阅读

相关 CSS3新增选择器

CSS3新增选择器元素关系选择器 <table> <thead> <tr> <th>选择器名称</th> <th>示例</th>

妖狐艹你老母/ 2022年11月11日 10:51/ 0 赞/ 162 阅读

相关 css选择器知识汇总

css选择器知识汇总对于大多数程序员来说，都很熟悉css选择器，也深知其重要性。打个比方说：我们给一个标签设定了一个class类，设定属性和样式，但是最终页面却没有显示

太过爱你忘了你带给我的痛/ 2022年10月01日 12:53/ 0 赞/ 146 阅读

相关前端知识汇总-----CSS选择器和CSS3新增选择器

CSS选择器：基础选择器： \ 匹配所有的选择器 E 标签选择器p,head

短命女/ 2022年09月25日 09:26/ 0 赞/ 199 阅读

相关前端css选择器

简单选择器： 1. 元素选择器： / 元素选择器 / p{color: red;} 2.id选择器 / id选择器

一时失言乱红尘/ 2022年08月31日 10:00/ 0 赞/ 198 阅读

相关 CSS3 选择器——属性选择器

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CS

淡淡的烟草味﹌/ 2022年06月10日 05:24/ 0 赞/ 410 阅读

相关 CSS3 选择器——基本选择器

[CSS的选择器][CSS]，我想大家并不会陌生吧，因为天天在使用，但对于[CSS3的选择器][CSS]，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:n

我就是我/ 2022年06月10日 05:24/ 0 赞/ 444 阅读

相关 css3新增选择器

1. 属性选择器： 1) E\[att\] 元素\[属性\]：选择具有att属性的E元素，需要选择有某个属性的元素，而不论是行为是什么，可以

深碍√TFBOYSˉ_/ 2022年06月06日 13:09/ 0 赞/ 185 阅读

相关 CSS3 新增选择器

结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定

柔光的暖阳◎/ 2022年05月16日 08:29/ 0 赞/ 192 阅读