CSS选择器

最新推荐文章于 2022-09-26 19:29:14 发布

山上农夫

最新推荐文章于 2022-09-26 19:29:14 发布

阅读量145

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_41803637/article/details/80085252

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、选择器

1、基本选择器

（1）标签选择器

body{
		background: #14B3A2；
	}
  h1{
		color: #C648CD；
	}

（2）id选择器：每个id唯一

css部

#one{
		font-size: 20px;
	}
#two{
		font-colour：#fff；
	}

HTML部分

<body id="one" >
	<h1 id="one" style="color: #FD0206">CSS的写法三</h1>
	<p id="one">哈哈
</p>

注意：一个id选择器不能同时定义两个id，所以一般是对每一个页面出现的唯一元素进行定义

（3）class选择器-----可以多个同名

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.a{
			font-size: 70px;
		}
		.b{
			text-align: center;
		}
	</style>
</head>

<body>
	<p class="a b">id选择器</p>
</body>

注意：类选择器与id选择器不同的地方在于类选择器可以有多个

2、复合选择器

（1）介绍

复合选择器：就是两个或者多个基本选择器，通过不同方式连接而成的选择器分为”交集“选择器、“并集”选择器

（2）分类

a、嵌套：“交集”选择器：

由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写，注意内外相邻的标签相同时，则无法指定位置，即嵌套无作用。

例1：
h3.class{
		color:red;font-size:23px;
		}
		
例2：
<style>
p{
	color: #0207FD;
 }
		
div p{
	color: #000000;
 }
		
p p{//无作用
	color: #03730C;
 }
 
 p span p{//无作用
			color:#F70307;
		}
</style>

<body>
	<h1>哈哈哈</h1>
	<h2>哈哈哈</h2>
	<p>哈哈哈</p>
	
	<div>
		<p>哈哈哈</p>
	</div>
	
	<p>
		<p>哈哈哈</p>
	</p>
	
	<span>
		<p>哈哈哈</p>
	</span>
	
	<p>
		<span>
			<p>
				哈哈哈
			</p>
		</span>
	</p>
</body>
</html>

b、分组：“并集”选择器：

作用于相同的CSS操作的选择器，任何形式的选择器都可以，通过逗号连接而成，

h1,h2,h3{
		color:red;font-size:23px;
		}

3、层次选择器

（1）后代选择器（以空格分）：

把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了，效果作用于内层的所有标签。

例1：
<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span{
  		 color:red
}
span
{
  color:blue;
}
</style>
</head>
<body>
<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效
</body>
</html>

例2：
<style>
div p{
			background-color:#1BFD01;
		}
</style>

<body class="center1">
	<div>
		<p>孩子</p>（有用）
		<span>
			<p>
				孙子（有用）
			</p>
		</span>
		<p>孩子</p>（有用）
	</div>
	<p>兄台</p>
	<p>后面的所有兄弟</p>
</body>

效果是：“用CSS”的显示红色，其他用<span>包围起来的是兰色

后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”

（2）子选择器（以大于号分）：

也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。效果作用于某一个子元素。

例1：
p>span{
		color:blue;
		}
		
例2：
<style>
		div>p{
			background-color:#1BFD01;
		}
</style>

<body class="center1">
	<div>
		<p>孩子</p>（有用）
		<span>
			<p>
				孙子
			</p>
		</span>
		<p>孩子</p>（有用）
	</div>
	<p>兄台</p>
	<p>后面的所有兄弟</p>
</body>

（3）相邻兄弟选择器（以加号分隔）

即后一个标签

div+p{
			background-color: #FD02CD;
		}
		
<div>//后一个
		<p>孩子</p>
</div>
	<p>兄台</p> //显示的是这个

（4）普通兄弟选择器（以破折号分隔）

显示后面所有符合要求的元素

div~p{
		background-color: #FD02CD;
	}
	
<body class="center1">
	<div>
		<p>孩子</p>
	</div>
	<p>兄台</p>（显示这个）
	<p>后面的所有兄弟</p>（显示这个）
</body>

4、其他选择器

（1）通用选择器

*{ 
	margin:0;padding;:0; 
 }
*代表所有网页元素

（2）伪类别选择器

伪类别选择的符号是“:”，通常用于超链接，伪元素如： p:first-line ，以及CSS3中的结构化伪类。在后面有详细的介绍。

 a:link { color: #F00;
                  text-decoration: none; 
        }
 a:visited{ color: #000;
         text-decoration:none;  
         }
 a:hover { color: #F0F;
		 background-color：#999;

         }

5、全部选择器

序号	选择器	实例	实例说明	CSS	备注
1	.class	.intro	选择所有class="intro"的元素	1
2	#id	#firstname	选择所有id="firstname"的元素	1
3	*	*	选择所有元素	2
4	element	p	选择所有<p>元素	1
5	element,element	div,p	选择所有<div>元素和<p>元素	1
6	element element	div p	选择<div>元素内的所有<p>元素	1
7	element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
8	element+element	div+p	选择所有紧接着<div>元素之后的<p>元素	2
9	[attribute]	[target]	选择所有带有target属性元素	2
10	[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
11	[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
12	[attribute\|=language]	[lang\|=en]	选择一个lang属性的起始值="EN"的所有元素	2
13	:link	a:link	选择所有未访问链接	1
14	:visited	a:visited	选择所有访问过的链接	1
15	:active	a:active	选择活动链接	1
16	:hover	a:hover	选择鼠标在链接上面时	1
17	:focus	input:focus	选择具有焦点的输入元素	2
18	:first-letter	p:first-letter	选择每一个<P>元素的第一个字母	1	伪元素,CSS3中使用::
19	:first-line	p:first-line	选择每一个<P>元素的第一行	1	伪元素,CSS3中使用::
20	:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
21	:before	p:before	在每个<p>元素之前插入内容	2	伪元素,CSS3中使用::
22	:after	p:after	在每个<p>元素之后插入内容	2	伪元素,CSS3中使用::
23	:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
24	element1~element2	p~ul	选择p元素之后的每一个ul元素	3
25	[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
26	[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
27	[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
28	:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
29	:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
30	:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
31	:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
32	:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
33	:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
34	:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
35	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
36	:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
37	:root	:root	选择文档的根元素	3
38	:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
39	:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
40	:enabled	input:enabled	选择每一个已启用的输入元素	3
41	:disabled	input:disabled	选择每一个禁用的输入元素	3
42	:checked	input:checked	选择每个选中的输入元素	3
43	:not(selector)	:not(p)	选择每个并非p元素的元素	3
44	::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
45	:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
46	:in-range	:in-range	匹配值在指定区间之内的input元素	3
47	:read-write	:read-write	用于匹配可读及可写的元素	3
48	:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
49	:optional	:optional	用于匹配可选的输入元素	3
50	:required	:required	用于匹配设置了 "required" 属性的元素	3
51	:valid	:valid	用于匹配输入值为合法的元素	3
52	:invalid	:invalid	用于匹配输入值为非法的元素	3

二、css样式的优先级

内联样式>内嵌样式>导入样式>链接样式

三、选择器镶嵌

<body class="a">
	<h1 id="one" style="color: #FD0206">CSS的写法三</h1>

山上农夫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

一、选择器 1、基本选择器（1）标签选择器body{ background: #14B3A2； } h1{ color: #C648CD； } （2）id选择器：每个id唯一 css部#one{ font-size: 20px; }#two{ font-colour：#fff； } ...
复制链接

扫一扫

专栏目录