技术栈

主页 > 前端开发 >

【CSS 基础】02 选择器

技术栈 - 中国领先的IT技术门户

概述

当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些对象。选择器就是定义了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>

责任编辑:admin  二维码分享:
本文标签: 选择器html段落headtitlestyle
点击我更换图片

评论列表