CSS选择器的阅读方式

墨蓝 2022-08-09 02:18 156阅读 0赞

最近在学CSS选择器的部分：

元素选择器器

类选择器

Id选择器

属性选择器

后代选择器

子元素选择器

相邻兄弟选择器

真的是蛮多的了，记录下点自己觉得重要的东西。

选择器的阅读方式应该是从右向左的：

eg1.

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。  
因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

eg2.

h1 + p \{margin-top:50px;\}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。所以这个选择器的作用对象也就是最右边开始的p。

这种从右向左的阅读方式，在几个选择器结合起来使用的时候尤其有效：

eg1.

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

eg2.

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性

eg3

同样伪类中也应该从右向左读：

p:first-child \{font-weight: bold;\}  
li:first-child \{text-transform:uppercase;\}  
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。  
请访问该链接，来查看这个 :first-child 实例的效果。  
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。  
个人感觉这边有点像C\#中依赖属性的意思。

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关前端css引入方式与选择器

CSS介绍　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。　　当浏览器读到一个样式表

╰+哭是因爲堅強的太久メ/ 2023年08月17日 17:18/ 0 赞/ 131 阅读

相关 css 引入方式以及css的选择器

一、css的引入方式: 1.行内样式 <div> <p style="color: red">我是一个段落</p> </div> 2.内接样式

r囧r小猫/ 2023年06月03日 14:57/ 0 赞/ 17 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 354 阅读

相关 css通用选择器用_通用选择器（CSS选择器）

css通用选择器用描述 (Description) The universal selector matches any element type. It can b

朱雀/ 2022年12月03日 11:26/ 0 赞/ 325 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 356 阅读

相关 CSS选择器相关以及CSS选择器的优先级

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？在CSS中，基本选择器诸如 id

偏执的太偏执、/ 2022年08月19日 02:18/ 0 赞/ 274 阅读

相关 CSS实战手册_阅读笔记03_选择器

![Center][] [Center]: /images/20220810/b7730719d2054f6e94131ea2fa1ea800.png

朱雀/ 2022年08月13日 17:52/ 0 赞/ 196 阅读

相关 CSS选择器的阅读方式

最近在学CSS选择器的部分：元素选择器器类选择器 Id选择器属性选择器后代选择器子元素选择器相邻兄弟选择器真的是蛮多的了，记录下点自己觉得重要的东

墨蓝/ 2022年08月09日 02:18/ 0 赞/ 157 阅读

相关 css的选择器

/class选择器/ .s1 { width:100; a:link img{ filter:gray;

逃离我推掉我的手/ 2022年08月03日 12:38/ 0 赞/ 161 阅读

相关 CSS基础知识一（CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、）

一、CSS在网页中的应用方式： 1、行业样式：（把css样式写入html中----不推荐使用）例如：<p style=”font-size:12px;” >网页</p

傷城~/ 2022年07月24日 03:18/ 0 赞/ 220 阅读