前端攻城狮---css3之选择器

最新推荐文章于 2019-06-19 19:12:51 发布

csdn_gyh

最新推荐文章于 2019-06-19 19:12:51 发布

阅读量183

点赞数

分类专栏：前端攻城狮文章标签： html css3 选择器前段

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80651643

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

css3就是层叠样式表的目前的最高版本，带来了许多的新特性，比如圆角、渐变、过渡、动画、新的布局（多列布局伸缩盒子等），那么我们先来学习选择器相关的新增内容把。

我们主要从一下5个方面去讲解，关系选择器，属性选择器，儿子选择器，伪类，伪元素。

关系选择器

关系选择器一共有三种表达方式。下面的aa bb可以表示标签,类,id

aa > bb{ }　　(ie7开始兼容)

表示给aa下所有的亲儿子设置样式，也就是说如果是儿子的儿子则不设置。

aa ~ bb{ }

表示与aa同级别的后面全部bb设置标签，注意是同aa是兄弟关系，同级别的。

aa + bb{ }　　 (ie7开始兼容)

表示aa下一个兄弟，且是bb的标签设置样式。

如上代码把

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* > 亲儿子 不是后代 IE7开始兼容*/
        .wrap > p {
            color: red;
        }
        /* + 下一个兄弟 IE7开始兼容*/
        h2+p {
            background-color: green;
        }
 
        h4~p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <p>△</p>
            <p>△</p>
            <p>△</p>
        </div>
        <p>△</p>
        <p>△</p>
    </div>
    <p>△</p>
    <h2></h2>
    <p>△</p>
    <h2></h2>
    <h4></h4>
    <p>△</p>
    <div>
        <p>△</p>
    </div>
    <p>△</p>
</body>

　　　　　　　<-------------------此图为效果图

属性选择器

属性选择器对应的属性，指的是标签上的属性，比如class src id alt 等，需要用[]来将属性包裹起来。

基本使用：

img[src="img/3.png"] { border: 6px solid red;　}　对img标签且属性src引用了img/3.png的标签这是样式。

当然属性标签还能想交集选择器哪样的写法img[src="img/3.png"] [alt="aa"]{ border: 6px solid red;　}。

还能不指定标签名[src="img/3.png"] [alt="aa"]{ border: 6px solid red;　}这么写也行的。

高级写法：

^=xx　　以xx开头

p[class^="para"] { font-size: 30px; }　就表示p标签，且类选择器的名字是以para开头的

$=xx　　以xx结尾

p[class$="3"] { background-color: blue; }　就表示p标签，且类选择器的名字是以3结尾的

*=xx　　含有xx

p[class*="a"] { color: yellow; }　就表示p标签，且类选择器含有a的

|=xx ie7兼容等价与^=xx-的写法

p[class|="para"] { text-decoration: underline; }可以理解为p[class^="para-"]，就表示p标签，且以para-开头的

~=xx ie7兼容表示用空格隔开的一个独立的个体中，含有xx

div[class~="haha"] { background-color: #f40; }

这里可以理解为标签div的类选择器有一个类名是haha即可，这类名不也就是用空格隔开的一个独立的个体吗？

下面附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
          width: 300px;
          height: 280px;
          background-color: #ccc;
          margin: 18px;
       }
       img[src="img/3.png"] {
           border: 6px solid red;
       }
 
       img[alt="aa"] {
          width: 100px;
       }
 
       [alt="cc"][src="img/2.png"] {
           transform: rotate(45deg);
       }
 
       p[class^="para"] {
           font-size: 30px;
       }
 
        p[class$="3"] {
           background-color: blue;
       }
 
       p[class*="a"] {
           color: yellow;
       }
        
       /*p[class^="para-"]  下面IE7兼容*/
       p[class|="para"] {
           text-decoration: underline;
       }
         
       /*val是一个独立的用空格隔开的个体 IE7兼容*/ 
       div[class~="haha"] {
           background-color: skyblue;
       } 
 
 
 
    </style>
