神奇的CSS3选择器

阅读量：5019 次

发布时间：2019-06-12

本文共 2381 字，大约阅读时间需要 7 分钟。

话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。

　Css3选择器

先说下，为什么提倡使用选择器。

使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。

减少样式表的代码量。

属性选择器

　　1.[att*=val]属性选择器

　　意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式

　　2.[att^=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串开头，则该元素使用这个样式。

　　3.[att$=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串结尾，则该元素使用这个样式

　　结构性伪类选择器

　　伪类选择器是指已经定义好的选择器，不能随便起名。

　　例如：a:link,a:visited,a:hover,a:active.

　　伪元素选择器是指已经定义好的为元素使用的选择器。

first-line伪元素选择器

hello world

你好

2.first-letter 伪元素选择器

hello world

你好

befor伪元素选择器

after伪元素选择器

　　root选择器

　　root选择器将样式绑定到页面的根元素。在使用：root与body元素的背景时，根据不同的条件，显示效果不同

你好

　　not 选择器

　　排除结构元素下面子结构元素，使他不使用该元素

大家好

你好

　　empty选择器

　　当元素内容为空时使用的样式。

    
              
      
                                    1                  2

　　target选择器

　　使用target选择器给页面中的target元素使用样式

    
              示例1
              
       你好
        
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    
      
              
       你好
        
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    
      
              
       你好
        
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好

　　first-child、last-child选择器

　　指定第一个子元素和最后一个子元素的样式

　　nth-child、nth-last-child选择器

　　针对父元素中某个指定序号的子元素来指定样式。

　　也可以使用Nth-child(even)对偶数子元素指定样式，Nth-child(odd)对奇数元素指定样式

　　nth-of-type nth-last-of-type选择器

　　这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷，这两个选择器只针对同类元素指定样式。

　　UI元素状态选择器

　　E:horver,E:active,E:focus选择器

　　E:enabled,E:disabled,E:read-only,E:read-write选择器

　　E:checked、E:default选择器

　　E:checked指定复选框选取时的样式

　　E:default 指定默认选取框的样式

E::selection选择器

　　指定元素处于选中状态时的样式

测试测试

转载于:https://www.cnblogs.com/fifalover09/p/4651894.html

你可能感兴趣的文章

在使用webView播放flash或视频文件时无法关闭声音的问题

查看>>

redhat 7 源码安装 mysql5.5.49

Learning to rank (software, datasets)

查看>>

git常见问题

查看>>

.NETFramework：template

Linux tomcat+JDK 安装配置

查看>>

题解 poj3585 Accumulation Degree （树形dp）（二次扫描和换根法）