CSS选择器详解

梦里梦外; 2022-02-04 04:59 205阅读 0赞

(1)\#\#\#\# (1)结构伪类选择器

##### 1):first-child、:last-child、:nth-child(index)、:nth-last-child(index) #####

先创建一个列表：

接下来选中元素添加背景色：

ul li{ 
    			margin-bottom: 10px;
    		}
    		ul li:first-child{ 
    			background-color: #ccc;
    		}
    		ul li:last-child{ 
    			background-color: lightpink;
    		}
    
    		ul li:nth-child(2){ 	/*从1开始计数*/
    			background-color: lightgreen;
    		}
    
    		ul li:nth-last-child(2){ 
    			background-color: lightblue;
    		}

此时在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]

##### 2):nth-child(odd|even) #####

ul li:nth-child(even){ 
    			background-color: yellow;
    		}
    
    		ul li:nth-child(odd){ 
    			background-color: purple;
    		}

此时在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]

配合:hover()可实现各行换色的效果：

/*隔行换色*/
    		ul li:nth-child(even):hover{ 
    			background-color: yellow;
    		}
    
    		ul li:nth-child(odd):hover{ 
    			background-color: green;
    		}

此时在浏览器中的显示效果为：

![05][]

##### 3):nth-child(2n)、:nth-child(2n+1) #####

可实现与:nth-child(odd|even)同样的效果

/*选中奇偶行*/
    		ul li:nth-child(2n){ 
    			background-color: yellowgreen;
    		}
    		ul li:nth-child(2n+1){ 
    			background-color: red;
    		}

此时在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]  
配合:hover()同样可以实现各行换色的效果：

ul li:nth-child(2n):hover{ 
    			background-color: lightpink;
    		}
    
    		ul li:nth-child(2n+1):hover{ 
    			background-color: lightgreen;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231517617.gif]

##### 4):nth-last-child(-n+index) #####

这里n是从1开始的，取n的相反数，index为多少，整体即为从最后一个算起往上取几个数。如想要选取最后一个和倒数第二个元素，则选择器应为:nth-last-child(-n+2)

/*选中最后两个元素*/
    		ul li:nth-last-child(-n+2){ 
    			background-color: orange;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]

### (2)链接伪类 ###

针对的不同状态进行取值，实现效果

a:link|visited|hover|active 依次分布表示链接未访问、已访问、鼠标悬停、鼠标按下时的状态

### (3)交集、并集选择器 ###

先添加html标签

使用交集、并集选择器选中元素，然后添加样式：

div{ 
    			height:20px;
    			background-color: #ccc;
    			margin-bottom: 10px;
    		}
    		/*交集选择器*/
    		div.first{ 
    			color:red;
    		}
    		/*并集选择器*/
    		span,h1,h2{ 
    			color: green;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]

### (4)后代、直接后代选择器 ###

区别在于：后代选择器包括其子选择器中嵌套的元素，而直接后代选择器则不包含子选择器中嵌套的元素

选中’class=frist’的div的后代为其添加背景色，选中其直接后代为字体添加颜色：

/*后代选择器*/
    		.frist h1{ 
    			background: lightblue;
    		}
    		/*直接后代选择器*/
    		.frist > h1{ 
    			color:red;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231556125.jpg]

### (5)属性选择器 ###

\[attr\]包含某属性

\[type=attr\]包含某属性，且值等于指定值

添加CSS样式：

input[checked]{ 
    			background-color: red;
    		}
    		input[type=submit]{ 
    			background-color: lightgreen;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231608196.jpg]

\[type^=attr\]属性以给定值开头

\[type$=attr\]属性以给定值结尾

\[type\*=attr\]属性包含给定字段

选中class以"flten"开头的元素，并设置背景色：

div[class^=flten]{ 
    			background-color:#ccc;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]

再上面的基础上再选中class以"flten“结尾的元素，并设置字体颜色：

div[class$=wall]{ 
    			color:blue;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]  
再上面的基础上再选中class包含"flten“字段的元素，并设置字体大小：

div[class*=ten]{ 
    			font-size:24px;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]

### (6)伪元素选择器 ###

从形式上区别伪元素选择器与伪类选择器，一个是":"，一个是"::"

#### 1)::first-letter ####

选中文本第一个字符，常用于设置首字母下沉

给上面

的文本设置首字母下沉：

p::first-letter{ 
    			font-size:50px;
    			color:blue;
    			float: left;
    			line-height: 50px;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231656542.jpg]

#### 2)::first-line ####

选中文本首行

<p>JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。</p>

给上面

的文本首行设置样式：

p::first-line{ 
    			font-size:18px;
    			color:lightgreen;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231708668.jpg]

#### 3)::before和::after ####

分布表示在给定元素前后添加内容：

给上面

标签前后都添加文本：

p::before{ 
    			content:'这是添加在前面的内容';
    			color:blue;
    		}
    		p::after{ 
    			content:'这是添加在后面的内容';
    			color:red;
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190506231718349.jpg]

::after和也常用于解决float引起的问题，用于清除浮动带来的影响

4)::selection

用于将选中的文本突出显示，仅有两个属性值:color和background

为这段文本添加::selection伪元素：

::selection{ 
    			color:red;
    		}

在浏览器中显示效果为：

![在这里插入图片描述][20190506231732722.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220204/27df01d997e44820bc59610b720129c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220204/fa5d177ebc4b43fb9d4df5fc48bd2b5b.png
[05]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220204/6051cc85b58c42e7a0123dd09b4123a6.png
[20190506231517617.gif]: /images/20220204/c7f931bfad36439391b82ef68a9b1410.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220204/dffb777f357547ca919fb9907fbf4c03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]: /images/20220204/4ce3dac6fa9c430a95de207c3c2b0f96.png
[20190506231556125.jpg]: /images/20220204/8b5ac0d69ad14e5ea72972e63a7fdc98.png
[20190506231608196.jpg]: /images/20220204/239a243327c44bf6abd9f1784deb2378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]: /images/20220204/7cef50bda937477f8d4c6ba3c349ed1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]: /images/20220204/5e1007d5f2d04ef6abf36331bea379a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]: /images/20220204/e3a9fa54812b40c89244d4d35e142417.png
[20190506231656542.jpg]: /images/20220204/3b18910c2a56493eb37f703993302f68.png
[20190506231708668.jpg]: /images/20220204/74dad53a24a44c20b217121a92eeaeb8.png
[20190506231718349.jpg]: /images/20220204/6023e3b8943d47609b3b8459f434b911.png
[20190506231732722.gif]: /images/20220204/854d83fd00b94c42b8fda2ac8e454d38.png