<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>
Document
</
title
>
</
head
>
<
div
id
=
"page"
>
<
div
class
=
"content main"
>
<
div
class
=
"refer"
>
<
li
>
click1
</
li
>
<
li
>
click2
</
li
>
<
li
>
click3
</
li
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
>
var
genCssSelector=
function
()
{
var
ele=
arguments
[
0
];
var
parentEle=ele.parentNode;
var
strGenCssSelector=ele.tagName.toLowerCase();
while
(parentEle.nodeName.toLowerCase()!==
'#document'
){
if
(parentEle.id!==
''
){
strGenCssSelector=
'#'
+parentEle.id+
' '
+strGenCssSelector;
parentEle=parentEle.parentNode;
continue
;
}
else
if
(parentEle.className!=
''
){
strGenCssSelector=
' '
+strGenCssSelector;
var
classList=parentEle.classList||parentEle.className.split(
' '
);
for
(
var
i=
0
;i<classList.length;i++){
strGenCssSelector=
'.'
+classList[i]+strGenCssSelector;
parentEle=parentEle.parentNode;
continue
;
}
else
{
strGenCssSelector=parentEle.nodeName.toLowerCase()+
' '
+strGenCssSelector;
parentEle=parentEle.parentNode;
continue
;
return
strGenCssSelector;
document.addEventListener(
'click'
,
function
(e)
{
alert(genCssSelector(e.target));
</
script
>
</
html
>
题目： 我的解法：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
那么从现在开始我们先丢开他们版本的区别，从头一起来看看
CSS
选择器
的运用。
CSS
是一种用于屏幕上渲染html，xml等一种语言，
CSS
主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的
选择器
。
选择器
主要是用来确定html的树形结构中的
DOM
元素节点。我把
CSS
选择器
分开成三部分，第一部分是我们常用的部分，我把他叫做基本
选择器
；第二部分我把他称作是属性
选择器
，第三部分我把他称作伪类
选择器
，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本
选择器
。我们先来看
一个
常用的
选择器
列表图
下面我们先看看上
目录
测试
准备：子代
选择器
>
测试
代码：指定id的子代
选择器
后代
选择器
(以空格隔开)指定 id 的后代
选择器
指定 class 类 的后代
选择器
多空格后代
选择器
详解 (特别重要)伪类
选择器
:参考链接：
测试
准备：
新建
一个
测试
项目文件夹 test，然后在 test 文件夹内新建
一个
名为
css
的文件夹，创建
一个
名为 style.
css
的文件，最后在test文件夹下新建
一个
test.html 文件。
| —— |
| ——
css
—— style.
css
test.html
子代
选择器
使用这个快速脚本
测试
你的
CSS
选择器
。不支持“HTML”元素或“*”
选择器
。
用
CSS
Selector Tester快速
测试
你的
CSS
选择器
！在
选择器
文本字段中创建或复制
选择器
，匹配的HTML元素将突出显示并计数。确保你的
CSS
选择符与你打算的元素匹配！
1.3.3 - 小错误修复，固定图标。
1.3.2 - 小错误修复。
1.3.1 -
测试
和小错误修复。
1.3.0 - 修复的负载，UI清理。更新jQuery，删除未使用的
CSS
等
1.2.0 - 增加了所有的URL支持。
1.1.9 - 修正了onsubmit / page刷新错误。更新了对XHTML的支持
1.1.7 - 修正了级联错误！感谢您的反馈。
1.1.5 - 更新了UI以包含拖动和调整大小。感谢您的反馈。
支持语言:English
题目：实现
一个
get
Css
Selector方法，可以根据给定的元素
生成
一个
css
选择器
，通过这个
选择器
可以快速定位到这个元素（document.querySelector(A)）。<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
</head>
<div id
题目：实现
一个
get
Css
Selector方法，可以根据给定的元素
生成
一个
css
选择器
，通过这个
选择器
可以快速定位到这个元素（document.querySelector(A)）。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document<..
要选择第
一个
具有类名为 ".cbcitem" 的元素，可以使用伪类
选择器
`:first-child` 或者 `:first-of-type`。以下是两种方法的示例代码：
使用 `:first-child` 伪类
选择器
：
```
css
.cbcitem:first-child {
/* 样式属性 */
使用 `:first-of-type` 伪类
选择器
：
```
css
.cbcitem:first-of-type {
/* 样式属性 */
这两种方法都可以选中第
一个
具有类名为 ".cbcitem" 的元素。需要注意的是，`:first-child`
选择器
选择的是父元素下的第
一个
子元素，而 `:first-of-type`
选择器
选择的是父元素下同类型的元素中的第
一个
。根据具体的 HTML 结构，选择合适的方法来实现你的需求。
