<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>selector-context.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--
派生选择器：派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。
每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
CSS 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。
结合后代选择器和子选择器:table.company td > p
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
CSS 伪类用于向某些选择器添加特殊的效果。
selector:pseudo-class {property: value} 或者 selector.class:pseudo-class {property: value} 冒号两边不能有空格。
锚伪类：在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
first-child 伪类：使用 :first-child 伪类来选择元素的第一个子元素。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
lang 伪类：:lang 伪类使你有能力为不同的语言定义特殊的规则。
CSS 伪元素用于向某些选择器设置特殊效果。
selector:pseudo-element {property:value;} 或者 selector.class:pseudo-element {property:value;}
:first-line 伪元素：用于向文本的首行设置特殊样式。
注释："first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
•font
•color
•background
•word-spacing
•letter-spacing
•text-decoration
•vertical-align
•text-transform
•line-height
•clear
:first-letter 伪元素：用于向文本的首字母设置特殊样式：
注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-letter" 伪元素：
•font
•color
•background
•margin
•padding
•border
•text-decoration
•vertical-align (仅当 float 为 none 时)
•text-transform
•line-height
•float
•clear
:before 伪元素：可以在元素的内容前面插入新内容。
:after 伪元素：可以在元素的内容之后插入新内容。
-->
<style type="text/css">
h1 em {
color: red;
}
h2 > strong {
color: blue;
}
div.company h3 > p {
color: green;
}
li + li {
font-weight: bold;
}
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
li.firstelement:first-child {text-transform:uppercase;}
q:lang(no) {
quotes: "~" "~"
}
p.firstline:first-line {
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
<hr />
<h2>This is <strong>very</strong> <strong>very</strong> important.</h2>
<h2>This is <em>really <strong>very</strong></em> important.</h2>
<hr />
<div class="company">
<h3><p>this is a paragraph in div</p></h3>
<h3><em><p>this is a paragraph in div</p></em></h3>
</div>
<hr />
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<hr />
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
<p><b>注释：</b>提示：伪类名称对大小写不敏感。</p>
<hr />
<ul>
<li class="firstelement">Intert Key</li>
<li class="firstelement">Turn key <strong>clockwise</strong></li>
<li class="firstelement">Push accelerator</li>
</ul>
<hr />
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
<hr />
<p class="firstline">
You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
分享到：
相关推荐
PostCSS在Angular组件中使用Tailwind CSS函数 PostCSS插件，可通过父选择器（如dark :）使Tailwind CSS函数在Angular组件中工作plugins: [ require ( 'postcss-ng-tailwind-in-components' ) ( { parentSelector : '...
query Javascript CSS Selector engine query是一个javascript css selector engine，小巧而功能强大，压缩后2k...query(selector[,context]) div #intro div#intro .red span.red [name] [name=keywords]
query是一个javascript css selector engine，小巧而功能强大，压缩后2k左右，可以很轻松的集成到代码当中。支持浏览器 IE6+、Firefox、Chrome、Safari、Opera 选择器query(selector[,context]) div #intro div#...
例如，可以使用`$('ul#custom-context-menu li a').click(function() {})`。 6. **隐藏菜单**：当用户在菜单之外点击或按下Esc键时，应该隐藏菜单。这可以通过监听`mousedown`和`keydown`事件来实现。 以下是一个...
This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based ...
MojoJS查询v2.0.0 ... * Query HTMLElements by css seletor and context. * * @param { String } selector * @param { String (selector) | HTMLElement | Array<HTMLElement> | NodeList } c
This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based ...
$ ( selector , context ) ; //get element(s) _ . $ ( selector , context ) . find ( selector ) ; //traverses down _ . $ ( selector , context ) . filter ( selector ) ; //filter by selector _ . $ ( ...
.context-menu-item { background-color: #f9f9f9; /* 自定义背景色 */ } ``` 四、事件处理 jQuery Context Menu支持多种事件，如`show`、`hide`、`click`等，你可以通过这些事件来控制菜单的行为。例如： ```...
过滤器css 过滤CSS规则 安装 npm install --save filter-css 用法 const filterCss = require ( 'filter-css' ) ; const filtered = filter... 可以是['type', 'media', 'selector', 'declarationProperty', 'declara
This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based ...
这是一个自定义构造函数，它接收两个参数：`selector` 和 `context`。通过 `return new jQuery.fn.init(selector, context);` 实现了一个工厂模式，这里的关键是 `new jQuery.fn.init()`，它会创建一个新的实例并...
- **`$(selector).after(content)`**、**`$(selector).append(content)`**、**`$(selector).appendTo(content)`**、**`$(selector).before(content)`** - 示例： - `$("#element").after("<div>content</div>");`...
jQuery( selector [, context ] ) ，这是一个标准且常用法，selector 表示一个 css 选择器，这个选择器通常是一个字符串，#id 或者 .class 等，context 表示选择范围，即限定作用，可为 DOM，jQuery 对象。
jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context get() get(index) index(subject) 数据缓存 ...
var myJQ = function(selector, context) { // 这里将实现选择器逻辑 }; ``` 在`myJQ`函数内部，我们需要解析`selector`参数，这可能包含ID、类名、标签名或其他更复杂的选择器表达式。我们将使用`document....
3. **触发菜单**：指定触发右键菜单的元素，通常使用`$(selector).contextmenu()`方法阻止默认的右键菜单行为，并显示自定义菜单。 例如： ```javascript $(document).ready(function() { $('#myElement')....
init: function(selector, context, rootjQuery) { //... return this; }, jquery: "@VERSION", // 更多方法 }; ``` - **jQuery的extend**：jQuery还提供了`$.extend`方法来扩展jQuery自身或某个对象的功能...
在jQuery对象中有一个名为selector的属性，这个属性是用于返回创建当前jQuery对象时所用的CSS选择器字符串。 selector属性通常用于调试或在需要获取对应元素的CSS选择器时使用。在实际开发中，尤其是在大型项目中，...