CSS の高度なセレクターとは何ですか?

css の高度なセレクターには次のものが含まれます: 1. 子孫セレクター、定義時にスペースで区切る、構文 "E F{}"、2. 交差セレクター、"." で区切る、構文 "E.F{ }"、3. 共用体セレクター、コンマで区切られた構文 "E,F{}"; 4. 擬似クラス セレクター; 5. 次の兄弟セレクター; 6. 属性セレクター。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

CSS セレクター: CSS で使用するラベルを指定するもので、そのラベルの名前がセレクターです。意味: どのコンテナを選択するか。

CSS セレクターは、基本的な複数選択と拡張セレクターの 2 つのカテゴリに分類されます。

基本セレクター:

タグ セレクター: タグの種類用 ID セレクター: 特定のタグに使用 クラス セレクター: 使用 必要なすべてのタグのユニバーサル セレクター (ワイルドカード): すべてのタグに適用可能 (推奨されません) 高度なセレクター:

子孫セレクター: スペースで区切られます

交差セレクター: .

## で区切られます #ユニオン セレクター (グループ化されたセレクター): カンマで区切られます 疑似クラス セレクター

次の兄弟セレクター

属性セレクター

1. 子孫セレクター: 定義するときはスペースで区切ります。 形式 E F の場合、E 要素の子孫であるすべての F 要素を意味しますこのスタイルを持っています。スペースは子孫を示します。

子孫セレクターは一種のバランス、つまり共通性と特性のバランスです。特定の部分のすべてのスタイルを変更したい場合は、子孫セレクターについて考える必要があります。

子孫セレクターは、祖先の構造を記述します。

定義を理解するのは少し難しいかもしれません。例を見てみましょう。

例 1: .div1 p{ color:red; }

スペースは子孫を表します。 .p1 p は、 .p1 の子孫のすべての p を意味します。

ここで強調したいのは、これら 2 つのタグは、1 つの子孫の関連付けを維持している限り、連続して隣り合う必要はないということです。言い換えれば、必ずしも息子ではなく、子孫が選ばれるのです。

例: h3 b i{ color:red ; }

上記のコードは、タグ

を定義することを意味します。 i> ラベルのスタイル。 同様に、1 つの子孫の関連付けが維持されている限り、h3、b、および i タグは連続して隣接する必要はありません。 効果:

または、次のような記述があります:

上記の書き方では、

タグと タグは隣接していませんが、一種の子孫関係。 次のような書き方もあります(クラスセレクタとIDセレクタを含めても可)

最初に言いました: 子孫セレクターは祖先構造を記述します 。この文を説明する例を示します。上記の CSS の Document div div p{ color: red; } .div2{...} .div3{...} .div4{...} 我是什么颜色？

p p p を使用すると、テキストの色が赤になります。 。ブラウザの検査要素を通じて、p 要素の祖先リストを確認できます。

そういえば、もう 1 つの崇高なショートカットについて触れておきます。キー。

sublime に p#haha と入力して Tab キーを押すと、

が生成されます。 sublime に p.haha と入力して Tab キーを押すと、

が生成されます。 2. 交差点セレクター 下の図を見ると理解できます:

h3.special{ color:red; }

选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。

只能在h3标签中使用它：

css 注意，交集选择器没有空格。所以，没有空格的 p.red （交集选择器）和有空格的 p .red （后代选择器）不是一个意思。

交集选择器可以连续交：（一般不要这么写）

h3.special.zhongyao{ color:red; } 上面这种写法，是 IE7 开始兼容的，IE6 不兼容。

交集选择器，我们一般都是以标签名开头，比如 p.haha 比如 p.special 。

3、并集选择器：定义的时候用逗号隔开 三种基本选择器都可以放进来。

举例：

p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{ color:red; }

4、伪类选择器 对于 标签，其对应几种不同的状态：

link ：超链接点击之前 visited ：超链接点击之后 focus ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover ：鼠标放到某个标签上的时候 active ：点击某个标签没有松鼠标时 CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接 动态伪类：针对所有标签都适用 下面来分别讲一下这两种伪类选择器。

（1）静态伪类：

用于以下两个状态（ 只能使用于超链接 ）：

link ：超链接点击之前 visited ：超链接点击之后 举个例子：

/*伪类选择器：静态伪类 */ a:link /*(针对所有利用href属性的)超链接(不包括锚点)点击之前是红色*/{

color:red; } a:visited/*让超链接点击之后是绿色*/{ color:green; }

问：既然 a{} 定义了超链接的属性， a:link{} 定义了超链接点击之前的属性，那这两个有啥区别呢？ 答：

a{} 和 a:link{} 的区别：

a{} 定义的样式针对所有的超链接(包括锚点) a:link{} 定义的样式针对所有写了href属性的超链接(不包括锚点) （2）动态伪类:

用于以下几种状态（适用于所有的标签）：

focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性） ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover（盘旋，鼠标停留在上面） ：鼠标放到某个标签上的时候 active（长按状态） ：点击某个标签没有松鼠标时 举个例子：

/* 伪类选择器：动态伪类*/ input:focus/*让input文本框获取焦点时：边框：#FF6F3D这种橙色；文字：绿色；背景色：#6a6a6a这种灰色*/{ border:3px solid #FF6F3D; color:white; background-color:#6a6a6a; } label:hover/*鼠标放在label标签上时显示蓝色*/{ color:blue; } label:active/*点击label标签鼠标没有松开时显示红色*/{ color:red; }

css大神 利用这个 hover 属性，我们同样对表格做一个样式的设置：

表格举例：

Document /*整个表格的样式*/ table{ width: 300px; height: 200px; border: 1px solid blue; /*border-collapse属性：对表格的线进行折叠*/ border-collapse: collapse; } /*鼠标悬停时，让当前行显示#868686这种灰色*/ table tr:hover{ background: #868686; } /*每个单元格的样式*/ table td{ border:1px solid red; } 效果如下：

另外，介绍一下子代选择器：用符号 > 表示

IE7开始兼容，IE6不兼容:

div>p{ color:red; } p的儿子p。和p的后代p的截然不同。

能够选择：

我是div的儿子

不能选择：

我是div的重孙子

（3）序选择器

IE8开始兼容；IE6、7都不兼容

设置无序列表 中的第一个 为红色：

ul li:first-child{ color:red; } 设置无序列表 中的最后一个 为红色：

ul li:last-child{ color:blue; } 序选择器还有更复杂的用法。

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

项目 项目 项目 项目 项目 项目 项目 项目 项目 项目 用类选择器来选择第一个或者最后一个：

ul li.first{ color:red; } ul li.last{ color:blue; } 5、下一个兄弟选择器 IE7开始兼容，IE6不兼容。

+ 表示选择下一个兄弟

h3+p{ color:red; } 上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 效果如下：

这种选择器作用不大。

6、属性选择器 好处：将id属性和class属性选择器结合

格式有两种分别是：

标签元素名[属性名]{}

标签元素名[属性名=属性值] 注意：class*=""为*=并且带引号 属性选择器中常用的几个 正则表达式 通配符：

=绝对等于唯一（适合id）

*=包含（适合class）

^=以这个元素开头

$=以这个元素结尾 举例图：

学习视频分享： css视频教程

CSS の高度なセレクターとは何ですか?

関連記事