What are the css advanced selectors?

css advanced selectors include: 1. Descendant selectors, separated by spaces when defined, syntax "E F{}"; 2. Intersection selectors, separated by ".", syntax "E.F{ }"; 3. Union selector, separated by commas, syntax "E,F{}"; 4. Pseudo-class selector; 5. Next sibling selector; 6. Attribute selector.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

CSS selector: It is to specify the label to be used by CSS, and the name of that label is the selector. Meaning: Which container to choose.

CSS selectors are divided into two categories: basic multiple choice and extended selectors.

Basic selector:

Tag selector: For a type of tags ID selector: Use for a specific tag Class selector: Use Universal selector (wildcard) for all tags you want: Applicable for all tags (not recommended) Advanced selector:

Descendant selectors: separated by spaces

Intersection selectors: separated by .

Union selector (grouped selector): separated by commas Pseudo class selector

Next sibling selector

Attribute selector

1. Descendant selector: Separate with spaces when defining For the format E F , it means that all F elements that are descendants of the E element have this style. A space indicates descendants.

The descendant selector is a kind of balance: a balance of commonalities and characteristics. When you want to change the style of everything in a certain part, you must think of descendant selectors.

Descendant selector describes the ancestor structure.

The definition may be a bit difficult to understand, let’s look at an example.

Example 1:

.div1 p{ color:red; } The spaces represent descendants. .p1 p means all p of the descendants of .p1 .

I would like to emphasize here: these two tags do not have to be consecutively next to each other, as long as they maintain the association of one descendant. In other words, the offspring is chosen, not necessarily the son.

Example:

h3 b i{ color:red ; } The above code means: define the in the tag The style of the label. Similarly: h3, b and i tags do not have to be consecutively adjacent, as long as the association of one descendant is maintained.

Effect:

Or there is the following writing:

In the above way of writing, the tag and the tag are not right next to each other, but they maintain a kind of Descendant relations.

There is also the following writing method: (including class selector and id selector are both acceptable)

We said it at the beginning: The descendant selector describes an ancestor structure . Let’s give an example to illustrate this sentence:

Document div div p{ color: red; } .div2{...} .div3{...} .div4{...} 我是什么颜色？

p p p in the css above can also make the text color turn red. Through the browser's inspection element, we can see the ancestor list of the p element:

Speaking of which, let's mention another sublime shortcut keys.

Enter p#haha in sublime and press the tab key,

will be generated.

Enter p.haha in sublime and press the tab key,

will be generated.

2. Intersection selector You will understand if you look at the picture below:

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视频教程

What are the css advanced selectors?

Related articles