Web全栈~06.CSS选择器

忘是亡心i 2023-01-03 01:25 140阅读 0赞

# Web基本笔记~06.CSS选择器 #

## [上一期][Link 1] ##

## 关系选择器 ##

### 后代选择器 ###

##### 定义 #####

选择所有被 E 元素包含的 F 元素，中间用空格隔开

##### 语法 #####

E F\{ \}

##### 例子 #####

<html>
    　　<head>
    　　　　 <title></title>
    　　　　 <meta charset="utf-8" />
    		<style> ul li{ color:green;} </style>
    　	</head>
    　　<body>
    		<ul>
    			<li>蛋糕</li> 
    			<li>面包</li> 
    		</ul> 
    		<ol>
    			<li>西瓜</li> 
    		</ol>
    　　</body>
    </html>

### 子代选择器 ###

##### 定义 #####

选择所有作为 E 元素的直接子元素 F，对更深一层的元素不起作用，用 > 表示

##### 语法 #####

E>F\{\}

##### 例子 #####

<html>
    　　<head>
    　　　　 <title></title>
    　　　　 <meta charset="utf-8" />
    		<style> div>a{ color:red} </style>
    　	</head>
    　　<body>
    		<div>
    			<a href="https://www.baidu.com/">子元素 1</a> 
    			<p> <a href="https://www.baidu.com/">孙元素</a> </p> 
    			<a href="https://www.baidu.com/">子元素 2</a> 
    		</div>
    　　</body>
    </html>

### 相邻兄弟选择器 ###

##### 定义 #####

选择紧跟 E 元素后的 F 元素，用加好表示，选择相邻的第一个兄弟元素

##### 语法 #####

E+F\{ \}

##### 例子 #####

<html>
    　　<head>
    　　　　 <title></title>
    　　　　 <meta charset="utf-8" />
    		<style> h1+p{ color:red;} </style>
    　	</head>
    　　<body>
    		<div>
    			<h1>one</h1> 
    			<p>two</p> 
    			<p>three</p>
    		</div>
    　　</body>
    </html>

## 伪类选择器 ##

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒 号来表示。

link “链接”：超链接点击之前（只适用于 a）

visited “访问过的”：链接被访问过之后（只适用于 a）

hover “悬停”：鼠标放到标签上的时候（适用于所有标签）

active “激活”： 鼠标点击标签，但是不松手时。（适用于所有标签）

<html>
    　　<head>
    　　　　 <title></title>
    　　　　 <meta charset="utf-8" />
    		<style> /*让超链接点击之前是红色*/ a:link{ color:red; } /*让超链接点击之后是橘色*/ a:visited{ color:orange; } /*鼠标悬停，放到标签上的时候是绿色*/ a:hover{ color:green; } /*鼠标点击链接，但是不松手的时候是黑色*/ a:active{ color:black; } </style>
    　	</head>
    　　<body>
    		<div>
    			<a href="https://www.baidu.com">百度一下，你就知道</a>
    		</div>
    　　</body>
    </html>

a:link 、a:visited 、a:hover 、a:active 是固定的顺序,如果顺序不对则会失效

### first-child 选择器 ###

##### 定义 #####

first-child 选择器匹配其父元素中的第一个子元素

##### 实例 #####

列表中的第一个 < li >元素选择的样式

li:first-child{  background:yellow; }

### last-child 选择器 ###

last-child 选择器用来匹配父元素中最后一个子元素。

p:last-child{  background:#ff0000; }

### nth-child ()选择器 ###

nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 n 可以是一个数字，一个关键字，或者一个公式。

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引 的第一个子节点是 1）。 在这里，我们为奇数和偶数 p 元素指定两个不同的背景颜色

p:nth-child(odd){ 
    	background:#ff0000; 
    }
    p:nth-child(even){ 
    	background:#0000ff; 
    }

### only-child 选择器 ###

only-child 选择器匹配属于父元素中唯一子元素的元素

p:only-child{  background:#ff0000; }

### first-of-type 选择器 ###

first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。和 :nth-of-type(1) 是一个意思。

### last-of-type 选择器 ###

last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素。

### nth-last-child() 选择器 ###

nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是一个数字，一个关键字，或者一个公式。

/* 指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色 */
    p:nth-last-child(2) {  background:#ff0000;}

### nth-of-type() 选择器 ###

nth-of-type(n)选择器匹配同类型中的第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

/*指定每个 p 元素匹配同类型中的第 2 个同级兄弟元素的背景色*/
    p:nth-of-type(2)
    { 
    	background:#ff0000;
    }

### nth-last-of-type() 选择器 ###

nth-last-of-type(n)选择器匹配同类型中的倒数第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

p:nth-last-of-type(2)
    { 
    	background:#ff0000;
    }

### empty 选择器 ###

empty 选择器选择每个没有任何子级的元素（包括文本节点）

p:empty{ 
    	background:#ff0000;
    }

### not() 选择器 ###

not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

not(p){ 
    	background:#ff0000;
    }

### focus 选择器 ###

focus 选择器用于选择具有焦点的元素。

input:focus{ 
    	background-color:yellow;
    }

### checked 选择器 ###

checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

input:checked {  
    		height: 50px; 
    		width: 50px;
    	}

### selection 选择器 ###

selection 选择器匹配元素中被用户选中或处于高亮状态的部分。

selection 只可以应用于少数的 CSS 属性：color, background, cursor,和 outline。Firefox 通过其私有属性 ::-moz-selection 支持 。

::selection{  
    	color:#ff0000;
    }
    ::-moz-selection{  
    	color:#ff0000;
    }

另外还有伪对象选择器和属性选择器等也可以自行了解一下~

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112255212

Web全栈~06.CSS选择器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Web(六)CSS3语法-CSS3选择器-基础选择器

相关 Web(六)CSS3语法-CSS3选择器-组合选择器

相关 java web-1.5CSS选择器

相关 Web全栈~06.CSS选择器

相关 Web全栈~05.CSS属性

相关 Web全栈~04.css入门

相关 css选择器_CSS选择器

相关 css 属性选择器_CSS选择器：属性选择器

相关 Python全栈（九）Web前端基础之3.CSS常见样式和选择器

相关 06-DIV+CSS-CSS的必要性和基本选择器