css如何选择同一个class下的第一个div

content:first{}

content:nth-child(1){}

CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

CSS :first-child 选择器

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。例如选第2个就直接:nth-child(2)

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。例如选第2个是:eq(1)，而不是2

CSS选择器、CSS属性

style写在head中间，type="text/css"可以不用写，默认就是这个。

规定文字样式、粗细、大小、字体的属性

1、字体不存在用户电脑上时：

不处理时，使用用户电脑系统默认字体

处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体

2、一串字符串既有中文，又有英文时，如何设置两种字体

英文字体是中文字体的子集。意思是：英文字体不能处理中文，中文字体可以处理英文

文本装饰、文本对齐，文本缩进的属性

文本装饰-文字的下划线，中划线等

文本对齐：

文本缩进：

格式：

p{

font:20px,"楷体"

}

标签选择器选中的是页面中所有的该标签

作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）

第一步：给需要设置的标签设置id，

第二步：

注意：

1、id在同一页面是唯一的

2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

根据指定的类名称找到对应的标签，然后设置属性

第一步：给需要设置的标签设置className，

第二步：

注意：

1、className是可以重复的

2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

4、同一个HTML变迁可以有多个classname

1、id使用“,”class使用#

2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；

id相当于身份z，所以同一个页面上的HTML标签不可以有一样的id；

3、class相当于人名，所以，一个HTML标签可以有多个Class

id相当于身份z，所以，一个HTML标签只能有一个id

4、一般情况下设置样式，使用class；如果需要js配合，使用id

格式：

先祖位置可以是HTML标签，可以是class名，可以是id

后代位置可以是HTML标签，可以是class名，可以是id

可以随意组合

只会查找直接子元素

格式：

1、都可以使用HTML标签、id名、class名

1、后代使用空格，子使用>

2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签

定义：两个选择器相交的部分

格式：

选择器1选择器2{

}

选择器1和选择器2之间没有任何符号，没有空格，没有>

选择器1和选择器2之间有逗号。

相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式

通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式

CSS3中新增的选择器最具代表性的就是序选择器

1同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |

| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |

| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |

| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |

