WEB前端学习:CSS学习_CSS选择器

CSS选择器

该篇为讲得是 CSS选择器，这是 CSS篇章最为重要的一篇。选择器决定 CSS规则样式作用的元素，就相当于一个人的头

一、简单选择器

1.type选择器(类型选择器)

a {
    color: red;
}
ol, ul {
    list-style-type: none;
}

对所有选择器对应元素的样式进行修改

1.1、选择器命名规则

元素名

2.class选择器(类选择器)

.outline {
    text-weight: bold;
    color: red;
}
.outline.first {
    background-color: black;
}

对所有 class属性取值含有选择器对应 class名的元素的样式进行修改，选择器有多个 class名时，class属性需要同时含有多个 class名才有效

2.1、选择器命名规则

“.” 加 class名

3. ID选择器

#main {
    font-size: 35;
}

对 id属性取值为选择器名称的元素的样式进行修改
tips：id 具有唯一性，一个网站中，同一个 id名只能出现在同一个元素上（相当于身份证号码）

3.1、选择器命名规则

" # " 加 id名

tisp：下文中的 E可以为选择器

二、属性选择器

选择器	意义
E[key]	E标签含有key属性的元素
E[key=“value”]	E标签含有key属性并且取值为value的元素
E[key~=“value”]	E标签含有key属性并且取值含有value的元素
E[key^=“value”]	E标签含有key属性并且取值以value开头的元素
E[key$=“value”]	E标签含有key属性并且取值以value结尾的元素
E[key*=“value”]	E标签含有key属性并且取值的字符串中含有value的元素

三、上下文选择器

选择器	意义
*	所有元素
E1 E2	E1元素的后代元素E2
E1>E2	E1元素的子元素元素E2
E1~E2	E1元素后面的兄弟元素E2
E1+E2	E1元素后面的紧邻兄弟元素E2

四、伪类选择器

1.结构化的伪类选择器

选择器	意义
E:first-child	选择为其父元素的第一个子元素的 E元素
E:last-child	选择为其父元素的最后一个子元素的 E元素
E:nth-child(n)	选择为其父元素的第n个子元素的 E元素 2n 表示偶数，2n+1 表示奇数

2.UI伪类选择器

选择器	意义
a:visited	被点击过的 a元素
a:link	没有被点击过的 a元素
E:hover	鼠标停留在上面的 E元素
E:active	被激活的 E元素(鼠标按下去但没松开的状态)
E:target	被文档内跳转选中的 E元素（被导读选中跳转
E:checked	被选择的 E元素
E:focus	被聚焦的 E元素

五、伪元素选择器

选择器	意义
E::first-letter	E元素下的第一个内容
E::first-line	E元素下的第一行
E::fefore	E元素的内容前面
E::after	E元素的内容后面

持续更新…

该篇主要讲的是 CSS选择器。

最后，若有不足或者不正之处，欢迎指正批评，感激不尽！如果有疑问欢迎留言。

往期博客

• CSS中的单位
• CSS规则基本语法

下面这些是我学习CSS的网站，希望对大家有帮助

• CSS Reference(https://cssreference.io/)
• MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS)
• 菜鸟教程(https://www.runoob.com/css/css-tutorial.html)