资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS选择器概述

CSS选择器概述

wangjuntytl / 1808人阅读

摘要：常用于链接描点上用户行为选择器选择匹配的元素，且匹配元素被激活。，选择的是奇数项，而使用选择的却是偶数项否定伪类选择器选择器功能描述匹配所有除元素外的元素属性选择器语法选择器功能描述用于选取带有指定属性的元素。

CSS选择器概述 一.CSS3 选择器分类

二.选择器语法 1. 基本选择器语法
选择器 类型 功能描述
* 通配选择器 选择文档中所有的HTML元素
E 元素选择器 选择指定类型的HTML元素
#id ID选择器 选择指定ID属性值为“id”的任意类型元素
.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

 

2. 层次选择器语法
选择器 类型 功能描述
E  F 后代选择器（包含选择器） 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素，注意是直接子元素，不包括子元素里的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

 

3. 动态伪类选择器语法
选择器 类型 功能描述
E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

 

4. 目标伪类选择器
选择器 功能描述
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

 

5.UI元素状态伪类选择器语法
选择器 类型 功能描述
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素
6.结构伪类选择器使用语法
选择器 功能描述
E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-tye 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n)  中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7.否定伪类选择器
选择器 功能描述
E:not(F) 匹配所有除元素F外的E元素
8.属性选择器语法
选择器 功能描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[[attribute =value]](http://www.w3school.com.cn/cs... 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute=value*] 匹配属性值中包含指定值的每个元素。

下面选择几个我们一般不常用的选择器来讲讲

三.实例 相邻兄弟选择器

选择紧接在另一个元素之后的第一个元素（同级元素）

 

彭


于晏

看一个该选择器应用的典型例子

 




     
HTML

    
CSS

    
JavaScript

    
Node.js

可以看到后面几个元素的左边框明显增大了3px,这里我们只需要用+号选择器把除第一个元素以外的左边框去掉就可以l

 .box > div + div{
            border-left: none;
        }

hover

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

 body,div{
          margin: 0;
          padding: 0;
      }
      ul{
          list-style: none;
          //让列表前的标记不再显示
      }
      .box{
          width:450px;
          margin: 100px;

      }
        .box > ul li{
            width: 120px;
            height:35px;
            line-height: 35px;
            text-align: center;
            float: left;
            border: 1px solid #dedede;
            box-sizing: border-box;

        }
        .box > ul >li li{
            border-top:none;
        }
        .box > ul >li +li{
            border-left: none;
        }
        .box > ul >li >ul{
            display: none;
        }
        .box > ul >li:hover ul{
            display: block;
            //主要代码
        }
    
    

     
    
         
  • 
             追梦人
             
      
                 
    • 博客动态
      • 
             
    
         
    • 
         
  • 
             CSS3
             
      
                 
    • CSS3文章
      • 
                 
    • CSS3技巧
      • 
             
    
         
    • 
         
  • 
             HTML5
             
      
                 
    • HTML5最新动态
      • 
                 
    • HTML5使用教程
      • 
             
    
         
    •

active 
 


    点击获取能量...

first-letter

选中第一个字

first-line

选中首行文字

:empty

当没有子元素，并且没有文本节点的时候，:empty会被触发，可以利用：empty给默认提示

    当ul没有内容的时候，会显示一条默认的信息。一旦加上内容，默认信息就会隐藏，不过需要注意的是，ul不能换行，必须这样写。

    :target

    获取当前描点的那个元素

    实现换肤功能

    当id为bg1,bg2和bg3的元素为目标元素时的style相同时，可以直接设置

    利用target实现遮罩层

     

    
   弹出层
    
        
    弹弹弹

    实现tab栏切换

     

    
   
    
    
    
    CSS
    
    
    HTML
    
    
    JavaScript

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

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

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

    相关文章

    • css选择器概述

      css选择器种类 id选择器 类选择器、属性选择器、伪类选择器 元素选择器、伪元素选择器 通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、选择器分组 一、id选择器 #id{ color:red; } 二、类选择器、属性选择器、伪类选择器 　　1、类选择器 ...

      Karrdy 评论0 收藏0

    • CSS选择器概述

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

      renweihub 评论0 收藏0

    • CSS

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

      hankkin 评论0 收藏0

    • CSS3新特性的概述

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

      Zachary 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    wangjuntytl

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <