CSS选择器中的特殊字符
是指在选择器中具有特殊含义的字符。这些特殊字符用于匹配特定的元素或元素属性。以下是一些常见的CSS选择器中的特殊字符：
- 通配符选择器（）：用于匹配所有元素。例如，使用``选择器可以选择页面上的所有元素。
- 类选择器（.）：用于选择具有指定类名的元素。例如，使用
.classname选择器可以选择具有指定类名的元素。 - ID选择器（#）：用于选择具有指定ID的元素。例如，使用
#idname选择器可以选择具有指定ID的元素。 - 子选择器（>）：用于选择作为指定元素的直接子元素的元素。例如，使用
parent > child选择器可以选择作为parent元素的直接子元素的child元素。 - 相邻兄弟选择器（+）：用于选择紧接在指定元素后的第一个同级元素。例如，使用
element + sibling选择器可以选择紧接在element元素后的第一个同级sibling元素。 - 伪类选择器（:）：用于选择具有特定状态或特定位置的元素。例如，使用
:hover选择器可以选择鼠标悬停在元素上的元素。 - 属性选择器（[]）：用于选择具有指定属性或属性值的元素。例如，使用
[attribute]选择器可以选择具有指定属性的元素，使用[attribute=value]选择器可以选择具有指定属性值的元素。 - 伪元素选择器（::）：用于选择元素的特定部分或生成的内容。例如，使用
::before选择器可以选择元素的前面生成的内容。
这些特殊字符在CSS选择器中起到了不同的作用，可以根据需要灵活使用。在实际开发中，可以根据具体需求选择合适的选择器来选择和操作元素。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
问题
我试图在样式标记中获取内容，但我无法让它工作。
代码做什么
我使用jQuery并尝试使用text()和html()获取样式内容。它不起作用。
我的代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="cs
浏览 7提问于2011-11-18得票数 4
回答已采纳
给定网页上具有id的元素：
id="j_idt74:addNewTypeBtn"
我使用了“@findBy”注释方式来抓取网页元素。
使用：
@FindBy(how=How.CSS, using="input#j_idt74:addNewTypeBtn")
WebElement mAddButton;
提供一个错误：“给定的选择器input#j_idt74:addNewTypeBtn无效或不导致WebElement。发生了以下错误: InvalidSelectorError:指定了无效或非法的选择器。”
但是，如果我使用ID作为属性表示法，如：
@FindBy(
浏览 4提问于2015-05-11得票数 0
回答已采纳
1回答
给出了我从中学到的以下示例
CSS.escape(".foo#bar") // "\.foo\#bar"
CSS.escape("()[]{}") // "\(\)\[\]\{\}"
因为.foo#bar是一个有效的CSS选择器表达式。为什么我们需要在一些字符之前添加\？假设我想编写自己的程序，执行相同的任务，即转义CSS文件中的所有值/表达式，那么我应该如何进行呢？
PS:我总是对逃逸感到困惑，当涉及到逃避一些输入时，我应该怎么想呢？
浏览 1提问于2016-02-17得票数 1
回答已采纳
我只想知道selenium CSS定位器中的特殊字符@是什么意思。
例如，对于HTML
<select id="ms1" multiple="multiple">
<option id="oa">
OptionA
</option>
<option id="ob" selected="selected">
OptionB
</option>
<option id="oc"&g
浏览 0提问于2011-12-08得票数 2
回答已采纳
我在一个例子中看到了下面的CSS -
.hover\:bg-gray-800:hover {
background-color: #2d3748;
}
我的问题是反斜杠在这里的用法是什么？
浏览 10提问于2022-09-13得票数 -3
回答已采纳
这至少需要与IE7/8和其他主流的当前浏览器跨浏览器兼容。
我有以下(简化的) HTML：
<div id="facebook">
<fb:like ...... />
<fb:comments>
<iframe .... />
</fb:comments>
</div>
IFRAME是由Facebook添加的，但我需要对其进行显示修改。如何使用CSS选择器选择“div下ID为facebook的第二个FB标签中的第一个IFRAME”？我需要向IFRAME添加高度和溢出
浏览 1提问于2011-06-25得票数 0
回答已采纳
我有一个锚标签，看起来像这样
<a rel="C:\dev/ACME.Console/3rdPartyBinaries/" href="#">3rdPartyBinaries</a>
，可以嵌套在li或ul标签中。
我正在尝试设置单击时这些锚标签的背景色。我现在正在用下面的函数来做这件事。
function (file) {
$('a[rel="' + file + '"]').css("background", "#eee");
因此
浏览 2提问于2011-05-27得票数 1
回答已采纳
我正在为wordpress使用一个插件，开发人员使用名称中的[]字符创建ID。
我想不出如何用css来瞄准他们.
<p id="shipping_city[]_field">stuff</p>
所以我试着
#shipping_city[]_field {font-size:24px;}
或者什么..。也没有运气。
以前有人遇到过这种事吗？
我不想更改开发人员html，因为这是为了表单条目，我认为[]有一个目的.
浏览 2提问于2015-03-26得票数 3
回答已采纳
我在我的项目中使用了引导程序，我还使用了一个css文件，它是从一个开源项目借用的，也是基于引导程序的。
在这个css文件中，它有：
.container {
width: 100%;
padding: 0
}
我的html非常简单：
<div class="special"><div class="container">...</div></div>
对于container内部的special div，我需要使用special引导程序中的container，如下所示：
.container {
marg
浏览 1提问于2016-02-26得票数 0
回答已采纳
2回答
我有一个家庭作业，在那里我必须在不接触html的情况下写一页。其中两个in名以"#“开头，我可以使用in在css文件中选择它们吗？
浏览 0提问于2019-04-27得票数 0
回答已采纳
我试图使用jQuery选择行，并根据条件将它们的背景颜色变为红色或绿色，但我似乎无法让jQuery来选择它们。我只能通过自定义属性中唯一的INT号来标识它们。
HTML看起来如下所示
<tr df:row_id="0" ..........
我尝试了N个代码变体，如
$("[df:row_id='"+theId+"']").css({ 'background-color' : 'green'});
或
$("tr[df:row_id='"+theId+"'
浏览 3提问于2014-12-08得票数 0
回答已采纳
我正在使用jQuery创建元素，并在此过程中为它们分配in。在后面的代码中，我想通过它们的ID来访问这些元素，但是我不能用jQuery做到这一点。不过，如果我只使用核心JS，它就可以工作。为什么会这样呢？
var createTable = function(rows, columns, height, width) {
var $table = $("<table>");
$("body").append($table);
for (var i = 1; i < rows + 1; i++) {
va
浏览 1提问于2014-04-29得票数 0
我使用下面的代码将id p:r:0:abc转换为p\\:r\\:0\\:abc
function getId(comp) {
var id = comp.getClientId().split(':').join('\\\\:');
return id;
}
我使用生成的id进行以下操作
$(id).css("background-image", "url('../something.png')");
$(id).slideToggle();
它不是改变背景，也不是做动画
但是，如果我将id硬编码为它下面的
浏览 2提问于2016-02-25得票数 1
回答已采纳
CSS“包含”选择器是
td[class*="foo"]
我可以选择多个类
td[class*="foo bar"]
然而，对于<td class="foo baz bar" />来说，这将失败
如何进行CSS“包含”通配符的选择？
顺便说一句:我不能使用td.foo.bar
浏览 4提问于2014-03-13得票数 5
回答已采纳
我将默认声明放在style.css中，然后将所有媒体查询放在称为enhanced.css的不同的sytlesheet中。
例如，我在style.css中放置了一个代码，如下所示：
.box{height: 600px;}
然后我在enhanced.css中放了一个css代码，这样当盒子在较小的屏幕上时，它的高度就会降低。
@media only screen and (min-width: 320px) and (max-width: 480px) { .box{height:300px;} }
但不幸的是，它不能在小屏幕上工作。它总是遵循style.css的样式。我的问题是，我能做上面
浏览 2提问于2013-08-16得票数 2
回答已采纳
1回答
我不得不将一个CSS类重命名，这个类通常以#符号开始为点，这样ExtJS框架就可以正确地处理它。
那个jQuery脚本在我做那个更改之前一直工作得很好，现在它抱怨它找不到元素。
我不太习惯jQuery，我的问题是这应该有效吗？
$('.x-panel-body-cssmenu li.has-sub>a').on('click', function(){
//some code that errors out because .x-panel-body-cssmenu can't be found apparently...
});
这是
浏览 2提问于2014-06-02得票数 1
回答已采纳
我以前在使用css选择器的选择下拉列表中使用过复选框符号，但在safari中不起作用(chrome和firefox都可以)。
option:before { content: "☐"}
option:before { content: "text"}
我不明白为什么，我已经在选项中尝试了另一个标签，但什么也没有。
浏览 23提问于2021-03-10得票数 0
1回答
我正在使用ng-carousel ，并且我希望有不同的prev/next图标。我感兴趣的是使用字体很棒的字体，而不是默认的字体。有没有可能改变以某种方式使用的css类模板，或者我必须扩展该组件并编写自己的模板(就像这里建议的)？
谢谢
更新：
也许我需要重新表述这个问题：
我想做等同于更改/交换CSS类的操作：
.carousel-control-prev-icon {
/* extend FontAwesome left chevron*/
@extend .fa-chevron-left;
}
但我不会用萨斯。
浏览 7提问于2017-08-30得票数 0
我正在使用beforeShowDay在我的jQuery日期选择器中突出显示特殊的日子。我能够改变背景的唯一方法是在我的css类中使用'!important‘标签。这对于除了“今天”之外的所有日子都是完美的。css不会更改背景颜色，只会更改边框。
我的css：
.genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}
浏览 0提问于2009-05-18得票数 1
我最近遇到了这样一个css规则：
.csstransforms & th.rotate {
....
}
我不知道.csstransforms &是什么意思，搜索它似乎找不到任何相关的链接。
浏览 3提问于2017-01-27得票数 0
回答已采纳
3回答
我试图在scrollTop函数中使用#，但我得到的只是“未定义”--我哪里出错了？
<html><head><meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.
浏览 2提问于2014-03-06得票数 1
回答已采纳
我试图在CSS文件上设置af:panelList的渲染属性，这样我就不能根据设备分辨率显示它，但当我在CSS上定义时：
#pl2 {
rendered:false;
}
我得到了一个未知的属性“渲染”，当它的分辨率较小时，chrome不会隐藏它。
下面是我的.jspx文件中的组件定义：
<af:panelList id="pl2" rows="3" maxColumns="5" >
我能做些什么来解决这个问题呢？有没有附近的路？
浏览 0提问于2012-12-14得票数 1
回答已采纳
1回答
我目前正在写一个Bootstrap css的电子应用程序。不管出于什么原因，bootstrap-heme.min.css在bootstrap.min.css之前加载，尽管它的顺序是相反的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="src/css/font-awesome.min.css">
浏览 2提问于2016-07-28得票数 1
从密码字段构建regex以排除字符/、\、‘和“。
$(':password').keyup(function () {
if ($(this).val().match(/^['"\\\/]+$/)) {
$(this).css("border", "5px solid red");
} else {
$(this).css("border", "5px solid green");
};
});
如果密码字段包含任何非法字符，则输入字段周
浏览 5提问于2014-02-19得票数 0
回答已采纳
我正在使用Wordpress Divi主题开发一个客户端的网站，我没有使用它，但我遇到了一些问题，无法定制与这个主题不一致的东西(还有其他人有过这个问题吗？)
因此，在右下角的脚注中，我试图添加mailchimp注册框。它现在在那里，但我希望宽度更宽(100%)。我在嵌入代码上尝试了内联css，并在附加CSS中使用宽度CSS尝试了这些类标记：
.input#mce-EMAIL.email
#mce-EMAIL.email
.email
#mce-EMAIL
.mc_embed_signup_scroll
还没破解呢。有什么建议吗？
浏览 3提问于2017-08-30得票数 1
回答已采纳
当我在我的程序中遇到这种情况时，我有点困惑。所以我想知道有没有人知道这是怎么回事。毕竟，我对Jquery相当陌生。
为何：
$('[id="' + nameOftheID + '"]').append("Append some text");
为我工作。
现在还没有
$("#" + nameOftheID).append("Append some text");
对我不起作用。在本例中，'nameOftheID‘是一个变量，它与我试图添加一些文本的span的ID完全相同(我在调试中测试并确认
浏览 4提问于2014-05-19得票数 1
回答已采纳
1回答
我有一个WebApp，在这里我需要使用CSS文件来操作某些元素。CSS类包含方括号和其他特殊字符。至少铬似乎没有直接接受它们。
<div class="profileElement profile[~redString]">123</div>
这门课有效吗？有办法用这个类名吗？我要：
.profile[~redString]{
color: red; }
当我用反斜杠将~转义时，chrome允许我将它注入到页面(F12 -> Elements ->，右上角的加号)，但以灰色显示css，这意味着页面中不存在该类。
那门课有效吗？如果是的
浏览 2提问于2015-08-28得票数 2
回答已采纳
2回答
根据我所读到的，根据包含的顺序，css样式相互覆盖。但我正在经历一些奇怪的行为，如图所示：
显然，default.css包含在base.css之后，这将假设来自default.css的样式将覆盖来自base.css的样式。然而，情况并非如此，正如您所看到的，来自base.css的样式仍然存在，来自default.css的样式正在被取消。为什么会这样呢？
浏览 4提问于2013-12-18得票数 0
回答已采纳
2回答
我使用的是一个支付服务，它在我制作的模板中生成一堆代码。问题是他们在命名一些div时使用了括号"()“。这给我带来了一个问题，因为我必须样式化所有生成的div，而CSS不喜欢用括号命名的div。
他们的代码：
<div id="wwctrl_paytypeLogo_AMEX">
<div id="wwctrl_paytypeLogo_AMEX(SE)">
<div id="wwctrl_paytypeLogo_AMEX(DK)">
我的CSS：
#wwctrl_paytypeLink_MTRO butt
浏览 7提问于2011-04-14得票数 2
回答已采纳
1回答
考虑到我想简化以下较少的代码：
@title1: ~"h1.someclass > a";
@title2: ~"h1.otherclass > a";
@{title1},@{title2} {
&:after {
display: none;
}
}
其评估结果是：
h1.someclass > a:after,
h1.otherclass > a:after {
display: none;
}
我试图通过使用
@titles: ~"@{title1},@{title2}"; // Co
浏览 4提问于2017-06-08得票数 1
回答已采纳
2回答
我试图使用转义函数来转义一个单引号：
var tagDesc = "Workers'_Compensation";
tagDesc = escape(tagDesc);
$("#" + tagDesc + ".tag").css("display", "none");
转义函数将单引号替换为%27 to "Workers%27_Compensation"。
所以我犯了个错误，
Microsoft JScript运行时错误:语法错误，无法识别的表达式：#Workers%27_Compensa
浏览 2提问于2013-05-30得票数 5
回答已采纳
4回答
我正在为一个站点开发一个预先编写的模块，我需要以id为test:two的元素为目标。现在，这个元素中有一个冒号，所以jQuery可能会认为'two‘是一个伪类，这是可以理解的。有没有办法用jQuery来定位这个元素呢？
此外，不能更改ID。相信我，如果我可以的话我会的。
我给出了一个例子：
$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
浏览 0提问于2011-09-16得票数 42
回答已采纳
3回答
针对以空格开头的类值
、、、、
我想为一个以空格开头的类做一个CSS选择器，但是我不知道怎么做。例如：<table class=" example">…</table>。
浏览 7提问于2016-11-20得票数 4
回答已采纳
5回答
我使用jQuery选择器检查href中的字符：
var param = "something";
$("a[href*="+param+"]").css("color", "red");
在"something“包含=符号之前，它可以很好地工作。例如：
var param = "xkey=123";
$("a[href*="+param+"]").css("color", "red");
然后我就得不到任何结果。有人知道解决方案
浏览 0提问于2012-08-31得票数 6
5回答
我的问题是我没有HTML代码来更改id来删除‘..’...
有没有可能处理这样的id，比如说：
<td id='my.id'>
在CSS文件中执行类似以下操作：
#[my.id]{ ... }
我知道这不起作用(这是更多的访问方法)，但我想知道在CSS中是否有这样的语法？
浏览 0提问于2011-03-02得票数 1
回答已采纳
2回答
我有一个代码，显示图像在一定的安排，以反映晶片。当用户单击图像时，会在其周围放置一个红色边框。然后将此图像id保存在cookie数组中，当重新加载页面时，这些特定的图像需要保持其边框。
我的问题是我无法使用id访问html元素。
例如：
$("#10.3_6").css('border', "solid 2px red");
不管用。我就是这样站在边境上的：
$("tr.smallthumbs a img").click(function() {
var found = 0;
for(var j i
浏览 1提问于2014-03-07得票数 0
回答已采纳
2回答
铬选择器后冒号
、、
当我有这个css时：
.bigpoint {
font-size: 40px;
}
我的div与类bigpoint的字体大小为40像素，正如预期的那样。
当我在选择器后面添加冒号时：
.bigpoint: {
font-size: 40px;
}
样式设计被忽略。我找不到任何关于它的文档，指针似乎都接受它。到底怎么回事？
瑞克
我的文档类型是<!DOCTYPE html>
浏览 2提问于2016-02-15得票数 0
回答已采纳
3回答
我有一个带有div样式的CSS文件，这个CSS有一个主体，如下所示：
css1.css
body{
background-color:#000;
}
#div1{
...
}
#div2{
...
}
在页面中，我想使用css1.css中的一些div，但是有不同的体色。因此，我为此创建了另一个css：
css2.css
body{
background-color:#fff;
}
所以在这一页里我有：
<link rel="stylesheet" type="text/css" href="css1.css">
<link
浏览 2提问于2016-02-05得票数 3
回答已采纳
我有以下问题：
<input id="c-search" type="text" class="form-control search" placeholder="Search..."/>
.search {
width: 275px;
margin-left: 15px;
transition: 0.5s;
}
我的css的宽度不起作用，因为它被引导的form-control-class覆盖了。
我不能在css中使用！！，因为我需要稍后用javascript更改宽度，而且我不想为id对齐css
浏览 0提问于2020-02-02得票数 0
回答已采纳
我使用JSF和PrimeFaces，并尝试通过更改或添加一些CSS行来修改render。
我在.xhtml页面中添加了名为"styles.css“的CSS文件，它是在PrimeFaces之后加载的，所以我可以覆盖默认值。
PrimeFaces在我的页面中创建一个div：
<div id="j_idt13:universe" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 86px;"&
浏览 2提问于2012-10-21得票数 1
回答已采纳
1回答
我在Edge中的进度条(25.10586.672.0版)有问题。默认情况下，我实现的进度条上有一个边框。默认情况下，Chrome和Firefox中都没有边框。我可以通过将CSS属性边框设置为none来消除它的问题，但是在填充栏时仍然有一个分隔行(也就是说，如果在填充栏的一半，填充部分和未填充部分之间有一条小行)，即使将边框设置为none，也不会消失。
我很好奇我是否需要为此修改一个特定的CSS属性，或者可能还有另一个潜在的原因，为什么我需要设置边框呢？提前感谢！
浏览 7提问于2017-07-28得票数 1
回答已采纳
4回答
以下是有效的类名吗？
.text-moretext
.text&text
.text_text
.text(text)
我想任何CSS类都可以包含特殊字符吗？
浏览 2提问于2009-10-12得票数 2
回答已采纳
在一个由.each赋值的函数中，我想删除a标记/。以下是一个不起作用的示例：
$('div.link').has('div.entry:has(p.title:has(a[href^="http://i.imgur.com/"]))').each(function (i) {
$(this).css('border', '5px solid');
$(this).remove('a'); // Does NOT work! Nothing happens...
console
浏览 0提问于2012-11-19得票数 3
回答已采纳
3回答
我有一个有孩子的容器：
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
有时，我希望在容器中添加另一个子(服务器端)，并更改其他孩子的样式，以便为他们的新兄弟姐妹腾出空间。它将成为：
<div id="container">
<div id="special"></div>
<div>&
浏览 4提问于2013-08-09得票数 0
回答已采纳
这是我的app.component.html
<header>
<cm-main-navigation></cm-main-navigation>
</header>
<router-outlet></router-outlet>
<footer>
<cm-footer></cm-footer>
</footer>
我的应用程序的每一页显然都出现在路由器出入口之后。
我的css是：
:host {
display: flex;
height:
浏览 1提问于2016-10-21得票数 1
回答已采纳
2回答
我想把这段javascript代码转换成CSS，我一直在搜索这个网站和谷歌，但没有得到直接的答案。
var riskCell20 = document.getElementById("risk.probablity.literal.l100").childNodes[2];
类似这样的东西
#risk.probablity.literal.l100:nth-child(2);
找不到正确的语法
浏览 2提问于2018-05-08得票数 3
使用Laravel5.1。
我有一个请求，在其中我要进行输入验证。我调用.ajax方法并接收JSON输出。
类似于：
{
"category.subcategory_one" : ["This field must be at least 3 characters long"],
"category.subcategory_two" : ["This field must be at least 5 characters long"],
...
}
但是，验证的输入如下所示
<input name=&
浏览 1提问于2015-10-13得票数 0
回答已采纳
3回答
我正在使用这个div：
<div id="container" class="large">
在我的CSS中，ID被指定为默认高度，如下所示：
#container {height: 500px}
在这种情况下，我希望div更大，但这会覆盖类。
.large{height: 560px}
我不想让一节课变小，一节课大.
，我该怎么做?
附加到类中，只会影响这个div以使其更大！
浏览 6提问于2011-11-03得票数 2
回答已采纳
我的网站上有一个HyperLink，它显示的是图像而不是文本。我想让它在鼠标悬停时交换到另一个使用css的图像。到目前为止，我已经想出了这个：
<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"
NavigateUrl="~/Default.asp" CssClass="homeHover" />
我的css：
.homeHover { }
.homeHover:visited { back
浏览 0提问于2010-07-07得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