| [ attribute ^= value ] | a[src^=">

nth-child可以选择单个元素，也可以实现一个范围，如:

123456上面是一个列表1选择单个标签元素（指定序列的单个元素）li:nth-child(1){

color:

red;}执行上面的CSS，1在界面上面表现为红色2选择一个范围的标签元素（偶数序列的元素）

HTML CODE:1<div class=box>2 <span>First span</span>3 <p class=ft>First p</p>4 <div>First div<strong class=ft>Strong text</strong></div>5 <p class=ft>Second p</p>6 <div class=ft>Second div <span>Second span</span><span>Third span</span></div>7</div>

结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；带括号的选择器，里面一定要有参数；匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；

下面的 !lte8是指IE8一下浏览器不支持，包括IE8也不支持

:first-of-type，选择相对父元素里同类型子元素中的第一个，!lte8box :first-of-type {color: #f00}//匹配234以及4里面的strong和6里面的第一个span，因为这个span是6里的第一个span子元素box ft:first-of-type {color: #ff0}//匹配3和4里面的strong，因为3是box里面的第一个p且class=”ft”，而4里只有一个strong且class=”ft”，而5和6虽然class=”ft”但是他们相对于box的同类型中不是第一个出现的；

:last-of-type，选择相对父元素里同类型子元素中的最后一个，!lte8box :last-of-type {color: #f00}//匹配256以及4里的strong和6里的最后一个span

:only-of-type，选择相对父元素里同类型子元素中只有一个的元素，!lte8box :only-of-type {color: #f00}//匹配2以及4里的strong，类为box里同类型元素只有一个的只有spanbox ft:only-of-type {color: #f00} //只匹配4里的strong:only-child，选择的元素相对于其父元素是唯一的子元素，!lte8box :only-child {color: #f00}//只匹配4里的strong

:nth-child(n)，选择其父元素的第n个子元素或多个子元素，索引从1开始，当n用于表达式时索引从0开始!lte8box :nth-child(3) {color: #f00}//匹配第三个子元素即这里的4box :nth-child(odd) {color: #f00} 等价于 box :nth-child(2n + 1) {color: #f00}//匹配奇数即这里的246以及4里的strong和6里的第一个spanbox :nth-child(even) {color: #f00} 等价于 box :nth-child(2n + 2) {color: #f00}和box :nth-child(2n)//匹配偶数即这里的35以及6里的第二个spanbox :nth-child(n + 1) {color: #f00}//匹配 n + 1开始的所有子元素即box里所有的子元素以及子孙元素，因为这里n是从1开始的即：n = 0 ----> n + 1 = 0 + 1 = 1，即这里的2n = 1 ----> n + 1 = 1 + 1 = 2，即这里的3 n = 4 ----> n + 1 = 4 + 1 = 5，即这里的6

:nth-last-child(n)，跟:nth-child(n)使用类似，只是索引是从最后开始往前数，!lte8box :nth-last-child(3) {color: #f00}//匹配倒数第三个子元素即这里的4

:nth-of-type(n)，选择父元素的第n个或多个同类型的子元素，!lte8box :nth-of-type(2) {color: #f00}//匹配5和6以及6里面的第二个span

:nth-last-of-child(n)，同上，只是从最后开始往前数，!lte8box :nth-last-of-child(2) {color: #f00}//匹配3和4以及6里面的第一个span:first-child，选择父元素里的第一个子元素，!ie6box :first-child {color: #f00}//匹配2和4里的strong以及6里的第一个span

:last-child，选择父元素里的最后一个子元素，!lte8box :last-child {color: #f00}//匹配6和6里的最后一个span以及4里的strong

:root，选择文档的根元素，在HTML中就是指<html>标签，!lte8:empty，选择没有任何内容的元素，那怕是有一个空格也不行，!lte8table td:empty {background-color: #ffc}//匹配表格里没有内容的td:target，选择当前活动的元素，指锚点点击后跳转到的那一个元素，!lte8:not(selector)，选择排除selector以外的其他所有元素，!lte8box :not(div) {background-color: #ffc}//选择box里除div以外的所有后代元素，如果div里有其他非div元素，也会选择上，如上的HTML CODE就会选择上div里面的span和strong

通过children

children("input:first-child")

$(this)children("input:first-child")val();

$(this)children("input:last-child")val();

通过>选择器，$("items>input:first")

1 通过位置选择的 *** 作：

:first：默认情况下是相对整个页面来说的第一个，如：li:first表示整个页面的第一个li元素，而ul li:first表示整个页面的第一个li元素，并且是在ul下的子元素；

:first- child：为每个父元素匹配第一个子元素，如li:first-child返回每个ul的第一个li元素。可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素；

:only- child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的<div>hello<a href="">jquery</a></div>，对于这段会选出<a>元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素；

:nth-child(n)：返回第n个子节点，n从1开始，如果n取0，那么就会选择所有的元素。如：[]li:nth-child(2)返回li元素，并且该元素是其父元素的第二个子元素；

:nth-child(even|odd)：返回偶数或奇数的子节点；

:nth-child(An+B)：返回满足表达式An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素；

:even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素；

:odd：页面范围内的处于奇数位置的元素；

:eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了；

:gt(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)；

:lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul:lt(2)返回从第0个和第1个ul元素；

2 利用css选择器进行选择：

元素标签名：比如说$(”a“)会选出所有链接元素；

#id：通过元素id进行选择，比如说$("#form1")会选择id为form1的元素；

class：通过元素的CSS类来选择，比如说$("boldstyle")会选择CSS为boldstyle类的元素；

标签 名#idclass：通过某类元素的id属性和class属性来选择，如：$(a#blogboldStyle)会选择id为blog并且CSS类型 为boldStyle类型的链接元素(<a id='blog' class='boldStyle'>)；

父标签名 子标签名class：通过选择父标签下的某种CSS类型的子元素，如：$(p aredStyle)会选择p段落元素中的链接子元素a，且其css类型为redStyle；

3 通过子选择器，容器选择器和属性选择器进行选择：

：匹配所有的元素，比如说:$()会把页面中的所有元素都返回；

E：匹配标签名为E的所有元素，如$("a")返回所有链接元素；

E F：匹配父元素E下的标签名为F的所有子元素（F可以为E的子类的子类，甚至更远）；

E>F：匹配父元素E下的所有标签名为F的直接子元素；

E+F：匹配所有标签名为F的元素，并且有E类型的兄弟节点在该F元素之前（E,F紧挨着）；

E~F：匹配前面是任何兄弟节点E的所有元素F(E,F不必紧挨着);

E:has(F)：匹配标签名为E，至少有一个标签名为F的后代节点的所有元素E；

EC：匹配带有类名C的所有元素E。C等效于C；

E#I：匹配id为I的所有元素E，#I等效于#I；

E[A]：匹配带有属性A的所有元素E；

E[A=V]：匹配所有属性A的值为V的元素E；

E[A^=V]：匹配所有元素E，且A的属性值是V开头的；

E[A$=V]：匹配所有元素E，且A的属性值是V结尾的；

E[A=V]：匹配所有元素E，且A的属性值中包含有V；

4利用jQuery自定义的选择器进行选择：

:button：选择任何按钮类型的元素，包括input[type=submit]等等；

:checkbox：选择复选框元素；

:file：选择所有文件类型元素，即input[type=file]；

:image：选择表单中的图像元素，即input[type=image]，注意此处和前面根据标签名img选择图像有点不同哈；

:input：选择表单元素，如<input>,<select>,<textarea>,<button>等；

:radio：选择单选按钮元素；

:reset：选择复位按钮元素，如input[type=reset]，button[type=reset]；

:submit：选择提交按钮元素；

:text：选择文本字段元素，即input[type=text]；

:animated：选择当前处于动态控制下的元素；

:contains(hello)：选择包含文本hello的元素；

:header：选择标题元素，如<h1>；

:parent：选择拥有后代节点(包括文本)的元素，而排除空元素；

:selected：选择已选中的选项元素；

:visible：选择可见元素；

CSS中常用的选择器：

（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器

（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素

(一)基本选择器

1标签选择器：通过标签名获取元素 权重：0001

（此种选择器影响范围大，建议尽量应用在层级选择器中。）

2class选择器：通过 类名获取元素 权重：0010

（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）

3id选择器：通过 # id名获取元素 权重：0100

（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）

4 通配符选择器：获取到页面的所有元素

5群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到

(二)层次/关系选择器

（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）

1包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代

例：p a { color:red; }

2子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代

例：ul>li { line-style: none; }

3相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）

例： a+a { }

4兄弟选择器：E~F:表示获取到E后面所有的同级的F元素

例： li~li { }

(三）动态伪类选择器

1 a:link 锚链接被访问前添加样式

2 a:visited 锚链接被访问后添加样式

3 e:hover 鼠标悬停在元素上添加样式

4 e:active 鼠标点击元素时添加样式

5 :focus 表单元素被聚焦时，添加样式

(四)目标伪类选择器

语法： 目标:target {属性：属性值} 被选中的目标添加样式

目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式

(五)ui状态伪类选择器

1 :enabled 可用的表单元素添加样式

2 :disabled 不可用的表单元素添加样式(disabled )

3 :checked+E 被选中的表单元素添加样式

(六)结构伪类选择器

1 E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。

2 E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子

3 E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子

n的用法：

(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”）

(3) -n+5 选中1-5

(4)p:nth-child(-n+3):nth-child(n+2) 2-3个

4 E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子

5 E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子

6 E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

7 E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子

8 E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

9 E:empty 获取到空的E元素（注：连空格都不能有）

(七)属性选择器

1 E[attr] 拥0有attr属性的E元素添加样式 如div[class];

2 E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]

3 E[attr="val"] attr属性值 包含 val的E元素添加样式

如ul[class="c"] 指class类名中包含有c字母的E元素

4 E[attr^="val"] attr属性值以val 开头 的E元素添加样式

5 E[attr$="val"] attr属性值以val 结尾 的E元素添加样式

(八)伪元素

1 E::before给E元素添加第一个子元素 （前面）

2 E::after 给E元素添加最后一个子元素（后面）

3 E::first-letter给E元素第一个字添加样式

4 E::first-line给E元素第一行添加样式

5 E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

以上就是关于css如何选择同一个class下的第一个div全部的内容，包括:css如何选择同一个class下的第一个div、CSS中：nth-child和JQuery：eq的区别、CSS-属性&&选择器等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！