</head>
<body>
    <input type="text" />
    <input type="button" value="点我" />
 
    <div class="haha box"></div>
    <div class="hahahei"></div>
    <div class="haha"></div>
    <div class="haha-xixi"></div>
    <div class="haha"></div>
 
    <img src="img/0.png" alt="aa">
    <img src="img/1.png" alt="aa">
    <img src="img/2.png" alt="cc">
    <img src="img/3.png" alt="aa">
 
    <p class="para1">△</p>
    <p class="para2">△</p>
    <p class="para_3">△</p>
    <p class="para-1">△</p>
    <p class="para-2">△</p>
    <p class="para-3">△</p>
    <p class="haha">△</p>
    <p class="xixi">△</p>
    <p class="ppp">△</p>
</body>
</html>

儿子序号选择器

:first-child IE7兼容
:last-child IE9兼容
:nth-child() ..
:nth-of-type() ..
:nth-last-type()
:first-of-type
:last-of-type

咱们来看看什么是儿子序号选择器，光从面子上看对象一定就是儿子，然后么就是通过序号来定位需要被设置样式的视图。接下来我们一一讲解如何去使用。

:first-child/:last-child

用法: p:first-child{ } p:last-child{ }分别表示给第一个孩子且标签是p和最后一个孩子设置样式且标签是p。

:nth-child()

用法:ｐ:nth-child(1) 表示先找出父亲下所有的孩子，再找出下标是1的孩子，若该孩子的标签是p则显示对应的样式

:nth-of-type()/:nth-last-type()

用法: p:nth-of -type(1)/p:nth-last-type(2) 表示找出所有标签是p的孩子，再找出p标签且下标是1的孩子，去显示对应的样式。后者表示倒数第2，从后往前。

注：有些人可能会有点不理解，:nth-child()和:nth-of-type()的区别，区别就是前者是找出所有的孩子，再找下标。后者是找到同一标签类型的孩子，再从其中找出对应下标的孩子。

下面上代码，方便大家理解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		p , h3,h2{
			width: 40px;
			height: 40px;
			margin: 4px;
			background-color: #ccc;
		}
		/* 1 该元素class必须是haha 2 是某一个元素的class为.haha儿子中第2个 IE9选择*/
		 .haha:nth-of-type(2){
			background-color: red;
		} 
		 .haha:nth-child(1) {
			background-color: green;
		} 
	</style>
</head>
<body>
	<div></div>(1)
	<p class="haha"></p>
	<p class="haha"></p>(2)
	<p class="haha"></p>
	<div>
		<h2 class="haha"></h2>(3)
		<p></p>
		<h2 class="haha"></h2>(4)
		<h3 class="haha">h3</h3>
		<h3 class="haha">h3</h3>(5)
		<h3 class="haha">h3</h3>
		<h3 class="haha">h3</h3>
	</div>
</body>
</html>

我们可以看到有三个红色的字和一个绿色的字。上面(1)---(5)分别是符合样式的标签，但是为什么只有显示４个呢？别急听我慢慢道来。

(1)<-----此处符合.haha:nth-child(1)；因为该标签是父亲body的所有孩子中的第一个标签，但是类选择器不是haha，不符合故不显示。

(2)<----此处符合.haha:nth-of-type(2);故意在父亲body中，类选择器是haha的只有p标签，故选择p标签中类选择器是haha的第二个孩子就是此处，所以显示红色。

(3)<----此处符合.haha:nth-child(1)；因为该标签父亲div中的所有孩子中第一个标签且类选择器是haha的标签。故显示绿色。

(4)<----此处符合.haha:nth-of-type(1);因为在父亲div中，类悬着器是haha的标签一共有两个h2 h3，所以在h2 h3中分别找出类标签是haha，就是在此处，此处是h2中的第二个孩子且类标签是haha的，故显示红色。

(5)<----此处符合.haha:nth-of-type(1);理由同(4)，此处是h3中第二个孩子且类选择器是haha的，故显示红色。

:first-of-type/:last-of-type

其实:first-of-type=:nth-of-type(1), :last-of-type=:nth-of-type(lastnum);

不过需要注意的是:first-of-type后面是不需要加().