【CSS 基础】02 选择器

来源：互联网发布：淘宝首页导航尺寸编辑：程序博客网时间：2024/05/22 00:43

概述

当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某些对象。选择器就是CSS规则所作用的对象。

CSS 规则由两个主要的部分构成：不同类型的选择器，以及一条或多条属性声明。

 selector {declaration1; declaration2; ... declarationN }

选择器示意图

选择器大体分为以下几个类型，其中前三种是基本类型：

标签选择器
类选择器
id选择器
群组选择器
交叉选择器
后代选择器 (包含选择器 )
通用选择器
伪类选择器

标签选择器

顾名思义作用于某种标签

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>标签选择器</title>                <style type="text/css">            p{                color: orange;            }        </style>            </head>    <body>              <p>我是一个段落</p>        <p>我是一个段落</p>        <p>我是一个段落</p>           </body></html>

类选择器

使用class属性给标签分类，然后使用”.”来声明类选择器。类选择器可以作用于某类标签。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>标签选择器</title>                <style type="text/css">            .one{                color: green;            }        </style>            </head>    <body>              <h2 class="one">我是标题</h2>               <p  class="one">我是一个段落</p>        <p  class="one">我是一个段落</p>        <p>我是一个段落</p>           </body></html>

id选择器

使用id属性为标签设置唯一的id，然后使用”#”来声明id选择器。id选择器只能作用于具有唯一id的标签。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>id选择器</title>                <style type="text/css">            #p1{                color: red;            }        </style>            </head>    <body>              <p id="p1">我是一个段落</p>        <p>我是一个段落</p>        <p>我是一个段落</p>           </body></html>

群组选择器

不同类型的选择器，使用同一种样式。不同选择器之间用逗号分隔

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>群组选择器</title>                <style type="text/css">            h2, h3, .one {                color: red;            }                   </style>            </head>    <body>          <h2>我是标题</h2>        <h3>我是标题</h2>        <p class="one">我是段落</p>        <p class="one">我是段落</p>        <p class="one">我是段落</p>                 </body></html>

交叉选择器

交叉选择器作用于某种标签的某类标签，是条件并且的关系。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>交叉选择器</title>                <style type="text/css">            p.one {                color: red;            }                   </style>            </head>    <body>                  <h2 class="one">我是标题</h2>        <!--只能是p标签class为one的有效果-->        <p class="one">我是段落</p>        <p class="one">我是段落</p>        <p class="two">我是段落</p>                 </body></html>

子代选择器

子代选择器定义了父子关系的选择器，选择器之间用空格分隔。如div p就是定义了div中p标签的样式，#one p就是定义了id为one标签中的p标签的样式。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>子代选择器</title>                <style type="text/css">            div p {                color: red;            }            #one_div p{                color: green;            }                   </style>            </head>    <body>                  <div>            <h2>我是标题1</h2>            <p>我是段落</p>            <p>我是段落</p>            <p>我是段落</p>         </div>                  <div id="one_div">            <h2>我是标题2</h2>            <p>我是段落</p>            <p>我是段落</p>            <p>我是段落</p>         </div>              <p>我是段落</p>    </body></html>

通用选择器

使用*代表通用选择器，可以作用于所有标签

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>通用选择器</title>        <style type="text/css">            *{                color: blue;            }        </style>    </head>    <body>              <h2>我是标题</h2>        <p>我是段落</p>        <p>我是段落</p>        <p>我是段落</p>    </body></html>

伪类选择器

定义元素在不同状态下的不同样式
例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态

a:link 正常连接的样式
a:hover 鼠标放上去的样式
a:active 鼠标按下时时的样式
a:visited 已经访问过的链接的样式。注意只要浏览器缓存中有历史记录就似为访问过。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>伪类选择器</title>                <style type="text/css">                         a:link{/*正常连接的样式*/                color: black;            }            a:hover{/*鼠标放上去的样式*/                color: red;            }                       a:active{/*鼠标按下时的样式*/                color: green;            }                       a:visited{/*已经访问过的链接的样式*/                color: blue;            }        </style>    </head>    <body>        <a href="test.html">测试</a><br />        <a href="http://www.qq.com">跳转QQ官网</a>                  </body></html>

选择器的继承性

子元素会继承父元素中文字相关的样式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>选择器的继承性</title>              <style type="text/css">            div{                color: red;            }        </style>    </head>    <body>        <!--div子元素p继承了div的文字相关的样式-->        <div>            <p>我是div中的段落</p>            <p>我是div中的段落</p>            <p>我是div中的段落</p>                    </div>        <p>我是普通中的段落</p>        <p>我是普通中的段落</p>        <p>我是普通中的段落</p>         </body></html>

选择器的叠加性

叠加性是指不同类型的选择器可以同时作用于一个标签

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">                     p{                color: green;            }                   #one{                font-size: 30px;            }                   </style>    </head>    <body>                      <p id="one">我是段落</p> <!--同时兼备标签选择器和id选择器样式-->        <p>我是段落</p>        <p>我是段落</p>    </body></html>

选择器的优先级

所谓选择器的优先级就是指不同的选择器作用于同一个元素，最终元素会采用那个选择器的样式显示。
可以简单的记忆，选择的越精准，优先级越高。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>选择器的优先级</title>              <style type="text/css">            p{                color: red;            }            .one{                color: green;            }            #p_one{                color: blue;            }        </style>    </head>    <body>        <!--优先级：id>class>标签-->        <p>我是标签选择器</p>        <p>我是标签选择器</p>              <p class="one">我是类选择器</p>        <p class="one">我是类选择器</p>               <p id="p_one">我是id选择器</p>           </body></html>

点滴分享共同进步

阅读全文

0 0