搜索
您的当前位置:首页正文

CSS3选择器学习笔记

2023-11-28 来源:莱芜美食

CSS选择器总结:

一.基本选择器

1.通配选择器:[ * ] 选择文档中所以HTML元素。

 *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/

2.元素选择器:[ E ] 选择指定类型的HTML元素。

p{color:red;} /*选择p元素*/

3.ID选择器: [ #id ] 选择指定ID属性值为“id”的任意类型元素。

 
1

4.类选择器: [ .class ] 选择指定class属性值为“class”的任意类型的任意多个元素.

 
1

5.群组选择器: [ selector1,selectorN ] 将每一个选择器匹配的元素集合并.

 
1
2
3

二.层次选择器

1.后代选择器:[ E F ] 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内。

 
2
3

2.子选择器:[ E>F ] 选择匹配的F元素,且匹配的F元素是所匹配的E元素的直系子元素

 
2
4

3.相邻兄弟元素选择器:[ E+F ] 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面

 
2

p1

p2

4.通用选择器: [ E~F ] 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素(E和F是同辈元素,具有相同的父元素)

 
2

1

2

三.属性选择器

1. E[attr] 只使用属性名,但没有确定任何属性值

 

1

2

2.E[attr=value] 指定属性名,并指定了该属性的属性值

 

1

2

3.E[attr~=value] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中只要包含了一个value词就会被选中

 

1

2

4.E[attr^=value]指定了属性名,并且有属性值,属性值是以value开头的

 

1

2

3

5.E[attr$=value]指定了属性名,并且有属性值,而且属性值是以value结束的

 

1

2

3

6.E[attr*=value]指定了属性名,并且有属性值,而且属值中包含了value

 

1

2

3

7.E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说b-cn)

 

1

2

3

4

四.伪类选择器

1.动态伪类选择器

2.目标伪类选择器

[ E:target ] 功能:选择匹配E的所有元素,且匹配元素被相关URL指向

  Document div1 div2 div3 
div1
div2
div3

3.否定伪类选择器

[ E:not(s) ] 表示匹配所有除元素F外的E元素

  Document h1 h1 h1

4.状态伪类选择器

5.结构伪类选择器

E:nth-child(n) 表示E父元素中的第n个字节点(从前往后数),注意:CSS3中计数是从1开始,n可运算

  Document 

p1

h1

p2

h2

p3

h3

p4

p5

E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从前往后计算

E:nth-last-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从后向前计算

  Document 

p1

h1

p2

h2小编还为您整理了以下内容,可能对您也有帮助:

css选择器知识归纳

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

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

(6) *选择器

(7) 继承样式

css选择器知识归纳

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

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

(6) *选择器

(7) 继承样式

CSS3中选择器有哪些语法

今天给大家介绍一下在CSS3中的常用选择器语法,语法一般分为三种,基本选择器语法,层次选择器语法和动态伪类选择器语法。下面就给大家详细的解读一下。

1,基本选择器语法

(1)* 通配选择器 选择文档中所以HTML元素

(2)E 元素选择器 选择指定类型的HTML元素

#id ID选择器 选择指定ID属性值为“id”的任意类型元素

.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素

selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

2,层次选择器语法

(1)E F 后代选择器(包含选择器) 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

(2)E>F 子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素

(3)E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面

(4)E~F 通用选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

3,动态伪类选择器语法

(1)E:link 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

(2)E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

(3)E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上

(4)E:hover 用户行为选择器 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

(5)E:focus 用户行为选择器 选择匹配的E元素,而且匹配元素获取焦点

相信看了以上介绍你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

用H5制作烟花粒子特效的制作方法

让div宽度自适应教学

网页中使用h标签的开发经验

CSS选择器与优先级详解(一)

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。

HTML

CSS

执行效果:

b.class选择器:是以于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。

HTML

CSS

执行效果:

c.元素选择器:通过note节点名称匹配元素。

HTML

CSS

2.属性选择器:

注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。

CSS3新增了一些属性选择器,待持续更新。

3.组合选择器

示例如下:

实现效果如下:

示例如下:

从高到低依次是:

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

参考:

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

莱芜美食还为您提供以下相关内容希望对您有帮助:

CSS3中选择器有哪些语法

1,基本选择器语法(1)* 通配选择器 选择文档中所以HTML元素(2)E 元素选择器 选择指定类型的HTML元素#id ID选择器 选择指定ID属性值为“id”的任意类型元素.class 类选择器 选择指定class属性值为“class”的任意类型的任...

CSS选择器与优先级详解(一)

选择器的特殊性值表述为4个部分,用0,0,0,0表示。参考:1. css优先级计算规则 2. CSS选择器笔记 3. Selectors MDN 4. CSS3 选择器——基本选择器 5. CSS3 选择器——伪类选择器 6. 征服高级CSS选择器 ...

css选择器知识归纳

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;4 或选择器:用逗号...

CSS选择器、优先级以及!important知识总结

w3school_CSS 选择器参考手册 阮一峰_CSS选择器笔记 css选择器优先级深入理解 CSS 的优先级机制[总结]十分感谢你们的分享 n(*≧▽≦*)n 注:原文章首发于: CSS选择器、优先级以及!important知识总结 ,现迁移至...

CSS3 选择器

only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不...

css3的选择器有哪些?

css3选择器如下:一、通配符选择器(*)通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。二、元素选择器(E)元素选择器,是css选择器中最常见而且最基本的选择器。三、类选择器(.className)类选择器...

css3的基本选择器有哪几种?

1、标签选择器,也称为元素选择器。标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。2、类选择器。类选择器用来为一系列标签定义相同的呈现方式,常用的语法是 .classValue{...

css选择器

子选择器( E>F )是选择 E 元素的所有子后代 F 元素,注意 F 元素仅仅是 E 元素的子元素而已。语法 兄弟选择器( E~F )是 CSS3 新增选择器,代表 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面,...

关于css3的属性选择器的理解

EF两元素具有一个相同的父元素,请注意他们之间需要一个空格隔开、子元素选择器(E,而且他们具有一个相同的父元素,换句话说,我们在类使用时是在相对应的类名前加上一个“css3选择器如下:...

CSS3中选择器

css3中的属性选择器 选择器: :root 根选择器(相当于html) :not 取反选中器(否定选择器) :empty 空选择器(选中没有任何元素的标签) :target 目的选择器 选择器:(同级元素标签,标签相同) :first-child &...

Top