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

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>Ali</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>作者是第3个段落</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

本文实例陈诉了jQuery中add()方法用法。分享给我们供我们参谋。具体剖析如下:

此函数在相配成分中增添与表达式相配的要素。
add()函数再次回到的结果将从来以元素在HTML文书档案中现身的次第来排序,而不再是总结的充足。

语法:

语法一:

复制代码 代码如下:

$(selector).add(expr,context)

参数 描述
expr 可选。用于匹配元素的选择器字符串。
context 可选。作为待查找的 DOM 元素集、文档或 jQuery 对象。

实例:

实例一:

将span成分加多的相配成分中去,并将它们的字体颜色设置为冰雪蓝。

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
   ul
   {
          width:200px;
          height:200px;
          border:1px solid blue;
   }
   div
   {
          height:300px;
   }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add("span").css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
    ul
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    div
    {
        height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add("span","ul").css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法二:

复制代码 代码如下:

$(selector).add(element)

参数列表:

参数 描述
element 可选。被添加的DOM元素或者jQuery元素。

实例:

实例一:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add(document.getElementById("myspan")).css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id="myspan">我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

实例二:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("p").add($("#myspan")).css("color","green")
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id="myspan">我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

语法三:

复制代码 代码如下:

$(selector).add(html)

参数列表:

参数 描述
html 可选。被添加的html代码片段。

实例:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        alert($("p").add("<span>新加上的</span>").length);
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
  </ul>
</body>
</html>

指望本文所述对我们的jQuery程序设计有所帮助。

您恐怕感兴趣的篇章:

  • 模仿SQLSERubiconVE揽胜极光的七个函数:dateadd(),datediff()
  • JavaScript 模仿vbs中的 DateAdd() 函数的代码
  • jquery中.add()的使用分析
  • js完结相像于add(1)(2)(3)调用情势的不二等秘书诀

本文由星彩网app下载发布于前端技术,转载请注明出处:强大的伪选择器,如何更深入的理解各种选择器

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。