CSS选择器(id选择器、class选择器、元素选择器)

css基本的内容

CSS:层叠样式表(将多个样式按照一定顺序书写最终呈现的效果)
注:如果在HTML页面里面需要写css样式就要去写style标签

CSS写法

1.先写 标签
2.选择指定的标签名作为css的选择器
3.书写 花括号(大括号)
4.书写 属性:属性值
5.当有多个属性时用**;**分号隔开即可

	<style>
		h1{color: red;text-align: center;font-size: 40px;}
	</style>
	<h1>噼里啪啦</h1>

CSS选择器的分类(基础常用)

通用选择器 (*)

大家一起用一般修饰整体的文字样式

<style>
*{font-size: 30px;font-family: 楷体;}
</style>
<p>噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*p标签和h1标签里面的文字样式都会变化*/

标签选择器

(使用指定标签的名称):更多使用在去掉默认样式的时候

<style>
p{font-size: 30px;font-family: 楷体;}
</style>
<p>噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

ID选择器

①标签里面写 id='属性值’
②在style样式中,ID找#号 #+属性值
③id只能在标签中使用一次

<style>
#id_p{font-size: 30px;font-family: 楷体;}
</style>
<p id="id_p">噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

class选择器/类选择器

①标签里面写 class='属性值’
②在style样式中,class找.号 .+属性值
③class在标签中可以多次使用

<style>
.p_class{font-size: 30px;font-family: 楷体;}
</style>
<p class="p_class">噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

伪类选择器

CSS伪类是用来添加一些选择器的特殊效果,在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
p:first-letter{color:#0000FF;}/* 选择每一个<p>元素的第一个字母 */
p:first-line{color:#0000FF;}/* 选择每一个<p>元素的第一行 */

在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在CSS定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类的名称不区分大小写。

其他常用选择器

h1,p{background-color:yellow;}
/*用逗号隔开的选择器 选择所有<p>元素和<h1>元素*/
div p{background-color:yellow;}
/*用空格隔开的选择器 选择<div>元素内的所有<p>元素*/
<style>
		a[name^=abc2]{background-color: red;}
		/*选择name属性里面以abc2开头的所有元素*/
		a[name$=c12]{background-color: red;}
		/*选择name属性里面以c12结尾的所有元素*/
		a[name*=bc]{background-color: red;}
		/*选择name属性里面含子字符串bc的所有元素*/
		/*ps:如果选择多个字符时请保持连续性*/
</style>
	<a href="链接.html" target="_blank" name="abc12">选择器1</a>
	<a href="链接.html" name="abc2">选择器2</a>
<style>
		input:focus{background-color: #0000FF;color: white;}
		/*选择具有焦点的输入元素*/
		p:empty{background-color: #0000FF;}
		/*选择每个没有任何子级的p元素(包括文本节点)*/
		input:checked{width: 20px;height: 20px;}
		/*选择每个选中的输入元素*/
		::selection{background-color: red;}
		/*匹配元素中被用户选中或处于高亮状态的部分*/
		:not(p){background:url(图片路径) no-repeat  ;}
		/*选择每个并非p元素的元素*/
</style>
<form action="">
		<p><p>
		<input type="text" />
		<input type="radio" name="" id="" value="" checked="checked"/>男
		<input type="radio" name="" id="" value="" />男
</form>
p:nth-child(2){background:#ff0000;}
/*指定每个 p 元素匹配的父元素中第 2 个p元素的背景色*/
/*:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
	n 可以是一个数字,一个关键字,或者一个公式。*/

https://www.runoob.com/cssref/css-selectors.html————CSS选择器(菜鸟教程)

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值