css选择器2——伪类选择器

时间 2019-11-17

标签 css 选择器栏目 CSS 繁體版

原文原文链接

一.伪元素选择器css

1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式。html

例如：css3

p::first-letter{font-size:50px;}

2. E:first-line/E::first-line 设置元素内的第一行的样式。ui

例如：url

p::first-line{color:green;}

3. E:before/E::before在每一个E元素的内容以前插入内容。用来和content属性一块儿使用。spa

例如：htm

a::before{
    content:"点击";
    color:green;
}

4. E:after/E::after在每一个E元素的内容以后插入内容。用来和content属性一块儿使用。对象

例如：blog

a::after{
    content:"诗句";
    color:red;
}

a::after{
    content:url(images/4.jpg);
    color:red;
}

CSS3新增：文档

5. E::selection 设置对象被选择时的颜色。

例如：

p::selection{background:red;}

test2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
    <p>
        锦瑟———李商隐<br><br>
        锦瑟无故五十弦，一弦一柱思华年。<br><br>
        庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br><br>
        沧海月明珠有泪，蓝田日暖玉生烟。<br><br>
        此情可待成追忆？只是当时已惘然。<br><br>
    </p>
    <a href="">搜索</a><br>
</body>
</html>

style2.css:

p::first-letter{font-size:50px;}
p::first-line{color:green;}
a::before{
    content:"点击";
    color:green;
}
a::after{
    content:url(images/4.jpg);
    color:red;
}
p::selection{background:red;}

二. 伪类选择器

1. 结构伪类选择器

1）E:first-child 父元素的第一个子元素E。

例如：

li:first-child{background:red;}

ul>li:first-child{color:red;}

td:first-child{color:red;}

CSS3新增：

2）:root 选择文档的根元素。

例如：

:root{background:red;}

3）E:last-child 最后一个子元素E。

例如：

td:last-child{color:red;}//td的父元素中最后一个元素

4）E:only-child 仅有的一个子元素E。

例如：

li:only-child{color:red;}//li的父元素中只有一个li

5）E:only-of-type 只有一种类型的子元素。

例如：

p:only-of-type{color:green;}//p的父元素中只有一种类型的子元素

6）E:nth-child(n) 匹配父元素的第n个子元素E。

能够直接用数值：好比2

能够用奇数（odd）偶数（even）

能够用公式3n

例如：

tr:nth-child(2){color:red;}

7）E-nth-last-child(n) 匹配父元素的倒数第n个元素E。

例如：

tr:nth-last-child(2){color:red;}

tr:nth-last-child(odd){color:red;}

tr:nth-last-child(even){color:red;}

tr:nth-last-child(3n-1){color:red;}

8）E:first-of-type 匹配同类型中的第一个同级兄弟元素E。

例如：

p:first-of-type{color:red;}//p元素同一级别中的第一个，在同一个父元素下几个p中的第一个

9）E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。

例如：

p:last-of-type{color:green;}

10）E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

例如：

p:nth-of-type(2){color:green;}

11）E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。

例如：

p:nth-last-of-type(2){color:red;}

12）E:empty 匹配没有任何子元素（包括text节点）的元素E。

例如：

div:empty{border: 1px solid;  width:300px;height:200px; }//div中不能有任何内容

test2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
<ul>
    <li>我是ul的子元素1</li>
    <li>我是ul的子元素2
        <ol>
            <li>我是ul的孙元素1</li>
            <li>我是ul的孙元素2</li>
            <li>我是ul的孙元素3</li>
            <li>我是ul的孙元素4</li>
            <li>我是ul的孙元素5</li>
        </ol>
    </li>

    <li>我是ul的子元素3
        <ul>我只有一个子元素
            <li>我是li元素的内容</li>
        </ul>
    </li>
    <li>我是ul的子元素4</li>
</ul><hr>
<div>
    <h2>我是标题1</h2>
    <p>我是段落p1</p>
    <p>我是段落p2</p>
    <p>我是段落p3</p>
    <p>我是段落p4</p>
    <h3>我是标题2</h3>
    <p>我是段落p5</p>
    <p>我是段落p6</p>
    <p>我是段落p7</p>
    <p>我是段落p8</p>
