CSS-派生选择器

最新推荐文章于 2023-10-02 06:30:24 发布
转载 最新推荐文章于 2023-10-02 06:30:24 发布 · 333 阅读 · 1
文章标签：

#css #派生选择器

CSS-派生选择器一个学习记录

CSS 后代选择器

来源： CSS 后代选择器

1.在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。

选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

2.有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深


CSS 子元素选择器

来源：CSS 子元素选择器

使用大于号（子结合符）。只选择某个元素的子元素，而不是任意层次的子孙元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is 
    <strong>very</strong>
    <strong>very</strong>
    important.
</h1>
<h1>This is 
    <em>really 
        <strong>very</strong>
    </em>
    important.
</h1>
</body>
</html>

h1 > strong {color:red;} 效果：


CSS 相邻兄弟选择器

来源： CSS 相邻兄弟选择器

选择紧接在另一个元素后的元素，而且二者有相同的父元素。

使用加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <div>List item 3</div>
    <li>List item 3</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

li + li {font-weight:bold;}  效果为：


CSS基础-派生选择器
11-22
CSS基础-派生选择器，CSS入门必备资料
CSS 派生选择器（四）
mzoy的专栏
07-29 1765
  派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样
4 派生选择器
weixin_30920513的博客
01-11 104
派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，他们被称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过...
CSS——派生选择器
Zjaun的博客
02-13 2039
1. 派生选择器 &amp;lt;style type=&quot;text/css&quot;&amp;gt; a { color: red; } /*派生选择器*/ p a { font-size: 32px; } &amp;lt;/style&amp;gt; 2. id派生选择器 &amp;lt;style type=&quot;text/css&quot;&amp;gt; a
CSS 派生选择器
health的博客
03-09 751
一、后代选择器 后代选择器（descendant selector）又称为包含选择器。 如：作为 h1 元素后代的任何 em 元素 h1 em { color:red;} 二、子元素选择器 子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 如：选择只作为 h1 元素子元素的 strong 元素 h1 > strong {color:r...
CSS派生选择器
hongbinchen的专栏
10-23 3906
功能： 　在css中，需要根据类名、对象ＩＤ、元素名进行定位的情况下，可以使用派生选择器进行定位！ 语言基础总结： １. 　在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后， ２.　在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前 ３.　中间的空格表示后代元素 例子： /*作为 h1 元素后代的任何 em 元素，不管中间是否还有其
css中的派生,CSS派生选择器
weixin_36182916的博客
08-03 803
一 派生选择器通过依据元素在其位置的上下文关系来定义，使用标记会更加简洁。在css1当中，通过这种方式来应用规则的选择器被称为上下文选择器，这就是由于它们依赖于上下文关系来应用或者避免某些规则。在css2当中，它们称为派生选择器，但是无论你任何称呼它们，它们的作用都是一样的。通过派生选择器允许你根据文档的上下文关系来确定某个标签的样式。也就是说通过合理的使用派生选择器，我们可以使html代码便的更...
CSS之派生选择器（上下文选择器）
勿六七的博客
07-02 9394
选择器（selector）是CSS里面非常重要地一部分知识。根据我暂时浅薄地理解，CSS就是对一份HTML代码里面的元素进行运用各种样式。所以，第一步就是要准确地定位你想要运用样式的元素。CSS里面通过各种选择器来定位元素。 CSS里面选择器有很多种，今天就只想说说 “派生选择器”。一听“派生选择器”这个名字，我真心做不到见名知义地感觉它是什么选择器。一看英文名叫“contextual selec...
css的派生选择器
小武Styles
05-08 897
Insert title here --> div p{ color:red; font-size:20px; } div,p{ color:green; font-size:30px; } /* p{ color:green; } */ a:LINK { text-decoration:none; color:green; } a:HOVER { text-decor
css派生选择器
JAVA学习专用BLOG
09-03 767
 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 实例如下：ol li strong {    font-style: italic;    font-weight: normal;  }ol li {  color: blue;}我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我
派生选择器
weixin_44680346的博客
10-09 209
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>派生类选择器</title> <style type="text/css"> li strong{ color: red; } strong{ color:green;} </style> </head> <body&g
css派生选择器外部,CSS派生选择器
weixin_42515409的博客
08-03 244
功能：在css中，需要根据类名、对象ＩＤ、元素名进行定位的情况下，可以使用派生选择器进行定位！语言基础总结：１. 　在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后，２.　在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前３.　中间的空格表示后代元素例子：/*作为 h1 元素后代的任何 em 元素，不管中间是否还有其它元素隔开*/h1 em {color...
CSS中的派生选择器及其使用方法
最新发布
CyberJolt的博客
10-02 345
派生选择器是CSS中一种强大的选择器，它允许根据元素在其父元素内的位置或状态来选择元素。通过使用派生选择器，我们可以针对特定的上下文选择元素，并对它们应用样式。上述代码中的伪类选择器分别选择了鼠标悬停在链接上时的样式、选中的输入框的样式以及列表中奇数位置的元素的样式。上述代码将选择紧接在h2元素后面的所有p元素，并将它们的上边距设置为10像素。上述代码将选择ul元素内的直接子元素li，并将它们的文本颜色设置为红色。上述代码将选择紧接在h2元素后面的第一个p元素，并将其字体加粗。
jQuery 层次选择器
weixin_34406086的博客
09-14 146
1　　派生选择器：在s1内部获得全部的s2节点(不考虑层次) 　　$(“div span”)// 派生选择器 　　<div> 　　<span></span>//找到 　　<p> 　　<span></span>//找到 　　</p> 　　</div> 　　<span>&lt...
CSS 2 CSS 选择器 - 3 2.6 派生选择器
谢谢你们的关注
10-24 659
CSS 2 CSS 选择器 - 3 2.6 派生选择器
理解CSS派生选择器与DIV+CSS布局
"该资源主要介绍了CSS派生选择器在网页布局中的应用，以及DIV+CSS实现整体布局的相关概念和技巧。重点讲解了CSS的选择器、盒子模型、基本语法，并强调了遵循W3C标准的重要性。" 在网页设计中，CSS（层叠样式表）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值