前端开发：CSS选择器

一、基础选择器

1.1标签选择器

通用型，一次将所有的同类型标签设置成相同属性；

<style>

p {

   color: red;

}

div {

   color: green;

}

</style>

1.2类选择器

类名用 . (点)开头的

<style>

   .eat{

    color:red;

}

.sleep{

    color:blue;

}

.play{

    color:black;

    font-size: 30px;

}

</style>

<p class="eat">吃饭</p>        //给段落赋予一个class类名；是此类名的是一样的CSS格式

<p class="sleep play">睡觉</p>//一个元素可以赋予多个类名；进行属性的叠加；中间用空                                                         格隔开

<p class="play">玩耍</p>

注意：

下方的标签使用 class 属性来调用.

一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

如果是长的类名, 可以使用 - 分割.

不要使用纯数字, 或者中文, 以及标签名来命名类名

 1.3id选择器

CSS 中使用 # 开头表示 id 选择器

<style>

   #ha {

       color: red;

  }

</style>

<div id="ha">蛤蛤蛤</div>

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 id 不必带 #

id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

类名是可以重复的；id是不能重复的；

1.4通配符选择器

* {

color: red;

}

页面的所有内容都会被改成 红色 .

通配符选择器在实际开发中是用来针对页面中所有的元素默认样式进行消除，主要用来消除边距；

二、复合选择器

将之前学习的基础选择器，进行组合

2.1后代选择器

元素1 元素2 {样式声明}

<style>

ol li{        color:red;        }

.hobby li{        color:blue;        }

ol a {        color:black;        }

</style>

<ul class="hobby">

        <li >吃饭</li>

</ul>

    <ol>

        <li >吃饭</li>

        <li>   <a href="#">跳转</a> </li>

    </ol>

2.2伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

<style>

        a{        color: red; }

        a:hover{ color:green; }

        a:active{ color:blue;   }

</style>

    <a href="#">不跳转</a>