</div>
<div id="div3"></div>
<div>
    <p>
        锦瑟———李商隐<br><br>
        锦瑟无故五十弦，一弦一柱思华年。<br><br>
        庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br><br>
        沧海月明珠有泪，蓝田日暖玉生烟。<br><br>
        此情可待成追忆？只是当时已惘然。<br><br>
    </p>
    <a href="">搜索</a><br>
</div>

<table style="width:400px;height:80px;padding:15px">
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
<a href="#">搜索</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

style2.css:

/*:root{background:red;}*/
/*li:first-child{background:red;}*/
/*ul>li:first-child{color:red;}*/
/*p:first-child{color:red;}*/
/*td:last-child{color:red;}*/
/*li:only-child{color:red;}*/
/*p:only-of-type{color:green;}*/

/*tr:nth-child(2){color:red;}*/

/*tr:nth-last-child(3n-1){color:red;}*/

/*p:first-of-type{color:red;}*/
/*p:last-of-type{color:green;}*/
/*p:nth-of-type(2){color:green;}*/
/*p:nth-last-of-type(2){color:red;}*/
div:empty{border: 1px solid;  width:300px;height:200px; }

2.UI伪类选择器及其余选择器

E:active 向被激活的元素添加样式。

例如：

a:active{background:green;} //当鼠标点击时就处于激活状态

E:hover 当鼠标悬浮在元素上方时，向元素添加样式。

例如：

a:hover{color:red;}

E:link 向未被访问的连接添加样式。

例如：

a:link{color:lightseagreen;}

E:visited 向已被访问的连接添加样式。

例如：

a:visited{color:yellow;}

E:focus 向拥有键盘输入焦点的元素添加样式。

例如：

input:focus{background:yellow;}

E:lang 向带有指定lang属性的元素添加样式

例如：

p:lang(en){color:red;}

CSS3新增：

input:checked 选择每一个被选中的input元素。

例如：

input:checked{width:50px; height: 60px;}//被选中的时候添加样式

input:disabled 选择每一个禁用的input元素。

例如：

input:disabled{background:gray;}//要将表单改为禁用的

input:enabled 选择每一个启用的input元素。

例如：

input:enabled{background:green;}

#E:target 选择当前活动的锚点元素。

例如：

<style type="text/css">
    a:target{color:green;}
</style>

:not(E) 选择E元素以外的每一个元素。

例如：

:not(input){color:yellow;}

text2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
    <style type="text/css">
        a:target{color:green;}
    </style>
</head>
<body>
    <a href="http://www.t" target="_blank">51自学网</a>
        <fieldset>
            <legend>注册用户</legend>
            <p lang="en">
                <input type="text" name="user" id="user" placeholder="帐号" required="">
                <label for="user">帐号</label>
            </p>
            <p>
                <input type="password" name="password" id="password" placeholder="密码">
                <label for="password">密码</label>
            </p>
            <p>
                <label for="tel">电话号码</label>
                <input type="tel" disabled="" name="tel" id="tel" placeholder="电话">
            </p>
            <p>
                <label for="email">电子邮件</label>
                <input type="email" name="email" id="email" placeholder="电子邮箱">
            </p>
            <p>
                <input type="radio" name="fwtk" value=""><span>赞成服务条款：</span><br>
                <input type="radio" name="fwtk" value=""><span>不一样意服务条款：</span><br>
                <a href="">阅读服务条款</a>
            </p>
                <button type="submit" value="注册" title="加入会员">注册用户</button>
        </fieldset>
<a href="#">百度</a>
</body>
</html>

style2.css:

/*a:active{background:green;}*/

/*a:hover{color:red;}*/

/*a:visited{color:yellow;}*/

/*a:link{color:lightseagreen;}*/

/*p:lang(en){color:red;}*/

/*input:checked{width:50px; height: 60px;}*/

/*input:enabled{background:green;}*/

/*input:focus{background:yellow;}*/

/*input:disabled{background:gray;}*/

:not(input){color:yellow;}

other notes:

placeholder属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段得到焦点时消失。

placeholder属性适用于如下的<input>类型：text,search,url,telephone,email以及password。