css3高级选择器

Poetry-Distance

已于 2022-08-04 12:48:44 修改

阅读量1.1k

点赞数 1

分类专栏：开发语言 html 文章标签： css3 html 前端

于 2022-07-02 10:18:23 首次发布

本文链接：https://blog.csdn.net/qi341500/article/details/125554175

版权

开发语言同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

一、层次选择器

1、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内行标签写在后面，中间用空格分开，当标签发生嵌套时，内层标签就称为外层标签的而后代。

语法：

元素1 元素2 { 样式声明 }

上述表语法示选择元素1里面的所有元素2（后代元素）

例如：

ul li { 样式声明 }   /*  选择 ul 里面所有的 li 标签元素 */

注意：

元素1和元素2中间用空格分开

元素1是父级，元素2是子级，最终选择元素2

元素2可以是儿子，也可以是孙子，只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

2、子选择器

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是亲儿子。

语法：

元素1>元素2{样式声明}

上述语法表示选择元素1里面所有直接后代（子元素）元素2.

例如：

div>p{样式声明}   /*  选择div里面所有最近一级p标签元素  */

注意：

元素1和元素2中间用大于号分开

元素1是父级，元素2是子级，最终选择元素2

元素2必须是亲儿子，其孙子等都不归他管，你也可以叫他亲儿子选择器

3、相邻兄弟选择器

例如：

<ul>
	<li>1</li>
	<a>2</a>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<h3>3</h3>
</ul>

a+p {
	color: blue;
}

只有挨着a的<p>4</p>会变，别的都不会变

4、通用兄弟选择器

例如：

<ul>
	<li>1</li>
	<a>2</a>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<h3>3</h3>
</ul>

a~p {
	color: blue;
}

挨着a的p元素全变

5、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的元素，通常用作集体声明。

例如：

<ul>
	<li>1</li>
	<a>2</a>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<h3>3</h3>
</ul>

li,a ,p{
	color: red;
}

li,a,p,元素全变

二、结构伪类选择器

1、

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
EF:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even（偶数）、odd（奇数）
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
EF:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

<ul>
			<li>ul第1个</li>
			<li>ul第2个</li>
			<li>ul第3个</li>
			<li>ul第4个</li>
			<li>ul第5个</li>
		</ul>
		<ol>
			<li>ol第1个</li>
			<li>ol第2个</li>
			<li>ol第3个</li>
			<li>ol第4个</li>
			<li>ol第5个</li>
		</ol>

ul :first-child {
	color: red;
}
ul :last-child {
	color: red;
}
ol :nth-child(3) {
	color: red;
}

注：

前三个是元素选择

后三个是类选择

<ul>
	<li>ul第1个</li>
	<li>ul第2个</li>
	<li>ul第3个</li>
	<li>ul第4个</li>
	<li>ul第5个</li>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
</ul>

ul :first-of-type {
	color: red;
}
ul :last-of-type {
	color: red;
}
ul :nth-of-type(3) {
		color: red;
}

三、属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr=val*]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

<footer>
    <h2>标题一</h2>
	<p>段落</p>
		<ul>
			<li>
				12345<a href=""><strong>12345</strong></a>
			</li>
			<li>
				12345<a href=""><strong>12345</strong></a>
			</li>
			<li>
				12345<a href=""> <strong>12345</strong></a>
			</li>
		</ul>
		<strong></strong>
		<form action="">
		<p>
			name:<input type="text"/>
		</p>
		<p>
			pass:<input type="password" placeholder="请输入">
		</p>
		<p>
			tel:<input type="tel" placeholder="请输入">
		</p>
		<p>
		    date:<input type="date" placeholder="请输入">
		</p>
		<p>
			date-time:<input type="datetime" placeholder="请输入">
		</p>
		<p>
			date:<input type="submit" value="99999">
		</p>
	</form>
</footer>

a[href]{
	color: red;
}
input[type="date"]{
	color: blue;
}
input[type^="su"]{
	color: aqua;
}
input[type$="xt"]{
	color: blue;
}
input[type*="d"] {
	color: green
}