文档章节

CSS选择器

我是偶哦
 我是偶哦
发布于 2016/05/26 19:08
字数 1083
阅读 47
收藏 3

一、属性选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*包含myid属性*/
        div[myid]{
            color:red;
        }
        /*包含id属性,且值为1*/
        div[id="1"]{
            color: blue;
        }
        /*包含id属性,且属性值包含2,2需要以空格和其他值分离*/
        div[id~="2"]{
            color:yellow;
        }
        /*以3开头,且以 - 作为连接符 */
        div[id|="3"]{
            color:green;
        }
        /*以4作为开头*/
        div[id^="4"]{
            color:grey;
        }
        /*以5位结尾*/
        div[id$="5"]{
            color:violet;
        }
        /*包含6*/
        div[id*="6"]{
            color: orange;
        }
    </style>
</head>
<body>
    <div myid> this is red</div>
    <div id="1">this is blue</div>
    <div id="s 2 sf">this is yellow</div>
    <div id="3-start">this is green</div>
    <div id="4dfg d">this is grey</div>
    <div id="end5">this is violet</div>
    <div id="sf6fafd">this is orange</div>
</body>
</html>

 

二、结构伪类选择器

    1. E:root

        选择匹配E所在文档的根元素,在HTML中,根元素就是html

    2. E:nth-child(n)   

    选择其父亲元素中第n个孩子位置的元素,然后判断匹不匹配E,匹配选择,否则不选中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a[class="1"]:nth-child(2){
            color: red;
        }
        a[class="3"]:nth-child(3){
            color: red;
        }

    </style>
</head>
<body>

    <div>
        <a class="1">1</a>
        <a class="1">red</a>
        <a class="2">1</a>
    </div>
    <div>
        <div class="3">1</div>
        <a class="3">1</a>
        <a class="3">red</a>
        <a class="4">1</a>
    </div>
</body>
</html>

    3. E:nth-last-child(n)

        原理同上一个,只不过n是倒着数的。

    4. E:nth-of-type(n)

        选择在其父元素第n个匹配E的子元素,如存在选中,不存在则不执行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*找到匹配元素的父亲,查找第n个为a[class="5"]的标签并选中,否则不执行*/
        a[class="5"]:nth-of-type(2){
            color:red;
        }
        /*此处不存在三个<a class="7">的元素,所以颜色不会改变*/
        a[class="7"]:nth-of-type(3){
            color:red;
        }

    </style>
</head>
<body>
    <div>
        <div class="5">1</div>
        <a class="5">1</a>
        <a class="5">red</a>
        <a class="6">1</a>
    </div>
    <div>
        <div class="7">1</div>
        <a class="7">1</a>
        <a class="7">1</a>
        <a class="8">not red</a>
    </div>
</body>
</html>

    5. E:nth-last-of-type(n)

        原理同上,n是倒着数

    6. E:last-child

        选择E的父亲元素的最后一个孩子元素,如果匹配E,则选中,否则不执行

    7: E:first-of-type

        选择在其父亲元素中匹配E的第一个同类型的子元素,同E:nth-of-type(1)

    8 E:last-of-type

        选择在其父亲元素中匹配E的最后一个同类型的子元素,同E:nth-last-of-type(1),注意其同E:last-child的区别。

    9 E:only-child

        选择其父亲元素只包含一个子元素,且匹配E的子元素,否则不执行选择。

    10 E:only-of-type

        选择其父元素自包含唯一一个匹配E的子元素(可以有多个孩子元素,但只有一个能匹配E,否则不执行选择)

    11 E:empty

        匹配E,且该元素不包含子节点,标签内的文本也属于子节点。

 

三、UI伪类选择器

UI伪类选择器只有当选中元素处于某种状态下时才起作用,想必大家从字面就能看出来,就不过多解释了。

  1. E:hover
  2. E:active
  3. E:focus
  4. E:enabled
  5. E:disabled
  6. E:read-only
  7. E:read-write
  8. E:checked
  9. E:default
  10. E:indeterminate
  11. E:selection

 

四、其他选择器 

    1. E~F(兄弟选择器)

        选中所有匹配F且位于E元素的后面的元素(E和F应该是兄弟关系)

        div~p 只匹配<p>3<p>

<div>
    <p>1</p>
</div>
<div>
    <p>2</p>
</div>
<p>3</p>

  2. E>F(子选择器)

如果.class1>.class2>.class3改为.class1>.class3是无法使字体变色,> 只能选取子节点,而不是后代节点。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .class1>.class2>.class3{
            color:red;
        }
    </style>
</head>
<body>
<div class="class1">
    <div class="class2">
        <div class="class3">red</div>
    </div>
</div>
</body>
</html>

 

  3 E:not(G)

        匹配E且不匹配G,G是一个简单过滤器,不能够使用复合过滤器。

   4 E:target

        目标伪类选择器。选择匹配E的所有元素,且匹配元素被相关URL指向,该选择器是动态选择器,只有当URL指向该元素时,样式才能够有效。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div[class="red"]:target{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id ="1" class="red">haha</div>
    <div id="2" class="red">hsdf</div>
</body>
</html>

结果如下,注意URL和变色情况

© 著作权归作者所有

我是偶哦
粉丝 6
博文 32
码字总数 21607
作品 0
深圳
私信 提问

暂无文章

python学习10.04:Python list列表使用技巧及注意事项

前面章节介绍了很多关于 list 列表的操作函数,细心的读者可能会发现,有很多操作函数的功能非常相似。例如,增加元素功能的函数有 append() 和 extend(),删除元素功能的有 clear()、 remo...

太空堡垒185
32分钟前
4
0
新手插画学习的方法?教你如何自学?

插画学习的方法?教你如何自学? 从小喜欢画一些漫画头像随笔画,但是其实没有基础。个人偏好小清新手绘风的插画(如下图),每每看到都希望自己能画出这样的作品。 我其实很想说画这种美术功...

huihuajiaocheng
37分钟前
5
0
面试题

1、实现clone(); 涉及知识点: 1)、typeof 判断类型 2)、精确的判断类型:因为type null是object,type []是object,无法通过typeof来达到精确的判断 obj.toString()的结果和Object.prototyp...

gtandsn
48分钟前
5
0
CentOS 7 部署 tesseract-ocr

官方地址 github yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/ 若提示 yum-config-manager: command not found 执行以......

阿白
49分钟前
3
0
JAVA比较器中comparator的使用

一个专用的比较器Comparator Comparator是一个专用的比较器,当一个不支持自比较或者自比较函数不能满足要求时,可写一个比较器来完成两个对象之间大小的比较。Comparator体现了一种策略模式...

daxiongdi
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部