>

强大的伪选择器,如何更深入的理解各种选择器

- 编辑:至尊游戏网站 -

强大的伪选择器,如何更深入的理解各种选择器

CSS之旅(2):如何更深入的理解各种选择器

2015/05/08 · CSS · CSS

原文出处: 一线码农   

上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆“杂乱无章”的string,这样的话没人知道是什么鸟东西,js也无法什么各种getElementById,所以当浏览器解析成dom结构后,浏览器才会很方便的根据css各种规则的选择器在dom结构中找到相应的位置,那下一个问题自然就严重了,那就是必须深入的理解dom模型。

一:理解Dom模型

首先我们看下面的代码。

XHTML

<!DOCTYPE html> <html xmlns="至尊游戏网站,; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <p>有名的公司一栏</p> <hr /> <ul> <li>百度</li> <li>新浪</li> <li>阿里</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <p>有名的公司一栏</p>
    <hr />
    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>阿里</li>
    </ul>
</body>
</html>

用这个代码我们很容易的画出dom树。

 

至尊游戏网站 1

当你看到这个dom树的时候,是不是顿时感到信息量特别大,很简单,因为是树,所以就具有了一些树的特性,比如 “孩子节点”,“父亲节点”,

“兄弟节点”,“第一个左孩子”,“最后一个左孩子”等等,对应着后续我要说的各种情况,一起来看看html被脱了个精光的感觉是不是很爽~~~~

1:孩子节点

找孩子节点,本质上来说分两种,真的只找“孩子节点”,“找到所有孩子(包括子孙)“

<1> 后代选择器

首先看下面的html,我想你可以轻而易举的绘制出dom树了,那下面的问题就是怎么将body中所有的后代span都绘上red。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body span { color: red; } </style> </head> <body> <span>我是span1</span> <ul> <li> <ul><span>我是span2</span></ul> </li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

至尊游戏网站 2

  1. 孩子选择器

<1>  “>”玩法

这个也是我说的第二种情况,真的只找孩子节点,在css中也很简单,用 > 号就可以了,是不是很有意思,跟jquery一样的玩法,对不对。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body > span { color: red; } </style> </head> <body> <span>我是span1</span> <ul> <li> <ul><span>我是span2</span></ul> </li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

至尊游戏网站 3

<2> ”伪选择器”玩法

除了上面这种玩法,在css3中还可以使用”伪选择器”玩法,真tmd的强大,下一篇会专门来讲解,这里只介绍一个:nth-child用法,如果

你玩过jquery,一切都不是问题。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body > span:nth-child(1) { color: red; } </style> </head> <body> <span>我是span1</span> <span>我是span2</span> <ul> <li> <ul><span>我是span3</span></ul> </li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <span>我是span2</span>
    <ul>
        <li>
            <ul><span>我是span3</span></ul>
        </li>
    </ul>
</body>
</html>

至尊游戏网站 4

  1. 兄弟节点

兄弟节点也是很好理解的,在css中用 “+”就可以解决了,可以看到下面我成功将第二个p绘制成了红色。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .test + p { color:red; } </style> </head> <body> <p class="test">我是第一个段落</p> <p>我是第二个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .test + p {
            color:red;
        }
    </style>
</head>
<body>
    <p class="test">我是第一个段落</p>
    <p>我是第二个段落</p>
 
</body>
</html>

至尊游戏网站 5

  1. 属性选择器

如果玩过jquery,这个属性选择器我想非常清楚,首先看个例子,我想找到name=test的p元素,将其标红。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> p[name='test'] { color: red; } </style> <script src="Scripts/jquery-1.10.2.js"></script> </head> <body> <p name="test">我是第一个段落</p> <p>我是第二个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        p[name='test'] {
            color: red;
        }
    </style>
    <script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

至尊游戏网站 6

到现在为止,有没有感觉到和jquery的玩法一模一样,而且感觉越来越强烈,已经到了 ”你懂的“ 的境界。

二:css内部机制的猜测

文章开头也说了,浏览器会根据css中定义的”标签”,然后将这个标签的样式应用到dom中指定的”标签“上,就比如说,我在css中定义了一个

p样式,但浏览器怎么就能找到dom中的所有的p元素呢??? 因为闭源的原因,我们无法得知其内部机制,不过在jquery上面,或者我们可以窥知一

二,因为css能展示的选择器用法,在jquery中都能做得到,然后我就很迫不及待的去看看jquery如何提取我的各种选择器写法,下面我们看看源码。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> p[name='test'] { color: red; } </style> <script src="Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $("p[name='test']").hide(); }); </script> </head> <body> <p name="test">我是第一个段落</p> <p>我是第二个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        p[name='test'] {
            color: red;
        }
    </style>
 
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $("p[name='test']").hide();
        });
    </script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

