首页 > > 网页制作 > css >

前端开发HTML&css入门——伪类选择器和…

2019-08-26 05:42:15来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前端开发HTML&css入门——伪类选择器和一些特殊的选择器

　　　　　　　　伪类和伪元素
　　　　有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

常用的一些伪类选择器：

:link :visited :hover :active
表示普通的链接（没访问过的链接）

表示访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过,
*由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色

 表示鼠标移入的状态 超链接被点击的状态 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　/*
　　　　未点击过的超链接颜色为黄绿色
　　*/
            a:link{
                color: yellowgreen;
            }
　　/*
　　　　点击过的超链接颜色为红色
　　*/
   　　　　 a:visited{
                color: red;
            }
　　/*
　　　　鼠标停留（未点击）在超链接颜色为天空蓝色
　　*/
　　　　　　　a:hover{
                color: skyblue;
            }
　　/*
　　　　点击时超链接的颜色为黑色
　　*/
　　　　　　　a:active{
                color: black;
            }
   　　 </style>
    </head>
    <body>
　　　　　　<a href="http://www.baidu.com">一个网站</a>
    </body>
</html>

以上四个伪类优先级是一样的，所以执行要有一定的顺序，一定要遵循

link→visit→hover→active

顺序，如果不遵循上述会使伪类失效。

其他的伪类选择器：

:focus :selection – :before – :after
获取焦点后进行选择操作

被选定后进行的选择操作

这个伪类在火狐中需要采用另一种方式编写: :-moz-selection

 指定元素前 指定元素后 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             * 文本框获取焦点以后，修改背景颜色为黄色
             */
            input:focus{
                background-color: yellow;
            }
　　　　　　　　/*
             * 为p标签中选中的内容使用样式
             *     可以使用::selection为类
             *     注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
             */
            
            /**
             * 兼容火狐的
             */
            p::-moz-selection{
                background-color: orange;
            }
            
            /**
             * 兼容大部分浏览器的
             */
            p::selection{
                background-color: orange;
            }
            
        </style>
    </head>
    <body>
    　　　　<p>我是一个段落</p>
        
       　　 <!-- 使用input可以创建一个文本输入框 -->
       　　 <input type="text" />
</body>
</html>

– :before和– :after

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
/*
             * :before表示元素最前边的部分
             *     一般before都需要结合content这个样式一起使用，
             *     通过content可以向before或after的位置添加一些内容
             * 
             * :after表示元素的最后边的部分
             */
            p:before{
                content: "我会出现在整个段落的最前边";
                color: red;
            }
            
            p:after{
                content: "我会出现在整个段落的最后边";
                color: orange;
            }
        </style>
    </head>

    <body>
        <p>
            我家是荒凉的。
一进大门，靠着大门洞子的东壁是三间破房子，靠着大门洞子的西壁仍是三间破房子。再加上一个大门洞，看起来是七间连着串，外表上似乎是很威武的，房子都很高大，架着很粗的木头的房架。柁头是很粗的，一个小孩抱不过来。都一律是瓦房盖，房脊上还有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的两梢上，一边有一个鸽子，大概也是瓦做的。终年不动，停在那里。这房子的外表，似乎不坏。
        </p>
    </body>

</html>

 

需要注意的是伪类选择器加入的文本是CSS样式，是无法选定的。

 

伪元素

:first-letter :first-line
为元素中中第一个字符来设置一个特殊的样式 为元素中的第一行设置一个背景颜色为黄色

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             * 使用伪元素来表示元素中的一些特殊的位置
             */
            /*
             * 为p中第一个字符来设置一个特殊的样式
             */
        
            p:first-letter {
                color: red;
                font-size: 20px;
            }
            /*
             * 为p中的第一行设置一个背景颜色为黄色
             */
            
            p:first-line {
                background-color: yellow;
            }
   　　 </style>
    </head>
    <body>
        <p>我家是荒凉的。
