您的位置:时时app平台注册网站 > web前端 > CSS之旅(3):庞大的伪采取器彩世界网址

CSS之旅(3):庞大的伪采取器彩世界网址

2019-09-19 06:54

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>作者是第二个段落</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>笔者是第1个段落</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>作者是第1个段落</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的Infiniti强大,强大到协和一般都不认得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

您可能感兴趣的稿子:

  • 效仿SQLSE陆风X8VELX570的四个函数:dateadd(),datediff()
  • JavaScript 模仿vbs中的 DateAdd() 函数的代码
  • jquery中.add()的接纳分析
  • js达成类似于add(1)(2)(3)调用形式的章程
参数 描述
expr 可选。用于匹配元素的选择器字符串。
context 可选。作为待查找的 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("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($("#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>

复制代码 代码如下:

语法一:

参数列表:

复制代码 代码如下:

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

语法二:

复制代码 代码如下:

此函数在相称成分中丰富与表明式相称的成分。
add()函数重回的结果将始终以成分在HTML文书档案中冒出的顺序来排序,而不再是差没多少的增加。

参数列表:

将span成分增加的相称成分中去,并将它们的书体颜色设置为鼠灰。

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

语法:

实例:

复制代码 代码如下:

仰望本文所述对我们的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("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>

实例二:

语法三:

复制代码 代码如下:

复制代码 代码如下:

实例:

复制代码 代码如下:

本文实例呈报了jQuery中add()方法用法。分享给大家供大家参照他事他说加以考察。具体深入分析如下:

<!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>

$(selector).add(element)

实例一:

实例一:

实例:

$(selector).add(html)

$(selector).add(expr,context)

本文由时时app平台注册网站发布于web前端,转载请注明出处:CSS之旅(3):庞大的伪采取器彩世界网址

关键词: