当前位置: 首页 > 网页制作 > 正文

css选择器的使用方法

什么是css选择器

简单而言:从HTML文档中选择一系列元素

div {

color: #f00;

}

这就是一个选择器,表示的意思是 选择所有标签名为 div 的元素,并应用后面的样式组,字体颜色为红色。

举个通俗例子,高中老师要带一部分同学去参加活动,那该挑哪些同学呢?老师给的条件是:所有 数学成绩高于90分 的同学跟我去参加活动。

那这里面呢 ‘数序成绩高于90分’ 就是一个选择器。

有哪些选择器呢

我们先假定html结构如下:

<div id="header">

<div class="header-title"></div>

<div class="header-close"></div>

</div>

id选择器

#header {

color: #f00;

}

很清晰了,就是通过#id属性来选择最外层的div元素

标签选择器

div {

color: #f00;

}

通过div标签名称来选择所有的div元素

class类选择器

.header-title {

color: #f00;

}

.header-close {

color: #f00;

}

通过.class属性值来选择所元素

后代选择器

#header .header-title {

color: #f00;

}

通过空格来组合选择器,从而选择相应的元素

子元素选择器

#header>.header-title {

color: #f00;

}

通过>来组合选择器,从而选择相应的元素

兄弟节点选择器

.header-title+.header-close {

color: #f00;

}

通过+来组合选择器,从而选择相应的元素

属性选择器

div[id="header"] {

color: #f00;

}

通过[属性名="属性值"]来选择相应的元素

伪类选择器

div:hover {

color: #f00;

}

:hover 就是一种伪类选择器,标识当鼠标挪到div元素上的时候

同理还有

:first-child

:active

等等

伪元素选择器

div:after {

color: #f00;

}

:after

:before

都是伪元素

本文固定链接: https://www.ziyouwu.com/archives/1675.html | 自由屋博客www.ziyouwu.com|wordpress建站技巧分享

css选择器的使用方法:等您坐沙发呢!

发表评论

1 + 6 = ?


快捷键:Ctrl+Enter