H5全栈_选择器

最新推荐文章于 2023-09-11 17:31:39 发布

AKIRAZXX

最新推荐文章于 2023-09-11 17:31:39 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签：选择器

本文链接：https://blog.youkuaiyun.com/AKIRAZXX/article/details/98061026

html/css 专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基本概念与使用方法，包括优先级规则、语法规范及不同定义方式的特点。同时，详细介绍了各类选择器的运用，如核心选择器、层次选择器、属性选择器和伪类选择器，帮助读者全面掌握CSS的运用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

介绍

css：层叠样式表
用于修饰html结构
层叠：多个样式修饰一个结构；子元素可以从父元素那里继承样式；优先级
样式表：相关样式在一起定义（封装）

css优先级：
行内 > 外部引入 = 内嵌式
1.! important 最高
2.若选择器权重相同，则就近
3.行内：1000
id选择器: 100
类选择器,属性选择器,伪类选择器：10
标签选择器,伪元素选择器：1
不会越级选择

语法

注释：/* */
规则：{k:v;k:v;}

定义样式的方法：

1、可定义在style属性中
缺：样式与结构冗余
优：优先级比较高
2、定义在head标签的style中
缺：样式复用率较低
优：结构与样式分离

<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
	/*选择器  将样式定义在head标签的style中*/
		div:last-child{
			color: #ffcc99;
			background: #333;
		}
	</style>
</head>
<body>
<!-- 定义在style中， -->
	<div style="color:#fff;background:#333">111</div>
	<div>222</div>
</body>

3、定义在css文件中
优：样式复用率高，样式与结构分离

<head>
	<meta charset="UTF-8">
	<title>CSS的应用</title>
	<link rel="stylesheet"  href="./2.2css.css">
	/*调用2.2css.css文件*/
</head>
<body>
	<!-- 半径为100px的圆，北京为粉色，字体样式为白色，居中显示   color文本背景色, -->
	<div>你好，css</div>
	<div id="two">你好，html</div>
	<div>你好，js</div>
</body>

在2.2css.css 内

div{
	width:200px;
	height:200px;
	border-radius:50%;
	background:pink;
 	color:#ffffff;
	text-align:center;
}
div#two{
	line-height: 200px;
}

选择器

1、核心选择器

1、标签选择器：h2{规则} div{规则}

<style>
	div{
		color: #ffcc99;
		background: #333;
	}
</style>

2、id选择器：

<style>
  #two{}
</style>
<body>
	<div id="one"></div>
  	<div id="two"></div>
</body>

3、类选择器：

<style>
	.second{}
</style>
<body>
	<div class="second"></div>
	<div class="second"></div>
</body>

4、逗号选择器：
同时选中h1、h2、h3

<style>
h1,h2,h3{}
</style>
<body>
	<h1></h1>
	<h2></h2>
	<h3></h3>
</body>

5、组合选择器：
a、并集选择器：p.one{}
b、交集选择器：.one,.two{}

<style>
  p.two{}
</style>
<body>
	<p class="one">1</p>
  	<p class="two">2</p>
  	<div class="two">3</div>
</body>

设置了2的样式

<style>
  .one,.two{}
</style>
<body>
	<p class="one">1</p>
  	<p class="two">2</p>
  	<div class="two">3</div>
</body>

全部都设置了
6、普遍选择器;表示选中所有元素

2、层次选择器

1、子代选择器：> 只选中元素后一级子元素

<style>
  ul>li{}
</style>

2、后代元素选择器：空格隔开内部所有元素都可以选中

<style>
ul li{}
</style>

3、兄弟选择器：~* .two后所有元素

.two~*{
	text-decoration: underline red;
}

4、相邻同胞选择器：+* .two的下一个元素

.two~*{
	text-decoration: underline red;
}

3、属性选择器

用于筛选表单
在已有选择器的基础上进行筛选.
selector[type=‘text’]
[type$=t] 有type属性，并且值以t结尾
[type^=t]有type属性，并且值以t开头
[type*=t] 有type属性，并且值中含有t
[class~=two] class中包含类名two的

<style>
	input[type='text']{
		background: #ffcc99;
	}</style>
</head>
<body>
<form>
	<input type="text" name="1">
</form>
</body>

4、伪类选择器

a、对结构
ul>li:first-child：ul里第一个为li的孩子
only-child:匹配父元素中只有一个子元素的元素
ul>li:last-child：ul里最后一个为li的孩子
ul>li:nth-child(odd)：括号可加数字、表达式（2n+1）、odd（奇数）、even（所有偶数）
nth-last-type
first/last-of-type：可以选择第一个该类型的元素，无论其是不是父元素的第一个子元素
b、对状态
仅a标签可用
:link 初始状态
a:link{color:green}
:active 激活状态：按上去时的状态
:checked 用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox)
:visited 已访问过的链接颜色
:focus 获取焦点
所有标签都可以用
:hover 光标放上去的效果

<style>
	input[type='text']{
		background: #ffcc99;
	}
	a:link{
		color: red;
		/*初始效果*/
	}
	a:visited{
		color: pink ;
		/*已点击过的链接效果*/
	}
	a:active{
		color: yellow;
		/*按上去时的状态*/
	}
	a:hover{
		color: black ;
		/*鼠标放到链接上的效果*/
	}
	</style>
</head>
<body>
<form>
	<input type="text" name="1">
	
</form>

<div>
	<a href="http://www.taobao.com">淘宝</a>
</div>
</body>

伪元素选择器

a、产生元素（常与float连用）
::after在各元素后加一个支撑元素
::before在各元素前加一个支撑元素
b、选择器
::first-letter
::first-line
::selection 鼠标选择后的颜色

ul.nav::after {
			content:"four";
			display:block;	
			...
	}

	<ul class="nav">
			<li>one</li>
			<li>two</li>
			<li>three</li>
			/*::after */
	</ul>