Dreamweaver CC教程：了解选择器

Dreamweaver CC教程：了解选择器

了解选择器
要更改您的代码元素的颜色，请在 main.less 文件中编辑选择器的属性。
不过，在您开始修改 main.less 文件中的选择器之前，请务必了解不同选择器的含义以及它们会影响到的代码元素。查看下表，了解 HTML、CSS、JavaScript 和 PHP 文件中受这些选择器影响的代码元素。

选择器

HTML

CSS

JavaScript

PHP

.cm-atom 

实体名称，例如  

采用 Hex、rgb 或 HSL 格式的颜色，预定义属性值（例如，strong、none、auto、inherit 等）。

true、false、null、undefined、NaN、Infinity

True、False、Null 和魔术常量，例如 __LINE__、__DIR__ 等。

.cm-attribute 

属性名称

媒体类型，例如全部、盲文、打印、屏幕等

 

 

.cm-bracket

标签括号，例如 <、>、/> 和 </

 

 

 

.cm-builtin 

 

ID 选择器

 

内置函数，例如 htmlspecialchars、trim、substr 等

.cm-comment 

注释

注释

注释

注释

.cm-def 

 

“@ rule”

变量、函数定义和函数参数

函数定义中的函数名称

.cm-error 

没有开始标签的结束标签
属性值缺少引号

由于缺少 { 或 } 括号、属性值缺少引号或属性名称无法识别导致的错误

 

 

.cm-keyword 

 

颜色名称、!important、@media 中的关键字（如 and、only 等）

控制结构关键字（if、else、…），in、of、from、default、public、private 等

类似于函数的关键字，if、else、new、echo、isset 等

.cm-meta 

<!DOCTYPE> 声明

特定于浏览器的前缀，例如 -webkit-、-o- 等

spread 语法中的省略号。示例：myFunction(...iterableObj);

<!DOCTYPE> 声明和 PHP 开始标签和结束标签：<?php, ?>

.cm-number 

 

任何带单位或不带单位的数字

任何数字，如 12、2.1、123e-5、0x11、0b11、0o11 等

任何数字，例如 12、2.1、0x11、0b11、0123、5.0E+19 等

.cm-operator 

 

 

运算符：+、-、*、+=、!==、&&、>>> 等

===、&&、!、=>、+、- 等运算符

.cm-property 

 

属性名称

对象属性或方法

 

.cm-qualifier 

 

类选择器

 

 

.cm-string 

属性值

常规字符串（例如，传递给 url() 调用的字符串）、引号中的字体名称等。

文本字符串

文本字符串

.cm-string-2 

 

scrollbar-arrow-color、scrollbar-base-color 等非标准属性。

正则表达式

 

.cm-tag 

标签名称

标签选择器

 

 

.cm-variable 

 

不带引号的字体名称

全局变量/函数、类引用

用户定义的函数名称、接口/类引用、类属性、转换、

.cm-variable-2 

 

自定义属性，例如 main-bg-color

范围变量/函数引用

用户定义的和预定义的变量、参数或属性

.cm-variable-3

 

伪类（例如 :hover、:focus 等）和伪元素（例如 ::first-letter、::selection 等）

 

 

下表显示受 main.less 文件中的选择器影响的 Dreamweaver 模板和库。

类

模板 (DWT)

库 (LBI)

.cm-templateComment

模板注释

 

.cm-templateAttrVal

模板注释中的属性值

 

.cm-instanceParam

InstanceParam 注释和属性

 

.cm-instanceParamAttrVal

InstanceParam 属性值

 

.cm-libraryItem

 

文档中插入的库。示例：.cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

了解选择器如何影响其他代码文件

要了解 main.less 主题文件中的选择器如何影响代码文件中的代码元素（而不是 HTML、CSS、JavaScript 和 PHP），请下载并使用标记检查器。

 
Token Inspector
1、下载并解压缩 Token Inspector。
2、使用 Google Chrome 导航到并打开 TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html 文件。
Token Inspector实用程序包含以下部分：

代码编辑器、 一个用于更改模式的选项以及 右侧的选择器列表。

使用 Token Inspector 了解选择器

A. 代码编辑器 B. “更改模式”选项 C. 选择器列表 
3、复制文件的内容并将其粘贴到代码编辑器中。
4、键入文件扩展名并单击“更改模式”即可更改文件的模式。
例如，如果文件是 HTML 文件，则应将文件扩展名更改为 html。页面将会更新以反映模式更改，并会在页面顶部指明当前模式。

Token Inspector 中的模式指示

5、选择需要修改外观的代码元素。
然后，Token Inspector会突出显示对应的选择器。
6、（可选）您也可以选择单个选择器来查看代码文件中哪些代码元素会受到该选择器的影响。
7、记下要编辑和更新的选择器，然后关闭Token Inspector。