一进大门，靠着大门洞子的东壁是三间破房子，靠着大门洞子的西壁仍是三间破房子。再加上一个大门洞，看起来是七间连着串，外表上似乎是很威武的，房子都很高大，架着很粗的木头的房架。柁头是很粗的，一个小孩抱不过来。都一律是瓦房盖，房脊上还有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的两梢上，一边有一个鸽子，大概也是瓦做的。终年不动，停在那里。这房子的外表，似乎不坏。
        </p>
    </body>
</html>

 

　　　　属性选择器

　　可以根据元素中的属性或属性值来选取指定元素
　　* - 语法：
　　* [属性名] 选取含有指定属性的元素
　　* [属性名="属性值"] 选取含有指定属性值的元素
　　* [属性名^="属性值"] 选取属性值以指定内容开头的元素
　　* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
　　* [属性名*="属性值"] 选取属性值以包含指定内容的元素

　　title属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　　　　　/*
             * 为所有具有title属性的p元素，设置一个背景颜色为黄色　　
　　　　　　　　*/　
           　p[title]{
                background-color: yellow;
            }
            /*
             * 为title属性值是hello的元素设置一个背景颜色为黄色
             */
            p[title="hello"]{
                background-color: yellow;
            }
                        /*
             * 为title属性值以ab开头的元素设置一个背景颜色为黄色
             */
            p[title^="ab"]{
                background-color: yellow;
            }
            /*
             * 为title属性值以c结尾的元素设置一个背景颜色
             */
            p[title$="c"]{
                background-color: yellow;
            }
            /*
             * 为title属性值有c的元素设置一个背景颜色
             */
            p[title*="c"]{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p title="hello">我是一个段落</p>
        <p>我是一个段落</p>
        <p title="hello">我是一个段落</p>
        <p title="abbc">我是一个段落</p>
        <p title="abccd">我是一个段落</p>
        <p title="abc">我是一个段落</p>
    </body>
</html>
 子元素选择器

 　　:first-child 可以选中第一个子元素

　　 :last-child 可以选中最后一个子元素

　　:nth-child 可以选中任意位置的子元素

　　* 该选择器后边可以指定一个参数，指定要选中第几个子元素
　　* even 表示偶数位置的子元素
　　* odd 表示奇数位置的子元素




<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　/*选中第一个为p标签的子元素，
        p可以为空，默认为*通配符，表示所有
       所以div中的p标签也会被选中
　　　　*/ 
                     p:first-child{
                background-color: yellow;
            }
　　　　/*如果不想选中所有第一个（其他同理）为p标签的子元素，可以做一个限定*/
　　　　　　　　　　　　body > p:first-child{
                background-color: yellow;
            }
　　　　/*选中最后一个为p标签的子元素
　　　　div中的p标签既为第一个也为最后一个
　　　　*/
　　　　　　　　　　　　p:last-child{
                background-color: yellow;
            }
　　　　/*选中第几个为p标签的子元素
 　　  括号中可以填数字，表示第几。
 　　   或者填odd表示所有奇数，even表示所有偶数
　　　　*/
　　　　　　　　　　p:nth-child(odd){
                background-color: yellow;
            }
    </style>
    </head>
    <body>
        <span>我是span</span>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>hello</span>
        <div>
            <p>我是DIV中的p标签</p>
        </div>
    </body>
</html>



　　　　:first-of-type
			 　　　　* :last-of-type
			 　　　　* :nth-of-type


　　　　:first-child这些非常的类似，
			 　　　　* 		只不过child，是在所有的子元素中排列
			 　　　　* 		而type，是在当前类型的子元素中排列





<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
/*
在所有p标签中的第一个子元素
 */
            p:first-of-type{
                background-color: yellow;
            }
/*
在所有p标签中的最后一个子元素
 */
            p:last-of-type{
                </style>
  /*
 在所有p标签中的第几个子元素
   */
            p:nth-of-type(3){
                background-color: yellow;
              }
    </head>
    <body>
        <span>我是span</span>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>hello</span>
    </body>
</html>



兄弟元素选择器


　　可以选中一个元素后紧挨着的指定的兄弟元素
			 　　* 	语法：前一个 + 后一个


　　选中后边的所有兄弟元素
      语法：前一个 ~ 后边所有



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
            选中span元素紧挨着的指定兄弟元素，
           必须紧挨着，如果中间有其他元素则不生效
             */
            span + p{
                background-color: yellow;
            }
            
            /*
             * 选中span后边的所有兄弟元素
             */
            span ~ p{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>我是一个span</span>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
    </body>
</html>





否定伪类


　　　　可以从已选中的元素中剔除出某些元素


　　　　语法：
			 　　　　* 		:not(选择器)





<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　/*去除p标签中class是hello的元素*/
            p:not(.hello){
                background-color: yellow;
            }  
        </style>
    </head>
    <body>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p class="hello">我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
    </body>
</html>





选择器优先级 


当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
			 * 	这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
			 *  优先级高的优先显示


优先级的规则
			 * 		内联样式 ， 优先级  1000
			 * 		id选择器，优先级   100
			 * 		类和伪类， 优先级   10
			 * 		元素选择器，优先级 1 
			 * 		通配* ，    优先级 0
			 * 		继承的样式，没有优先级



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*    * 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较,但是注意，选择器优先级计算不会超过他的最大的数量级
    */
             #p2{
                background-color: yellowgreen;
            } 
            p#p2{
                background-color: red;
            }    
            .p3{
                color: green;
            }
            /* 如果选择器的优先级一样，使用靠后的样式。
*/
            .p1{
                color: yellow;
                background-color: greenyellow;
            }
                       .p3{
                color: green;
            }
    /*  可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，
    *     将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important*/

            .p1{
                color: yellow;
                background-color: greenyellow !important;
            }      
    /*  并集选择器的优先级是单独计算
             *     div , p , #p1 , .hello{}
        */ 
    </style>
    </head>
    <body>      
        <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
            <span>我是p标签中的span</span>
        </p>
    </body>
</html



 





			   
原文链接:https://www.cnblogs.com/KLExTt/p/11365376.html
如有疑问请与原作者联系

			   

                       标签：
                   

                   
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 

			   


               

                   
上一篇：设置网页字体的方法 

                   
下一篇：基于vue手写tree插件那点事 

               

               

                   

                       相关文章
                   

                   

                       

                           
                       

                   

               

           

            

			
IDC资讯：
			
			主机资讯
			
			注册资讯
			
			托管资讯
			
			vps资讯
			
			网站建设
			
			
网站运营：
			
			建站经验
			
			策划盈利
			
			搜索优化
			
			网站推广
			
			免费资源
			
			
网站联盟：
			
			联盟新闻
			
			联盟介绍
			
			联盟点评
			
			网赚技巧
			
			
行业资讯：
			
			搜索引擎
			
			网络游戏
			
			电子商务
			
			广告传媒
			
			
网络编程：
			
			Asp.Net编程
			
			Asp编程
			
			Php编程
			
			Xml编程
			
			Access
			
			Mssql
			
			Mysql
			
			其它
			
			
服务器技术：
			
			Web服务器
			
			Ftp服务器
			
			Mail服务器
			
			Dns服务器
			
			安全防护
			
			
软件技巧：
			
			其它软件
			
			Word
			
			Excel
			
			Powerpoint
			
			Ghost
			
			Vista
			
			QQ空间
			
			QQ
			
			FlashGet
			
			迅雷
			
			
网页制作：
			
			FrontPages
			
			Dreamweaver
			
			Javascript
			
			css
			
			photoshop
			
			fireworks
			
			Flash
			
			
程序设计：
			
			Java技术
			
			C/C++
			
			VB
			
			delphi
			
			
网络知识：
			
			网络协议
			
			网络安全
			
			网络管理
			
			组网方案
			
			Cisco技术
			
			
操作系统：
			
			Win2000
			
			WinXP
			
			Win2003
			
			Mac OS
			
			Linux
			
			FreeBSD
			
			

			

        

        

              

                
            

            

                
热门词条

                

				
				

            

            

                
最新资讯

                

                    
                

            

            

                
热门关注

                

                    
                

            

            

                
热门标签