选择器的简单实用--结合CSS

选择器的作用:可以帮助你精准的选中想要的元素

简单选择器

- ID 选择器

- 元素选择器

- 类选择器

- 通配符选择器 *,选中所有元素

* {
  color: red;
}

- 属性选择器

属性选择器用的不多,在表单元素会用到属性选择器,因为表单元素就相当于 excel 单元格一样嘛,要精准选中

/* 选中所有具有href属性的元素 */
[href] {
  color: green;
}
/* 选中href属性等于某个值的元素 */
[href="https://www.sayc.cc"]
{
  color: hotpink;
}
/* 上面两种写法不是很好,以为有的时候超链接会改变,我们用正则写会更友好 */
/* $匹配以value值结尾的 */
[href$="sayc.cc"] {
  color: indigo;
}

- 伪类选择器

用的超级多,选中某些元素的某种状态

1.hover:鼠标悬停状态

/* hover 悬停,鼠标移动到元素上显示的效果 */
/* 以下是选中所有元素  注意:body元素也会应用hover伪类样式*/
/* 应用面太广了,所有元素都会应用到hover样式 */
:hover {
  color: #ccc;
}
/* 选中鼠标悬停时的a元素 */
a:hover {
  color: yellow;
}

2.active:激活状态,鼠标按下状态

a:active {
  color: red;
}

3.link:超链接未访过的状态

4.visited:超链接访问过后的状态

书写顺序--lvha(爱恨法则)

- 伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素

1.berfore

2.after

示例:

<p>我最近看了一部电影<span>Pride And Prejudice</span></p> 
span::before{
    content: "《";
}
span::after{
    content: "》";
}

结果:

我最近看了一部电影《Pride And Prejudice》

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×