css选择器选择第一个（CSS选择器）

本文目录

• CSS选择器
• 一文学会CSS基本选择器和复合选择器
• 用css选择器 如何选择自己的父元素
• CSS布局基础(五)--选择器
• css如何选择同一个class下的第一个div

CSS选择器

id：指定标签的唯一标识，定位到页面上唯一的元素。
使用场景： 使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。

class ：类选择器，指定标签的类名，定位到页面上某一类的元素 。
使用场景：使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

* {} /* a=0 b=0 c=0 d=1 -》 0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 -》 0,0,0,1 */
a:hover {} /* a=0 b=0 c=1 d=1 -》 0,0,1,1 */
ul li {} /* a=0 b=0 c=0 d=2 -》 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -》 0,0,0,3 */
h1+input{} /* a=0 b=0 c=1 d=2 -》 0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 -》 0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 -》 0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 -》 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -》 1,0,0,0 */
先比较a，a大的权重最大，再依次比较b，c，d

#header{ }

id选择器，匹配特定id为header的元素

.header{ }

类选择器，匹配class包含header的元素

.header .logo{ }

后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）
calss为logo的元素

.header.mobile{ }

匹配class既有header又有logo的元素

.header p, .header h3{ }

同时匹配class为header所有后代元素p和class为header所有后代元素h3

#header .nav》li{ }

匹配id为header元素所有后代中calss为nav的所有直接子元素li

#header a:hover{ }

匹配id为header所有后代中鼠标悬停其上的a元素

#header .logo~p{ }

匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）

#header input{ }

匹配id为header所有后代中属性type值为text的元素

n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

《style》 .item1:first-child{ color: red; } .item1:first-of-type{ background: blue; } 《/style》 《div class="ct"》 《p class="item1"》aa《/p》 《h3 class="item1"》bb《/h3》 《h3 class="item1"》ccc《/h3》 《/div》

一文学会CSS基本选择器和复合选择器

要想为指定的HTML元素添加CSS样式，首先需要选中该元素。在CSS中，执行这一选择操作规则部分被称为选择器（选择符）。

CSS基本选择器可以分为五类：标签选择器、id选择器、类选择器、通配符选择器和伪类选择器。

多类名选择器

可以给单个标签添加多个类名，既可以提升类样式的复用性，也可以达到添加多种样式的效果。在后面复杂网页的布局中使用较多。

《pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n2260" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"》《div class="pink fontWeight font20"》苹果《/div》
《div class="font20"》香蕉《/div》
《div class="font14 pink"》橘子《/div》
《div class="font14"》《/div》《/pre》

通配器选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

常用的结构伪类选择器：

:target 选择器

可用于选取当前活动的目标元素，然后给它添加相应的样式。

《pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded md-focus" lang="css" cid="n2337" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"》《h3》《a href="#brand"》Brand《/a》《/h3》
《div id="brand"》
content for Brand
《/div》
​

background: orange;
color: #fff;
}《/pre》

复合选择器是由两个或多个基本选择器，通过不同的方式组合而成的，目的是为了更准确、更精细的选择目标元素标签。

复合选择器的三种类型：交集选择器、并集选择器、后代选择器、子选择器以及相邻元素选择器。

用css选择器 如何选择自己的父元素

css
没有父元素选择器，只有子元素选择器h1
》
strong，选择第一个
h1
下面的strong
元素；兄弟选择器h1
+
p
选择紧接在另一个元素后的元素，而且二者有相同的父元素；
　　父元素可以使用jquery，$(".class:parent")
或
$(".class").parent();

CSS布局基础(五)--选择器

一、简单的选择器
1）标签选择器
与网页元素同名，用的最多，也简单，即直接作用于与该选择器名字相同的标签

2） 类选择器
能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同样式

3）类选择器和标签结合在一起==》指定类选择器
指定该类用于特定的标签范围内

4）ID选择器（ID唯一）
这个就不举例讲解了，类比类选择器，把"."换成"# "即可

5）通配选择器
如果所有元素都需要定义相同的样式，推荐使用通配选择器

二、复合选择器
1）子选择器

2）相邻选择器（二者有相同父元素）
**利用相邻的兄弟元素来控制，即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示

3）包含选择器（后代选择器）
第一对象一定要内包含第二对象

4）选择器嵌套

5）属性选择器
属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。
1.匹配属性名选择器

2.扩展

3.匹配属性值选择器

4.模糊匹配属性值选择器
类似正则表达式

6）伪选择器和伪元素选择器

标签之间可以通过逗号隔开来设定多个标签的CSS样式

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

.content:first{...}
.content:nth-child(1){...}
CSS3 :nth-child() 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
CSS :first-child 选择器
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。