返回
前端
分类

2、属性、样式是什么,可以用于任意元素

日期: 2020-02-08 19:20 浏览次数 : 89

  • CSS 几个伪类伪对象-伪类
  • 必赢备用网址 ,CSS 几个伪类伪对象-伪对象

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

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

原文出处: 一线码农   

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

必赢备用网址 1

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

一  :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>

必赢备用网址 2

可以看到,当我灌的是: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>

必赢备用网址 3

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

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

必赢备用网址 4

同样我们很开心的发现,在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>

必赢备用网址 5

  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>

必赢备用网址 6

  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>

必赢备用网址 7

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

必赢备用网址 8

四:not(xxx) 伪选择器

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

必赢备用网址 9

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

赞 1 收藏 评论

必赢备用网址 10

css学习要点:


1、选择器怎么选;

:first-child 伪类

2、属性、样式是什么。

<style type="text/css">
li:first-child{color:red;}
</style>
<ul>
  <li>red</li>
  <li>222</li>
</ul>

1、css基础选择器

第一个 li 中的内容为红色。这个名称很怪,看上面的 CSS,给人感觉是 li 的第一个子无素,实际上不是,实际上表示第一个 li。IE 6 不支持。

1.1 标签选择器

就是标签的名字。

<h1>前端与移动开发班<span>1期班</span>基础班</h1>

css:

<style>

span{

color:red;

}

</style>

注意:所有的标签都可以是选择器;无论这个标签藏得多深,都一定能被选上。写了某个标签的css,就是写了整个HTML文档中所有该标签的css。

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。

:link、:visited 伪类

1.2 id选择器

<p>我是段落1</p>

<p id="para2">我是段落2</p>

<p>我是段落3</p>

css:

<style type="text/css">

#para2{

color:red;

}

</style>

id选择符是#。

任何的HTML标签都可以有id属性,表示这个标签的名字。

id属性(这个标签的名字)可以随便命名,但是:

1、只能有字母、数字、下划线;

2、必须以字母开头;

3、不能和标签同名。比如id不能叫body、img等。

4、一个HTML页面不能出现相同的id,即使他们不是一个类型。

一个标签可以被多个css选择器选择,共同作用。

这个很常见,就是链接、已经访问过的链接的样式。

1.3 类选择器

.就是类的符号。类的英语是class。

所谓类,就是class的属性,class属性和id属性相似,任何的标签都可以携带class属性。

class标签可以重复,比如,页面上可能有很多标签都有teshu这个类:

<h3>我是一个三号标题</h3>

<h3 class="teshu">我是一个三号标题</h3>

<h3>我是一个三号标题</h3>

<p>我是一个段落</p>

<p class="teshu">我是一个段落</p>

<p class="teshu">我是一个段落</p>

css:

<style type="text/css">

.teshu{

color:red

}

</style>

同一个标签可能同时属于多个类,用空格隔开:

<h3 class="teshu  zhongyao">我是一个三号标题</h3>

该h3同时属于teshu类和zhongyao类。

注意:

1、class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;

2、同一个标签可以同时携带多个类。

复习:html负责结构,css负责样式,js负责行为。

css写在head标签里面;css的容器:style标签。

正确的思路:就是用所谓“公共类”的思路,类就是提供公共服务,比如上述的teshu,一旦携带这个类名,就有相应的样式变化。每个标签就只需取自己想要的类。

也就是说:

1、不要去试图用一个类名,把某个标签的所有样式都写完。这个标签要多携带几个类,共同造成这个标签的样式。

2、每一个类要尽可能小,有公共的概念,能够让更多的标签使用。

·到底用id还是class?

答案:尽可能地用class,除非极特殊的情况可以用id。

原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一方面,我们会认为一个有id的元素有动态效果。

“类”上样式,“id”上行为

css“层叠式”的第一层含义:就是一个标签,可以同时被多个选择器(即标签选择器,id选择器和类选择器选择)从而影响样式。

:hover、:active、:focus 伪类

2、css高级选择器

IE 6 中,只能用于超链接;其他浏览器中,可以用于任意元素,所以可以构造全 CSS 的菜单。

2.1 后代选择器

<style type="text/css">

.div1 p{

color:red;

}

</style>

空格就代表后代,.div1 pp就是div1的后代(不管这里的p有多深,.div1 p都能影响到)。

空格可以多次出现。

.div2  .li2 p{

color:green

}

就是.div2里面的后代.li2里面的p。

后代选择器就是一种平衡,是共性、特性的平衡。当要把某一个部分的所有的东西进行样式改变,就要想到后代选择器。

后代选择器,描述的是祖先结构。

:lang 伪类

2.2 交集选择器

必赢备用网址 11

图1

h3.special{

color:red;

}

选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。

交集选择器没有空格。

所以:h3.special(中间没有空格)h3  .special(中间有空格)不是一回事,前者是没有后代关系的交集选择器,后者是有后代关系的。

交集选择器可以连续交(一般不这么写)

h3.special.important{

color:red;

}

交集选择器,一般是以标签名开头,比如h3.special。

<style type="text/css">
p:lang(en){color:red;}
</style>
<p>中国</p>
<p lang="en">english</p>

2.3 并集选择器(分组选择器)

h3,li{   color:red   }

逗号,表示并集。

english 为红色。用以选择指定语言的文字的样式。IE 6 不支持。

2.4 通配符*

通配符*表示所有元素

效率不高,页面上的标签越多,效率越低,所以页面上不能出现这种选择器。

  • CSS 几个伪类伪对象-伪类
  • CSS 几个伪类伪对象-伪对象

3、一些CSS3选择器


3.1 儿子选择器>

IE7开始兼容,IE6不兼容。

<div>

<p>我是div的儿子,我的颜色是红色</p>

</div>

css:

div>p{

color::red;

}

div的儿子p和div的后代截然不同,不要混淆。

如果这里的p是:

<div>

<ul>

<p>我不是div的儿子,上述css不能让我变成红色</p>

<li>

<li>

</ul>

</div>

那么上述CSS则不能用来控制这里的p。

3.2 序选择器

IE8开始兼容,IE6、IE7都不兼容。

<div>

<ul>

<p>我的爱好</p>

<li>听歌</li>

<li>弹吉他</li>

<li>看书</li>

<li>旅行</li>

<li>学习</li>

<li>水果</li>

</ul>

</div>

选择第一项爱好改变样式CSS:

ul li:first-child{

color:red;

}

选择第二项爱好改变样式CSS:

ul li:last-child{

color:red;

}

选择任意项爱好改变样式CSS:

ul li:nth-child(n){

color:red;

}

比如,选择第四个:

ul li:nth-child(4){

color:red;

}

比如,选择偶数项:

ul li:nth-child(2n+2){

color:red;

}

由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名,用类选择器来选择第一个或者最后一个。

3.3 下一个兄弟选择器

IE7开始兼容,IE6不兼容。

<h3>我是一个标题</h3>

<p>我是一个段落</p>

<p>我是一个段落</p>

<p>我是一个段落</p>

<h3>我是一个标题</h3>

<p>我是一个段落</p>

<p>我是一个段落</p>

<p>我是一个段落</p>

<h3>我是一个标题</h3>

<p>我是一个段落</p>

<p>我是一个段落</p>

<p>我是一个段落</p>

CSS格式选中h3后面的第一个p:

<style type="text/css">

h3+p{

color:red;

}

</style>