css3选择器

css3选择器

　　在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

　　"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）css3选择器分类如下图所示：

1、基本选择器

基本选择器是CSS中使用最频繁，最基础，也是CSS中最早定义的选择器。如图所示

1-1 通配选择器

*{
    padding:0;
    margin:0;
}

　　“ * ”用来选择所有元素。表示所有元素的内外边距都是0。

1-2 通配符选择器

p{
    height:10px;
    width:10px;
}

　　表示p元素的宽高为10px。

1-3 ID选择器

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title></title>
<style>
    #123{
        width:10px;
        height:10px;
    }
</style>
</head>
<body>
    <div id="123">选择的是这个</div>
    <div>456</div>
</body>
</html>

　　在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不能同时出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上“#”号，如(#id)。

1-4 类选择器

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title></title>
<style>
    .yxz{
        width:10px;
        height:10px;
    }
</style>
</head>
<body>
    <div class="123">abc</div>
    <div>456</div>
</body>
</html>

　　在使用ID选择器之前，需要在HTML文档中给对应的元素设置class属性并设置值，才能找到对应的元素。但与ID选择器不同的是，类选择器在一个页面中可以有多个相同的类名，而ID选择器的ID名在整个页面中只能有一个。在CSS样式中使用类选择器时，需要在属性值的前面加上点号(.)，如(.class)。

1-5 群组选择器

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    h1,h2{
        heigh:10px;
        width:20px;
　　　　　font-size:14px;
}

</style>
</head>
<body>
<h1>123</h1>
<h2>456</h2>
</body>
</html>

　　将具有相同样式的元素分组在一起，每个选择器之间用逗号(,)隔开。表示h1,h2具有相同的样式。

2、层次选择器

　　通过后代、父子、相邻以及通用几种关系选择需要元素。如图所示：

2-1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
　　　　*{
　　　　　　padding:0；
　　　　　　margin:0；

        div p{
            background:orange;
        }
    </style>
</head>
<body>
    <div>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
    </div>
</body>
</html>

　　div和p之间一定要空格隔开。效果图所示：

　　表示被div包含的p标签。

2-2 子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            padding:0;
            margin:0;
        }
        div>p{
            background:orange;
        }
    </style>
</head>
<body>
    <div>
        <p>ppppppppppppppp</p> 
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
    </div>
</body>
</html>

　　效果如图所示：

　　表示选中父元素div下面的子元素p标签。

2-3 相邻兄弟选择器

　　相邻兄弟选择器(E+F)可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            padding:0;
            margin:0;
        }
        h2+p{
            background:orange;
        }
    </style>
</head>
<body>
    <div>
        <p>ppppppppppppppp</p> 
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
    </div>
</body>
</html>

　　效果如图所示：

　　表示h2紧接的第一个p标签，而不是所有的p标签。

2-4 通用兄弟选择器

　　用于选择某元素后面的所有兄弟元素，它们也具有相同的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            padding:0;
            margin:0;
        }
        h2~p{
            background:orange;
        }
    </style>
</head>
<body>
    <div>
        <p>ppppppppppppppp</p> 
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
        <p>ppppppppppppppp</p>
        <h2>h2h2h2h2h2</h2>
        <h2>h2h2h2h2h2h2h2</h2>
        <p>ppppppppppppppp</p>
    </div>
</body>
</html>

　　效果如图所示：

　　表示h2后面的所有p标签。

3、伪类选择器

　　css3中的伪类选择器可以分成5种：动态伪类选择器，目标伪类选择器，UI状态伪类选择器，结构伪类选择器和否定伪类选择器。如图所示：

3-1 动态伪类选择器

　　顾名思义，是发生交互时才体现出来

　　例子：focus获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            background:yellow;
            border:10px solid pink;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

　　效果图

　　当鼠标移动到第二个方框中发生交互效果。

3-2 目标伪类选择器

　　目标伪类选择器“:target”用来匹配文档链接中的URI中某个标识符的目标元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a{
            display:block;
            width:100px;
            height:50px;
            background:red;
            margin:10px auto;
        }
        div{
            width:200px;
            height:100px;
            margin:10px auto;
            text-align: center;
            font-size:60px;
            font-weight: 900;
        }
        div:target{
            /* 当div被锚点连接指向：css背景发生变化 */
            background:orange;
        }
    </style>
</head>
<body>
    <a href="#box1">连接div1</a>
    <a href="#box2">连接div2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>
</html>

　　效果图所示：

　　　当点击“连接div2”时，下方“2”区域发生背景颜色变化。

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

