css3-新增的选择器

最新推荐文章于 2024-06-05 22:45:58 发布

github_34514750

最新推荐文章于 2024-06-05 22:45:58 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css3 选择器

本文链接：https://blog.csdn.net/github_34514750/article/details/51122212

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.css3新增的3个属性选择器

[attribute^="value"]
eg:a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。

[attribute$="value"]
eg:a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
//所以可以使用css3实现不同文件给与不同图标，没有css3则我们只可以辛苦用js实现了~

[attribute*="value"]
eg:a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 
[class*="col-"]类名中包含col-子串的元素

2.css3新增的结构伪类选择器

n可以是even、odd（表格常用）、m*n+偏移量（m自己定一个值）、数字

:only-child 
eg:p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n) 
eg:p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
p:nth-child(2) 匹配<div><h1></h1><p></p><p></p></div>片段中的第二个元素，但却是第一个p元素

:nth-last-child(n) 
eg：p:nth-last-child(2) 同上，从最后一个子元素开始计数。

:last-child 
eg:p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

:nth-of-type(n) 
eg:p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
p.nth-of-type(2)
匹配<div><h1></h1><p></p><p></p></div>片段中的第二个p元素

:nth-last-of-type(n) 
eg:p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

:first-of-type  
eg:p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type  
eg:p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:only-of-type  
eg:p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

:nth-of-type(n) 选择器，该选择器选取父元素的第 N 个指定类型的子元素。

:root  
eg::root 选择文档的根元素。

:empty  
eg:p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。

3.UI元素状态伪类选择器

这几个状态伪类选择器在IE7，8不支持，其他浏览器都支持的比较好，如今IE7,8在国内用户还比较多，不推荐使用，但是当IE9广泛使用时，则需要积极使用这几个状态伪类选择器。

 :enabled  
 eg:input:enabled 选择每个启用的 <input> 元素。

:disabled  
eg:input:disabled 选择每个禁用的 <input> 元素

:checked  e
g:input:checked 选择每个被选中的 <input> 元素。

4.css3新增的其他选择器列表

//主流浏览器一般都对此支持
E~F：选择匹配F的所有元素，且匹配元素位于匹配E的元素后面（EF需要同级）
eg：div~p匹配<div><p>1</p></div><p>2</p>，则匹配到<p>2</p>，无<p>1</p>

//选择器在IE7，8不支持，其他浏览器都支持的比较好，如今IE7,8在国内用户还比较多，不推荐使用，但是当IE9广泛使用时，则需要积极使用这几个状态伪类选择器。
 :target  
 eg:#news:target 选择当前活动的 #news 元素。

//选择器在IE7，8不支持，其他浏览器都支持的比较好，如今IE7,8在国内用户还比较多，不推荐使用，但是当IE9广泛使用时，则需要积极使用这几个状态伪类选择器。
:not(selector)  
eg::not(p) 选择非 <p> 元素的每个元素。

:focus(鼠标点入之后)
--这个文本框focus动画效果感觉蛮好看的~，代码如下
input:focus{
    width: 200px;
    transition: width 2s;
    border: #87c6f9 1px solid;
    box-shadow: 0 0 8px rgba(103,166,217,1);
}

3.实例-制作优雅表格

table{
  width: 70%;
  font-size: 14px;
  font-family: SimHei;
  /*设计表格要习惯的加如下声明*/
  border-collapse: collapse;
  empty-cells: show;
  table-layout: fixed;
  border: 1px solid #cad9ea;
}

th{
  height: 30px;
}
td{
  height: 25px;
}

th,td{
  border: 1px solid #cad9ea;
  padding: 2px;
}
/*浅色颜色舒服*/
tr:nth-child(even) {
  background-color: #f5fafe;
}


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="index.css" rel="stylesheet">
    <title>优雅的数据表格</title>
  </head>

  <body>

    <table>
      <caption>优雅的数据表格</caption>
      <thead>
        <th>排名</th>
        <th>校名</th>
        <th>总得分</th>
        <th>人才培养得分</th>
        <th>研究生培养得分</th>
        <th>本科生培养得分</th>
      </thead>

      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

这里写图片描述

github_34514750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-新增的选择器

1.css3新增的3个属性选择器[attribute^="value"]eg:a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。[attribute$="value"]eg:a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素//所以可以使用css3实现不同文件给与不同图标，没有css3则我们只可以辛苦用
复制链接

扫一扫