CSS3选择器精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/NUT_fireless/article/details/106557023

CSS3的属性选择器

[attribute*=value] 选择器
如果元素用attribute表示的属性的值中包含用value指定的字符，那么该元素使用这个样式。
设置 class 属性值包含 “test” 的所有 div 元素的背景色：

<!DOCTYPE html>
<html>
<head>
<style> 
div[class*="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

</body>
</html>

[attribute^=value] 选择器
如果元素用attribute表示的属性的值的开头为value指定的字符，那么该元素使用这个样式。
设置 class 属性值以 “test” 开头的所有 div 元素的背景色：

<!DOCTYPE html>
<html>
<head>
<style> 
div[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

</body>
</html>

[attribute$=value] 选择器

如果元素用attribute表示的属性的值的结尾为value指定的字符，那么该元素使用这个样式。
结构性伪类选择器
注意：当value前有‘-’时需要使用‘\’
[id$=\-value]
例子：设置 class 属性值以 “test” 结尾的所有元素的背景色：

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

</body>
</html>

结构性伪类选择器

伪类选择器
伪类选择器是CSS中已经定义好的选择器。常见的有：

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

伪元素选择器
在CSS中，主要有如下四种伪元素选择器：
1.first-line:为某个元素的第一行文字使用样式；
2.first-letter:为某个元素中的文字的首字母或第一个字使用样式；
3.before:在某个元素之前插入一些内容；
4.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>

结构性伪类选择器
root选择器：将样式绑定到页面的根元素中。
not选择器：如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
empty选择器：当元素中内容为空白时使用的样式。
target选择器：targer选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）制定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:targer选择器所设置的样式才会起作用。
例子：

<!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>

first-child和:last-child选择器
first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
nth-child(n)和:nth-last-child(n)选择器
使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或者倒数第2个子元素，这两个选择器就不起作用了。为此，CSS引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-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>