CSS内嵌样式的选择器(包括 id选择器、类class选择器、选择器伪元素、伪类)

CSS内嵌样式的选择器是通过使用style标签写在head里的
选择器一共有9种:
1、标签选择器:是指通过元素的标签名字来选中元素 从而设置样式
语法结构:元素标签名{属性:属性值;属性:属性值}

2、id选择器:通过id选择器选择元素的结构(只可选一个)
语法结构:#id的值{属性:属性值;属性:属性值}

3、类(class)选择器:给元素设置class及属性值,通过class的值来选择元素(可选多个)
语法结构:.class的值{属性:属性值;属性:属性值}

4、后代选择器(用空格隔开)
li和a都是ul的后代
语法结构:ul li{属性:属性值;属性:属性值}
ul a{属性:属性值;属性:属性值}

<ul>
	<li>
		<a></a>
	</li>
	<div></div>
</ul>

5、子代选择器(用">"隔开)(如代码块)
语法结构:ul>li>a{属性:属性值;属性:属性值}

6、相邻兄弟选择器(用"+"隔开)(如代码块)
语法结构:li+div{属性:属性值;属性:属性值}

7、组合选择器(用“,”隔开)
语法结构:.div_01,.div_02{属性:属性值;属性:属性值}

8、*伪类选择器
语法结构:元素名称:hover属性{属性:属性值;属性:属性值}
link 未访问的链接
visited 已访问的链接
hover 鼠标滑过的链接
active 已选中的链接

9、伪元素选择器
语法结构:
(1)属性:before{content:" ";属性:属性值;属性:属性值}(重点:必须添加content属性)
first-line 首行
first-letter 首字母
before 元素之前
ofter 元素之后
(2)E:nth-child(n){属性:属性值;属性:属性值} // 表示 选择第几个子元素
E:nth-last-child(n){…} // 表示 选择倒数第几个子元素
E:nth-child(2n-1){…} // 表示 所有奇数行
E:nth-child(2n){…} // 表示 所有偶数行
E:nth-child(-1n+5){…} // 表示 前五个
E:nth-last-child(-1n+5){…} // 表示 后五个
E:nth-child(2n-1){…} // 表示 所有奇数行
first-child 第一个
last-child 最后一个

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值