900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS内嵌样式的选择器(包括 id选择器 类class选择器 选择器伪元素 伪类)

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

时间:2022-06-04 19:20:50

相关推荐

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 最后一个

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。