CSS-选择器的使用

对页面元素属性进行修改或者调整,就需要选中页面指定的标签元素

就引出了选择器的概念,可以通过选择器来对页面元素属性进行修改,下面介绍几个基本选择器的种类和使用方法

1.基础选择器:单个选择器构成

1.1 标签选择器,快速把同一类型的标签选择出来

<style>
p {
    color: red;
}
</style>
<p>咬人猫</p>

1.2 类选择器,可以让多个标签使用同一个标签

    <style>
           .blue {
               color: blue;
          }
    </style>

       <div class="blue">咬人猫</div>
       <div>咬人猫</div

1.3 id选择器,id是唯一的

<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>

1.4 通配符选择器,选取所有的标签.

* {
 color: red;
}

2.复合选择器:把多个选择器综合运用起来

2.1 后代选择器,选择某个父元素中的某个子元素.也可以时孙子!

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

元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

<ul>
    <li>bbb</li>
    <li><a>ccc</a></li>
</ul>
ul li a {
    color: yellow;
}
或者
ul a {
    color: yellow;
}

2.2 子选择器,只能选择子标签.不选孙子元素!

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

<div class="two">
    <a href="#">链接1</a>
    <p><a href="#">链接2</a></p>
</div
.two>a {
    color: red;
}

2.3 并集选择器,用于选择多组标签.

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

<div>苹果</div>
<h3>香蕉</h3>
div, 
h3 {
    color: red;
}

2.4 伪类选择器

1) :链接伪类选择器

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

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

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

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

a {
    color: black;
}
a:hover {
    color: red;
}

2) :force 伪类选择器

<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
.three>input:focus {
    color: red;
}