css选择器概述

Karrdy 发布于2019-04-23 11:49 / 996人阅读

css选择器种类

id选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、选择器分组

一、id选择器

            

            #id{
                color:red;
            }

二、类选择器、属性选择器、伪类选择器

　　1、类选择器

            

            .class{
                color:black;
            }

　　2、属性选择器

            

            [text]{
                color:white;
            }
            [text:text]{
                color:white;
            }
            p[text:text]{
                color:white;
            }

　　3、伪类选择器

　　:link　　　　向未被访问的超链接添加样式

　　:visited　　向已被访问的超链接添加样式

　　:active　　　向被激活的元素添加样式　

　　:hover　　　当鼠标悬停至元素上方是，向该元素添加样式

　　:focus　　　当元素获取焦点时，向该元素添加样式　

            345

            p:foucs{
                color:blue;
            }

三、元素选择器、伪类选择器

　　1、元素选择器

            345

            p{
                color:pink;
            }

　　2、伪元素选择器

　　:first-letter　　向文本的第一个字母添加特殊样式。

　　:first-line　　　向文本的首行添加特殊样式。

　　:before　　　在元素之前添加内容。

　　:after　　　　　在元素之后添加内容。

345


//"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
  {
  color:#ff0000;
  }

四、通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、分组选择器

　　1、通配符选择器

        
            345
            
            
            
            
        

            *{
                /*选择页面上的所有元素*/
                color:pink;
            }

            #te*{
                /*选择id为te元素下的所有元素*/
                color:pink;
            }

　　2、子类选择器

        
            345
            
            
            
            
        

            #te > p{
                /*选择id为te元素下的所有的直接子类p元素*/                    
                color:pink;
            }

　　3、后代选择器

        
            345
            
            
            
            
        

            #te p{
                /*选择id为te的元素下的所有p元素*/    
                color:pink;
            }

　　4、相邻兄弟选择器

        
            345
            
            
            
            
        

            p + input{
                /*选择紧接在 p 元素后出现的，p 和 input 元素拥有共同的父元素*/
                color:pink;
            }

　　5、选择器分组

        
            345
            
            
            
            
        

            p,input{
                /*选择所有的p和input元素*/
                color:pink;
            }

云服务器 GPU云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1212.html

CSS选择器概述

摘要：常用于链接描点上用户行为选择器选择匹配的元素，且匹配元素被激活。，选择的是奇数项，而使用选择的却是偶数项否定伪类选择器选择器功能描述匹配所有除元素外的元素属性选择器语法选择器功能描述用于选取带有指定属性的元素。 CSS选择器概述一.CSS3 选择器分类 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.选择器语法...

wangjuntytl 2019-08-29 15:37 评论0 收藏0
CSS选择器概述

摘要：常用于链接描点上用户行为选择器选择匹配的元素，且匹配元素被激活。，选择的是奇数项，而使用选择的却是偶数项否定伪类选择器选择器功能描述匹配所有除元素外的元素属性选择器语法选择器功能描述用于选取带有指定属性的元素。 CSS选择器概述一.CSS3 选择器分类 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.选择器语法...

renweihub 2019-08-26 17:34 评论0 收藏0
CSS

摘要：基础教程简介概述指层叠样式表决定元素如何显示内容与样式分离多个样式定义可层叠为一层叠次序浏览器缺省设置外部样式表内部样式表位于标签内部内联样式在元素内部基本语法语法结构高级语法选择器的分组继承继承中的属性重写从中继承的属 CSS基础教程 CSS简介 CSS概述 CSS指层叠样式表（Cascading Style Sheets）决定HTML元素如何显示内容与样式分离多个样式...

hankkin 2019-08-28 18:08 评论0 收藏0
CSS3新特性的概述

摘要：的新特性大致分为以下六类选择器边框与圆角背景与渐变过渡变换动画下面分别说一说以上六类都有哪些内容选择器基本选择器基本选择器又分为子选择器相邻兄弟选择器通用兄弟选择器群组选择器属性选择器为带有属性的元素设置样式为属性的元素设置样式选择属性值包 CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 ...

Zachary 2019-08-29 13:17 评论0 收藏0