选择其属性类似于同级组件属性[选择器]的元素
选择其属性类似于同级组件属性[选择器]的元素，是指在前端开发中，通过选择器来选取具有相似属性的元素。选择器是一种用于定位和选择HTML元素的语法规则，常用于CSS和JavaScript中。
在CSS中，选择器用于选择需要样式化的HTML元素。常见的选择器包括：
- 元素选择器：通过元素名称选取元素，如
div、p。 - 类选择器：通过类名选取元素，以
.开头，如.container。 - ID选择器：通过元素的唯一ID选取元素，以
#开头，如#header。 - 属性选择器：通过元素的属性值选取元素，如
[type="text"]。 - 伪类选择器：通过元素的特殊状态选取元素，如
:hover、:first-child。
在JavaScript中，选择器用于选取和操作HTML元素。常见的选择器包括：
- getElementById：通过元素的唯一ID选取元素，如
document.getElementById("header")。 - getElementsByClassName：通过类名选取元素，如
document.getElementsByClassName("container")。 - getElementsByTagName：通过元素名称选取元素，如
document.getElementsByTagName("div")。 - querySelector：通过CSS选择器选取元素，如
document.querySelector(".container")。 - querySelectorAll：通过CSS选择器选取所有符合条件的元素，如
document.querySelectorAll("p")。
选择器在前端开发中非常重要，可以帮助开发者精确地选取和操作HTML元素，实现样式化和交互效果。在腾讯云的产品中，与前端开发相关的产品包括：
- 腾讯云CDN：提供全球加速、缓存加速、内容分发等功能，加速网站访问速度，提升用户体验。了解更多：腾讯云CDN
- 腾讯云云服务器（CVM）：提供弹性计算能力，可用于部署和运行前端应用程序。了解更多：腾讯云云服务器
- 腾讯云对象存储（COS）：提供安全、可靠、低成本的云存储服务，可用于存储前端应用程序的静态资源。了解更多：腾讯云对象存储
- 腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，可用于处理前端应用程序的后端逻辑。了解更多：腾讯云云函数
以上是腾讯云提供的一些与前端开发相关的产品，可以帮助开发者构建高性能、可靠的前端应用程序。
相关·内容
2回答
我遇到了以下语法：
$('#sourcePane input:checked~img');
我知道它正在选择所有选中的输入元素，并且也在id= sourcePane的元素下。对吗？
但是什么是~img呢？~做了什么？
此外，HTML中的相应元素是
<div data-module="Sources" data-module-id="sourcePane">
为什么不是id="sourcePane“而是data-module-id="sourcePane”?？
浏览 1提问于2011-06-05得票数 4
回答已采纳
我是否可以使用CSS来设置一个元素的样式，如果它是同级的话，则取决于子类的类型？或者是它父母的兄弟姐妹的孩子？
例如，假设我有一张桌子：
<table>
<tr><td><span class='red'>A</span></td><td><span class='blue'>B</span></td></tr>
<tr><td><span class='red'>
浏览 1提问于2013-04-16得票数 0
2回答
我正在尝试为ul li a元素获取特殊的样式。代码如下：
<ul id="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
我希望第二个链接(两个)具有与其他两个(一个和三个)不同的样式(color)。
这就是我一
浏览 0提问于2013-07-30得票数 5
回答已采纳
我想知道是否可以用中间的元素来瞄准两个相邻的元素？
例如：
<div>
<span class="icon">icon</span>
<input id="input" class="input error" type="text" />
<label for="input"></label>
<div>
当输入有错误类时，我希望将标签和span定位为红色。
我设法使标签变红，如下所示：
input.error ~
浏览 4提问于2017-03-17得票数 0
1回答
需要删除带有类的壁橱img的图像src，并将其设置为隐藏。这就是我到目前为止所尝试过的。
<img class="img-preview" src="http://www.abmuku.com/wp-content/uploads/2012/04/google-logo-small.jpg" />
<span> random stuff here </span>
<button class="delete"> Delete
</button>
$('.delete'
浏览 1提问于2016-10-18得票数 0
回答已采纳
让我们假设我有一个组件。 template:
<button class="my-own-button" (click)='handelClick($event)' [type]='this.type'>
<app-logo [src]="this.src">
</app-logo>
<ng-content>
</ng-content>
</button>
cla
浏览 19提问于2021-04-09得票数 0
回答已采纳
我试着到处找一个修复方法，但却找不到一个线索来解释为什么这个方法不起作用。它适用于不在另一个div/容器/包装器中的所有东西。
这是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv=&
浏览 3提问于2021-04-16得票数 0
回答已采纳
本例中的“~”是什么意思？我在本教程中看到了这个示例。
我知道根据复选框的状态，它可以用来设计完全不同的元素样式。但是，我找不到任何解释“~”的CSS文档？
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Defa
浏览 0提问于2013-01-18得票数 1
回答已采纳
3回答
我正在寻找帮助使用第n-子CSS选择器。如果你看看我的HTML..。
<div id="report">
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<div class="b">B</div>
浏览 3提问于2014-06-10得票数 6
回答已采纳
<style>
div{
width: 300px;
height: 300px;
background-color: blue;
display: none;
}
.hei:hover+div{
display: block;
}
</style>
<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div
浏览 1提问于2019-10-10得票数 0
1回答
我试图应用垂直导航组件(从清晰度)在一个自定义组件(重新静音)。清晰垂直导航的基本格式是：
<div class="content-container">
<clr-vertical-nav>
... nav content ...
</clr-vertical-nav>
<div class="content-area">
... site content ...
</div>
</div>
我的sidenav组件(布局-sid
浏览 1提问于2018-06-05得票数 2
我有一个联系人列表，它是作为一个无序列表生成的，其中为每个列表项分配了HTML5 data属性。data属性值是用于字母排序的单个字母。我无法控制生成的标记，但是我需要在每个字母的第一个条目之前插入一个节标题。我希望用:before伪元素来实现这一点。没什么不寻常的。我选择的CSS选择器有很大的自由度，因为这个项目只支持IE9+。
示例标记：
<ul>
<li data-name="a"> ... </li>
<li data-name="a"> ... </li>
<li
浏览 4提问于2013-09-25得票数 4
回答已采纳
1回答
影响多个类在:活动：
、、、
我正在处理一个HTML项目，并添加了一个复选框，当选中该复选框时，所有文本输入字段都会被选中。唯一的问题是，一些输入字段在表中，由于某些原因，我不能用我的代码影响它们。任何帮助都将不胜感激。
相关守则：
HTML：
<input type="checkbox" value="ShowAll" id="mut" />
<!--Tätigkeit-->
<input type="text" class="tt" id="BT" />
浏览 0提问于2015-01-12得票数 1
回答已采纳
我有一个关于删除当前元素之后的所有元素的问题。
下面是一个场景：
我有一个位置树，我的用户需要涉水才能得到一个特定的值。我有一个选择，通过ajax加载顶级位置。为了缩小选择范围，数据具有更细粒度的值，因此我根据用户的选择添加了一个新的选择。当用户到达数据可用选项的末尾时，我将停止添加SELECT并获取最后一个选项的值，这就是我想要的结果。
我编写这段代码的方式是从一个具有硬连接顶级位置ID的SELECT开始，然后有一个“onchange”事件处理程序，该处理程序输出到我的数据库，并为该选择抓取子程序，然后在当前TD中创建新的select。
这种情况一直持续到最后一次选择没有儿童返回为止。在这一
浏览 1提问于2012-07-09得票数 7
回答已采纳
在我的项目中，我想作为父容器的子容器动态地插入组件。这是代码
import { Component, ViewContainerRef, ComponentFactoryResolver, ViewChild } from '@angular/core';
@Component({
selector: 'parent',
template: `
<ng-container>
<child1></child1>
<button (click)="me()">me</button
浏览 4提问于2017-08-01得票数 4
回答已采纳
在这种情况下，选择器做什么？
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective]
})
export class AppComponent { }
在这种情况
浏览 0提问于2016-05-08得票数 42
回答已采纳
这就是我的HTML的样子(有趣.我知道)：
<p itemscope="" itemtype="http://schema.org/PostalAddress" itemprop="address" class="adr">
<span itemprop="streetAddress" class="street-address">6306 N Cicero Ave</span>
<span itemprop="addressLocality
浏览 5提问于2016-09-29得票数 1
回答已采纳
我有一个清单：
<ul>
<li class="myclass">...</li>
<li class="myclass">...</li>
<li class="myclass">...</li>
<li id="control">...</li>
<li class="myclass">...</li>
<li class="
浏览 1提问于2011-03-25得票数 1
回答已采纳
这是我的html代码。由于很多原因，这种情况不能改变：
<ul class="menu">
<li>About Us
<div class="menuHover">
<ul class="left">
<li class="item"><a href="#" title="Link">Link</a>
<span class=
浏览 0提问于2011-08-22得票数 1
回答已采纳
下面是我的代码：
<div class="hoverDiv">Hover</div>
<div>
<div class="hoverDivShow"></div>
</div>
.hoverDivShow {
display: none;
}
.hoverDiv:hover ~ .hoverDivShow {
display: block;
}
我一直在尝试做的是，当hoverDiv悬停在上面时，让hoverDivShow出现。
HTML将无法更改。
我已经找过
浏览 0提问于2015-11-14得票数 6
我正在尝试选择最近的show_data div toggle_container div...但是，没有选择任何内容。
html：
<div class="section_header">
HEADER
<div class="toggle_container">
Hide
</div>
</div>
<div class="show_data">
HEADER <span id="show_viewed_link"&
浏览 0提问于2013-05-13得票数 0
回答已采纳
2回答
我的应用程序中有多个选项卡和子选项卡，每个选项卡和子选项卡都是一个组件。他们需要增长和缩小，因为他们的可用空间增长或缩小。
实现这种灵活布局的一个关键步骤是在我的应用程序级CSS文件中为所有组件设置主CSS规则，这些组件都是主应用程序的子组件：
/* app-level.component.css */
:host ::ng-deep tab1,
:host ::ng-deep tab2,
:host ::ng-deep tab1-subtab1,
:host ::ng-deep tab1-subtab2 {
{
display: flex;
flex: 1 1 auto;
fle
浏览 2提问于2017-10-09得票数 0
回答已采纳
在本例中，从正式的角度2文档中，装饰器看起来如下所示：
@Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
示例：不希望我的HTML代码中散落着非标准元素，而更喜欢类似的 (NB：ng-angular只是我希望看到的一个例子)：
import { Component } from '@angular/core';
@Component({
template: '<h1>Wait! Bloo
浏览 5提问于2016-09-23得票数 3
回答已采纳
我创建了一个选项卡视图，其结构如下：
<tabs>
<ul #getVCRefHERE >
<li>tab1</li>
<li>tab2</li>
</ul>
<tab>
<ng-content></ng-content> <!--screen for tab2 -->
</tab>
<tab&
浏览 5提问于2017-09-12得票数 1
回答已采纳
3回答
这是可行的：
<a href="#/link1">link1</a>
<a href="#/link2">link2</a>
<a href="#/link3">link3</a>
$("a[href*='#/link1'").next('a[href*="#"]').click();
但这不是：
<a href="#/link1">link1</a><br>
浏览 0提问于2011-01-12得票数 10
回答已采纳
1回答
当单选按钮被选中时，我可以更改“投票图标”的颜色，但不能更改“单选文本”的颜色。任何帮助都将不胜感激。
<div class="vote-answers" id="poll-vote-{{$choice->id}}">
<label>
<input type="radio" name="choiceId" value="{{$choice->id}}">
<span class="vote-icon&
浏览 2提问于2018-02-11得票数 0
3回答
我有一个jQuery对象，它是一个HTML元素。如何在其父ul的上下文中找到它的索引？
所以如果我有这个：
<ul>
<li>abc</li>
<li id="test">def</li>
<li>hij</li>
</ul>
和这个对象：
$("test")
有没有办法获得这个元素的索引号。在这种情况下，它将是1(如果您将0算作第一个索引)。我能用$(“测试”).parent()做些什么吗？
浏览 1提问于2012-06-02得票数 0
回答已采纳
伙计们
我试图做的功能，当用户按回车，它会自动聚焦到下一个输入区。下面是我编写的代码(基本上，我把@keyup.enter="$event.target.nextSibling.focus()放在每个input元素中，我不明白为什么它不能工作。
<form
id="formContact"
action
method="post"
autocomplete="on"
autocapitalize="on"
ref="
浏览 3提问于2019-11-17得票数 3
我的页面有3个水平放置的div。当中心div悬停时，我需要让两个div移到页面的两侧(左div移到左，右div移到右)。我可以让左边的div移动，但是右边的div不动。我希望使用CSS来实现这一点，如果没有，请告知。非常感谢。
我的代码如下：
.container
{
position:absolute; bottom:0; right:0; left:0;
margin-right:auto; margin-left:auto;
width:50%; height:10%;
}
.a {position:absolute; bottom:0; left:
浏览 0提问于2012-03-29得票数 4
回答已采纳
我正在解析一个来自网站的HTML文件，但从该文件中获取所有数据时遇到了问题。
<tr>
<td class="color_line1" valign="center" align="left">Cemopel - Cm Petroleo Ltda.</td>
<td class="color_line1" valign="center" align="left">Avenida Rui Barbosa, 879 0</td>
<td
浏览 0提问于2013-09-12得票数 0
我有一个显示问题的基本柱塞：。当您单击该按钮时，第一个元素将以弹跳动画显示/隐藏。这很好用，但问题是它下面的项目只是跳到新的地方，这是相当丑陋和刺耳的。
所以，如果你点击这个按钮，第一项滑动离开，然后第二项和第三项跳起来。我希望当第一项滑走时，所有的东西都往上滑。如何做到这一点？我需要放弃animate.css并编写我自己的自定义动画吗？这是如何工作的呢？(我真的不关心弹跳动画，它应该只是滑走/回到视图中。)
浏览 0提问于2014-05-21得票数 1
1回答
我试图使用各种“组合器”选择器将CSS应用于子div中的元素，但它们似乎都不起作用。工作代码是：
为了我的页面，我想把单选按钮放到他们自己的div中，这样我就可以把它们作为一个单独的菜单。
但是，当我将菜单放到它自己的div中时，我似乎无法获得CSS来访问元素“字符”。
#original:checked ~.characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [da
浏览 1提问于2015-07-06得票数 0
回答已采纳
1回答
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
该拖放是否指任何可拖的元素？如果不是，这意味着什么？我看到用户选择正在设置，这样文本就不会意外地从评论告诉我的内容中被选中。
浏览 0提问于2013-10-05得票数 3
回答已采纳
1回答
可以将伪类应用于子元素。
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
浏览 1提问于2014-08-13得票数 3
回答已采纳
我看过与JQuery方法相关的.next()文档，它声明：
给定一个表示一组DOM元素的jQuery对象，.next()方法允许我们搜索DOM树中这些元素的后续兄弟关系，并从匹配的元素中构造一个新的jQuery对象。
该方法可选择地接受与我们可以传递给$()函数的类型相同的选择器表达式。如果紧接着的同级匹配选择器，则它将保留在新构造的jQuery对象中；否则，它将被排除在外。
我试图在div中指定一个元素，如下所示：
$("input[name='first-name'").keyup(function () {
if (!name($(this
浏览 2提问于2015-07-21得票数 0
回答已采纳
在这里，我想隐藏msg_wrap div，它离单击的msg_head类最近(之后)。我的jquery：
$(document).on("click", ".msg_head", function() {
$(this).closest('.msg_wrap').slideToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
浏览 3提问于2015-10-06得票数 1
回答已采纳
2回答
我正在学习JQuery，并且正在使用通过图片滑动文本的JQuery脚本：
<script>
$(document).ready(function() {
var currentImg = 1,
totalImages = 4
loopTime = 1000,
intervalId = null;
function displayTitle(imgNbr) {
$('.title&#
浏览 0提问于2012-06-24得票数 0
回答已采纳
我制作了一个输入电子邮件框，并在标签上应用了一个转换。每当我输入电子邮件时，它就向上移动。但当我离开时，它又回到了与输入重叠的位置。所以，我搜索了一个解决方案，这是我在互联网上找到的一个密码。
.email__input:not(:placeholder-shown).email__input:not(:focus) + .email__label {}
但我不太明白它是怎么工作的。如果你能向我解释这句话，会有帮助的。
浏览 3提问于2022-04-08得票数 0
我可以在jQuery中的下一个隐藏行上设置触发‘点击’吗？
$('.js-data-selector .aspect-data:first').trigger('click');
上面是在第一行触发的代码。
浏览 0提问于2015-10-30得票数 0
我有一个表单，其中有一个字段，我可以在其中粘贴图像url，并在其右侧的按钮，当单击时，将抓取字段输入值，并打开一个窗口，以预览图片URL。
这是HTML部分
<!-- Article Featured Image URL -->
<div class="form-group">
<label class="col-md-2 control-label" for="ArticleFeaturedImageURL">Featured Image URL</label>
浏览 13提问于2018-08-03得票数 1
回答已采纳
1回答
HTML：
<div class="parent">
<a href="#" class="target"></a>
<div class="block">text</div>
<div class="block">text</div>
</div>
<div class="parent">
<a href="#" class="t
浏览 3提问于2014-11-14得票数 0
回答已采纳
也许我看得太多了，但是为什么select标签的id没有被警告呢？
下面是我正在玩的代码：
<select id="one">
<option>an option</option>
<option>another option</option>
</select>
<button id="btn" >look a button</button>
$("#btn").click(function() {
var c = $(th
浏览 3提问于2014-02-14得票数 0
回答已采纳
我刚刚开始使用jQuery，虽然下面的代码完成了任务，但我有一种感觉，它可以缩短。
var accountAddress = $(document.createElement("input")).addClass("readOnly")
.attr("contentEditable", "false").attr("id", "d_accountAddress");
$("#customerid_c").next().next().next().append(acc
浏览 2提问于2010-03-22得票数 22
回答已采纳
2回答
我有一个组名列表，对于每个组名，我有一个学生名称列表。在单击组名时，我想显示每个组下的名称列表。
就像。
group 1(#clicked)
A
B
C
group 2(#not clicked)
group 3(#clicked)
F
E
R
我有两个模特
1:组(id，name) 2:学生(id，name，group_id)
HTML:-
{% for group in groups%}
<span class="group-list" data-id="{{group.id}}">{{
浏览 3提问于2015-11-02得票数 1
回答已采纳
在这个之后，我能够在单击链接时动态创建子组件。除了我的父组件是
parent.html
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody #parent>
</tbody>
</table>
儿童component
浏览 0提问于2018-08-11得票数 2
回答已采纳
2回答
我以这种方式使用CSS同胞选择器(~)：
X:hover ~ Y { }
似乎只有当X位于Y之前(在HTML中)时，它才能工作。可以在上显示
把Y放在X前面使它停止工作。请参阅
知道我该怎么修吗？
浏览 5提问于2014-01-01得票数 1
回答已采纳
我在jQuery中使用prev()时遇到了问题，因为它没有选择正确的元素。
我的HTML结构如下：
<section id="about">
...
</section>
<hr>
<section id="contact">
...
</section>
"active“部分是#contact。我想选择上一节跳过<hr>
active = active.prev('section')似乎不起作用。我想我可能看错文档了..。
如果我拿出<hr&g
浏览 0提问于2011-03-28得票数 19
回答已采纳
可能重复：
说你有：
----------
X
----------
Y -> Z
----------
如果Z是Y的子级，我想选择所有有一个有Z子的兄弟姐妹的X
浏览 3提问于2012-10-30得票数 0
回答已采纳
我目前在使用jQuery定位DOM中的下一个div时遇到了一些问题。我怀疑这可能是因为我的目标<div>包含在<a>标记中。
我的目标是在用户将鼠标悬停在div class="island_hover"上时出现的div class="div_name"
HTML：
<div id="interactive_map">
<a href="#"><div class="island_hover" id="1"></div></
浏览 0提问于2013-06-02得票数 1
回答已采纳
3回答
<script type="text/javascript">
$(document).ready(function(){
$('.show').click(function(e){
$(this).closest('.b').css('display','block');
e.preventDefault;
});
});
</script>
<style type="text/css">
.b{ display
浏览 2提问于2013-07-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