至尊游戏网站 7

在jquery里面经过一番查找,最后可以看到仅仅是调用了queryselectorAll这个dom的原生方法,你也可以在console中清楚的看到,最后的

results就是找到的p元素,为了验证,我在taobao page下开一个console。至尊游戏网站 8

到现在,我大概粗略的猜测,也许至少在chrome浏览器下,浏览器为了找到dom中指定的元素,或许也是调用了queryselectAll方法。。。

好了,大概也就说这么多了,理解dom模型是关键,这样的话才能理解后续浏览器的渲染行为。

赞 1 收藏 评论

至尊游戏网站 9

CSS之旅(3):强大的伪选择器

2015/05/08 · CSS · CSS, 伪选择器

原文出处: 一线码农   

说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼。。。首先我们可以在VS里面提前预览一下。

至尊游戏网站 10

可以看到,上面的伪类有很多很多,多的让我眼都快瞎了。。。下面就挑一些实用性比较强的说一说。

一  :nth-child 伪选择器

我们知道在jquery中有一种选择器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,这回在CSS中同样

可以办到,可以说一定程度上缓解了jquery的压力,下面简单举个例子。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:nth-child(1) { color: red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

至尊游戏网站 11

可以看到,当我灌的是:nth-child(1)的时候,ul的第一个li的color已经变成red了,如果复杂一点的话,可以将1改成n,浏览器在解析css的伪类

选择器的时候,内部应该会调用相应的方法来解析到对应dom的节点,首先要明白n是从0,步长为1的递增,这个和jquery的nth-child类似,没

什么好说的,然后我们尝试下:first-child 和 last-child。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:first-child { color: red; font-weight:800; } ul li:last-child { color: blue; font-weight: 800; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:first-child {
            color: red;
            font-weight:800;
        }
 
        ul li:last-child {
            color: blue;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

至尊游戏网站 12

二 :checked,:unchecked,:disabled,:enabled

同样在jquery中,有一组选择器叫做“表单对象属性“,我们可以看看jquery的在线文档。

至尊游戏网站 13

同样我们很开心的发现,在css中也存在这些属性。。。是不是开始有点醉了。。。还是先睹为快。

  1. disabled,enabled

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> input[type='text']:enabled { border: 1px solid red; } input[type='text']:disabled { border: 1px solid blue; } </style> </head> <body> <form> <input type="text" disabled="disabled" /> <input type="text"/> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        input[type='text']:enabled {
            border: 1px solid red;
        }
 
            input[type='text']:disabled {
                border: 1px solid blue;
            }
    </style>
 
</head>
<body>
    <form>
        <input type="text" disabled="disabled" />
        <input type="text"/>
    </form>
</body>
</html>

至尊游戏网站 14

  1.  checked,unchecked

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> form input[type="radio"]:first-child:checked { margin-left: 205px; } </style> </head> <body> <form> <input class="test" type="radio" value="女" /><span>女</span><br/> <input class="test" type="radio" value="男" /><span>男</span> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        form input[type="radio"]:first-child:checked {
            margin-left: 205px;
        }
    </style>
 
</head>
<body>
    <form>
        <input class="test" type="radio" value="女" /><span>女</span><br/>
        <input class="test" type="radio" value="男" /><span>男</span>
 
    </form>
</body>
</html>

至尊游戏网站 15

  1. selected

这个在css中虽然没有原装的,但是可以用option:checked来替代,比如下面这样。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> option:checked { color: red; } </style> </head> <body> <form> <select> <option>1</option> <option>2</option> <option>3</option> </select> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        option:checked {
            color: red;
        }
    </style>
 
</head>
<body>
    <form>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </form>
</body>
</html>

至尊游戏网站 16

三  empty伪选择器

这个选择器有点意思,在jquery中叫做”内容选择器“,就是用来寻找空元素的,如果玩转jquery的empty,这个也没有什么问题,

下面举个例子,让第一个空p的背景变色。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> p:first-child{ width:500px; height:20px; } p:empty { background:red; } </style> </head> <body> <p></p> <p>他好</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
 
        p:first-child{
            width:500px;
            height:20px;
        }
 
        p:empty {
            background:red;
        }
    </style>
 
</head>
<body>
    <p></p>
    <p>他好</p>
</body>
</html>

至尊游戏网站 17

四:not(xxx) 伪选择器

同样这个也是非常经典的not选择器,在jquery中叫做”基本选择器“,想起来了没有???

至尊游戏网站 18

总的来说,当你看完上面这些,是不是觉得css3中已经融入了一些”脚本处理行为”,这种感觉就是那个css再也不是你曾今认识的那个css了。

赞 1 收藏 评论

至尊游戏网站 19

本文由技术教程发布,转载请注明来源:强大的伪选择器,如何更深入的理解各种选择器