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

Posted 2023-03-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何选择同一个class下的第一个div?相关的知识，希望对你有一定的参考价值。

<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
类似于这样的布局，请问如何用css选择器，找到相同class下第一个div？或者说指定div？

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

看看是不是你要的

css没有同级选择的。只需要换个思路就行了。

一般来说，动态调整css都是使用js来做。

参考技术B <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>//文件在网上找
<script type="text/javascript">

$(document).ready(function()
$(".con:first").css("background-color","#B2E0FF");
);

</script>

</head>
<body>
<html>
<body>
<div class="con">1</div>
<div class="con">1</div>
<div class="con">1</div>
</body>
</html>

</body>
</html> 参考技术C //页面加载
$(document).ready(function()
//给所有的父类DIV添加事件
$('.class_one').live('click', function()
$(this).children().eq(1).css("display","none");
);
);
你在你的JS中加入这样一段话
它的意思是:点击父类时，找到父类下的第二个子集，给这个子集添加css样式

希望能对你有所帮助吧! 参考技术D <div class="content name（空格后加个名称）"></div>
<div class="content"></div>
<div class="content"></div>

.name就可以独立控制了

Css 选择器总结

选择器

.class

类对应的元素。

#id

对应的id元素。

*

全部元素

div{}

对应的标签

div,p{}

全部的div和p

div p{}

div下全部的p标签

div>p{}

div下的第一代子标签。

div+p{}

仅仅作用于div后一个p,假设后一个不是p则没有作用效果。

p~ul{}

选取同一个父元素的p之后全部的ul。

a[target]

作用于全部带target属性的a标签。

a[target=_blank]

作用于全部target属性值为_blank的元素。

[title*=flower]

匹配title中包括flower的元素。应用范围更广。

[title~=flower]

title中包括flower的对应元素。强调一整个的单词。

a[src$=".pdf"]

匹配属性src以.pdf结尾的a标签。

[lang^=en]

匹配以en开头的元素，不一定是单词。应用更广，比方en遇到enn匹配成功。可是lang|=则不成功。

[lang|=en]//|=以...开头

lang规定了元素的语言。

|=选取以en开头的对应的元素。

|=之后跟的是单词，通常应用于lang。

p:lang(en)//lang选择器

选择lang属性以en开头的p元素。

a：link

：link用于选取未訪问过的链接的元素。

a：visited

：visited用于选取訪问过的链接的元素。

a：active

：active选取活动链接时的状态，活动链接指的是点击后即为活动，能够按下鼠标不松开查看效果。

a：hover

:hover适用于全部元素，设置鼠标浮动在上面时的效果。

input：focus

当获得焦点时的状态，即点击输入框要用键盘输入时。

p:first-letter

为段落中的首字母设置效果。

p:first-line

为段落中的首行设置效果。

p:first-of-type

选取身份为父元素的首个p元素。

p:last-of-type

选取身份为父元素的最后一个p元素。

p:only-of-type

假设作为唯一的p子元素，则触发状态。

p:nth-of-type(2)

第二个p元素。

p:nth-last-of-type(2)

与上同理，倒着数。

p:first-child

选取身份为父元素的首个子元素的p标签。

p:last-child

最后一个子元素，且为p标签。

p:only-child

作为唯一的子元素。

p:nth-child(2)

作为父元素的第二个子元素，是p标签，则触发。

p:nth-last-child(2)

与上同理。从最后一个元素開始计数。

p:before

在每一个p元素前插入内容。

p:after

在每一个p元素之后插入内容。

:root

设置根元素。即html文档的属性。

p:empty

没有子元素的p元素。

:target

当前活动的锚，锚是本页面跳转的链接，活动的猫指的是点击锚点转到时被转到的地方被觉得是活动的。

:enabled

指示已启用的。经常使用于表单上。

:disabled

指示未启用的。同上。

:not(p)

除了p元素的全部元素

::selection{}

为页面上已选中的文字等设置样式。