css3之结构性伪类选择器

最新推荐文章于 2023-04-20 16:27:30 发布

打不死滴小强

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量1.5k

点赞数

分类专栏： html5/css相关文章标签： css3 结构选择器结构性伪类选择器

本文链接：https://blog.csdn.net/u012859748/article/details/52611958

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本篇介绍伪类选择器以及伪元素。

1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：

p.left{text-align: left}
 p.rigth{text-align: right}

2、伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。
最常见的伪类选择器：

a:link{ color: #ff6600 } /* 未被访问的链接 */
 a:visited{ color: #87b291 } /* 已被访问的链接 */
 a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */
 a:active{ color: #55b28e } /* 正在被点击的链接 */

3、伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}

4、在CSS中，主要有四个伪元素选择器。
   1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
   3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
   4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器以及伪元素</title>
    <style>
        :root{
            background: #126fb0;
        }
        body{
            background: #ffffff;
        }
        p.aaas{
            text-align: left;
            color: red;
        }
        p.right{
            text-align: right;
            color: green;
        }
        a:link{
            color: #000;
        }
        a:visited{
            color: fuchsia;
        }
        a:hover{
            color :green;
        }
        a:active{
            color: #ff6600;
        }
        p:first-line{
            color: #f60;
        }
        p:first-letter{
            color: green;
            font-size: 24px;
        }
        li{
            list-style: none;
        }
        li:before{
            content:"...";
            color: red;
        }
        li:after{
            content: "__after追加";
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>

<br/>
<a href="index1.html">伪类选择器</a>
<br/>
<p>
        在CSS中，主要有四个伪元素选择器<br/>
        first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
</ul>
</body>
</html>

5、结构性伪类选择器root、not、empty和target

1）、root选择器
root选择器将样式绑定到页面的根元素中。
2）、not选择器
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>not选择器</title>
    <style>
        :root{
            background: #126fb0;
        }
        body *:not(h1){
            background: #fff;
        }
        :empty{
            background: #ff6600;
        }
    </style>
</head>
<body>
<h1>not选择器</h1>
<p>not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器</p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td></td>
        <td>4</td>
    </tr>
    <tr>
            <td>A</td>
        <td>B</td>
        <td>C</td>
        <td></td>
    </tr>
</table>
</body>
</html>

3）、empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4）、target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TARGET</title>
    <style>
        :target{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

6、选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
2）、last-child选择器
last-child单独指定最后一个子元素的的样式。
3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素

7、only-child选择器
only-child选择器，只对唯一的子元素起作用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器first-child、last-child、nth-child和nth-last-child</title>
    <style>
        /*li:first-child{*/
            /*background: #ff6600;*/
        /*}*/
        /*li:last-child{*/
            /*background: green;*/
        /*}*/
        /*li:nth-child(odd){*/
            /*background: red;*/
        /*}*/
        /*li:nth-child(even){*/
            /*background: #ff6600;*/
        /*}*/
        /*li:nth-last-child(odd){*/
            /*background: green;*/
        /*}*/
        /*li:nth-last-child(even){*/
            /*background:gray;*/
        /*}*/
        /*h2:nth-child(odd){*/
            /*color: #ff6600;*/
        /*}*/
        /*h2:nth-child(even){*/
            /*background: #693ada;*/
        /*}*/
        /*h2:nth-of-type(odd){*/
            /*background: #126fb0;*/
        /*}*/
        /*h2:nth-last-of-type(even){*/
            /*background: #f60;*/
        /*}*/
        /*li:nth-child(3n+1){*/
            /*background: #126fb0;*/
        /*}*/
        /*li:nth-child(3n+2){*/
            /*background: #ff6600;*/
        /*}li:nth-child(3n+3){*/
            /*background: #ff1b00;*/
        /*}*/
        /*li:nth-child(4n+3){*/
            /*background: #000000;*/
        /*}*/
        /*li:nth-child(4n+4){*/
            /*background: green;*/
        /*}*/
        li:only-child{
            background: #ff1b00;
        }
    </style>
</head>
<body>
<!--<h1>选择器first-child、last-child、nth-child和nth-last-child</h1>-->
<h1>唯一的</h1>
<ul>
    <li>第一个项目</li>
</ul>


<h1>很多的</h1>
<ul>
    <li>第一个项目</li>
    <li>第二个项目</li>
    <li>第三个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
    <li>第一个项目</li>
</ul>
<!--<div>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>    <h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
    <!--<h2>标题</h2>-->
    <!--<p>内容</p>-->
<!--</div>-->
</body>
</html>