　　主要用于form表单元素上，UI元素的状态一般包括：启用，禁用，选中，未选中等。常用的有：

E:enabled

匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled

匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked

匹配所有用户界面（form表单）中处于选中( 单选、多选 )状态的元素E

E::selection

匹配E元素中被用户选中或处于高亮状态的部分

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            background:pink;
        }
        input:disabled{
            background:blue;
        }
    </style>
</head>
<body>
    <input type="text">
    <br>
    <input type="text" disabled>
    <br>
    <input type="text" disabled>
    <br>
    <input type="text" disabled >
    <br>
    <input type="text">
</body>
</html>

　　效果图

　　粉色区域为可用状态，点击后框内有光标。蓝色区域为不可用状态。

3-4 结构性伪类选择器

　　结构性伪类选择器：( 选择谁选择符就行写谁 )

a：如果子集标签类型一致（类名一致）的情况下：采用的是 child

1 : 选择符:first-child{ }

2 : 选择符:last-child{ }

3 : 选择符:nth-child(val){}

val :

可以是某个数值表示第几个

2n 或者 even 偶数

2n + 1 或者 odd 奇数

4 : 选择符:nth-last-child(){} 倒数第几个

5 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择

b：如果子集合标签类型不一致（类名不一致）的情况下：采用的是 of-type

1 : 选择符:first-of-type{ }

2 : 选择符:last-of-type{ }

3 : 选择符:nth-of-type(val){}

val :

可以是某个数值表示第几个

2n 或者 even 偶数

2n + 1 或者 odd 奇数

4 : 选择符:nth-last-of-type(){} 倒数第几个

5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul:nth-child(2) li:nth-child(3){
            background:orange;
        } 
    </style>
</head>
<body>
    <ul>
        <li>123</li>
        <li>123</li>
    </ul>
    <ul>
        <li>老虎</li>
        <li>老虎</li>
        <li>老虎</li>
    </ul>
</body>
</html>

　　效果图:

　　表示选中的是第二个列表当中的第三个。

3-5 否定伪类选择器

　　否定伪类选择器“:not()”主要用来定位不匹配该选择器的元素。

4、伪元素

　　css3中，规定伪元素由两个冒号开头作为表示。（可能会改变dom结构，创造虚拟dom）

　　常用的两个伪元素“::before”和"::after"。这两个伪类会再选择的元素前或后创建虚拟dom，常和content联用。

　　还有其他伪元素，"::first-line" "::first-letter" " ::selection"。

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before{
    content:"a";
    color:blue;
        }
        p::after{
    content:"b";
    color:red;
        }
    </style>
</head>
<body>
    <p>123</p>
</body>
</html>

　　效果图

　　表示在“123”之前加上了一个蓝色的a，之后加上了一个红色的b。

5、属性选择器

　　通过各种属性给元素添加信息。语法如下：

1: 选择符[属性名] 只要带有当前属性名就会被选中。

2: 选择符[属性名="属性值"] 不仅制定属性名，有指定属性值

3: 选择符[属性名~="属性值"] 属性值为一个词列表，只要包含当前词就会被选中

4: 选择符[属性名^="属性值"] 属性值必须是当前指定的属性值开头的

5：选择符[属性名$="属性值"] 属性值必须是当前指定的属性值结尾的

6: 选择符[属性名*="属性值"] 属性值中只要包含了指定的字符就会被选中

7: 选择符[属性名|="属性值"] 属性值仅是当前指定的属性值

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        em{
            display:inline-block;
            width:16px;
            height:16px;
        }
        li[class="pic"] em{
            height: 10px;
            width: 10px;
            background-color: red;
        }
        li[class="html"] em{
            height: 10px;
            width: 10px;
            background-color: black;
        }
    </style>
</head>
<body>
    <ul>
        <li class="pic">brucebrucebruce.jpg <em></em></li>
        <li class="pic">bruce.png <em></em></li>
        <li class="pic">bruce.gif <em></em></li>
        <li class="html">index.html <em></em></li>
        <li class="html">case.html <em></em></li>
        <li class="txt">txt.doc <em></em></li>
        <li class="html">nihao.html <em></em></li>
    </ul>
</body>
</html>

　　效果图下图所示：

　　表示选中属性名为pic后面的em属性，选中属性名为html后面的em属性。

欢迎补充。

posted on 2020-02-29 17:36 Chkl 阅读(456) 评论(0) 收藏举报

刷新页面返回顶部

css3选择器

公告