css的属性选择器和伪类

注意嵌套规则：

1.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3.li内可以包含div
4.块级元素与块级元素并列、内联元素与内联元素并列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }

    </style>
</head>
<body>

<div class="he">111
    <p class="fr">222
        <div>333</div>
    </p>
    <div>444</div>
</div>


***************************

<div suoning="sb">ddd
         <p>pppp</p>
     </div>
     <p suoning="sb2">ddd2
         <p>pppp2</p>
     </p>
</body>
</html>

3 属性选择器

E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 
 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}

4 伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。

anchor伪类：专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>

补充：

.outer:hover .right{color: red}

before after伪类：

:before    p:before       在每个<p>元素之前插入内容
:after     p:after        在每个<p>元素之后插入内容

 p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:"hello";color:red}
 p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:"hello"；color:red}

用pycharm新建attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p div{
            color: red;
        }
    </style>
</head>
<body>

<div id="outer">
    <p>pppp
        <div>div</div>
    </p>
</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [id]{
            color: red;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div1</div>
<div class="div3">div1</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class]{
            color: red;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div1</div>
<div class="div3">div1</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class="div2"]{
            color: red;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div1</div>
<div class="div3">div1</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        [class="div2"]{-->
<!--            color: red;-->
<!--        }-->
        [smoke] {color: red}
    </style>
</head>
<body>

<div class="div1" smoke="it">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[class="div1"]{
            color: red;
        }
<!--        [smoke] {color: red}-->
    </style>
</head>
<body>

<div class="div1" smoke="it">div1</div>
<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

        .div1{
            font-size: 45px;
        }
        .div2{
            color: blue;
        }
    </style>
</head>
<body>

<div class="div1 div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

<!--        .div1{-->
<!--            font-size: 45px;-->
<!--        }-->
<!--        .div2{-->
<!--            color: blue;-->
<!--        }-->
        [class~="div2"]{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="div1 div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

<!--        .div1{-->
<!--            font-size: 45px;-->
<!--        }-->
<!--        .div2{-->
<!--            color: blue;-->
<!--        }-->
        [class^="div1"]{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="div1 div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

<!--        .div1{-->
<!--            font-size: 45px;-->
<!--        }-->
<!--        .div2{-->
<!--            color: blue;-->
<!--        }-->
        [class^="div1"]{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="div1div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

<!--        .div1{-->
<!--            font-size: 45px;-->
<!--        }-->
<!--        .div2{-->
<!--            color: blue;-->
<!--        }-->
        [class^="div2"]{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="div1 div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改attribute_select_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--        p[class="div1"]{-->
<!--            color: red;-->
<!--        }-->
<!--        [smoke] {color: red}-->

<!--        .div1{-->
<!--            font-size: 45px;-->
<!--        }-->
<!--        .div2{-->
<!--            color: blue;-->
<!--        }-->
        [class*="v1"]{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="div1 div2" smoke="it">div1</div>

<p class="div1">ppp</p>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="id">iddd</div>

</body>
</html>

点击pycharm上面浏览器

修改false_class_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://baidu.com">百度</a>

</body>
</html>

点击pycharm上面浏览器

点击百度

修改false_class_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: green;
        }
    </style>
</head>
<body>

<a href="http://baidu.com">百度</a>

</body>
</html>

点击pycharm上面浏览器、初试红色、放上面黄色、点击绿色、从百度返回变紫色；

点击百度

修改false_class_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: green;
        }
        p:after{
            content: "pp";
        }
    </style>
</head>
<body>

<a href="http://baidu.com">百度</a>

<p>hello p</p>

</body>
</html>

点击pycharm上面浏览器

修改false_class_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: green;
        }
        p:after{
            content: "pp";
        }
        p:before{
            content: "pp";
        }
    </style>
</head>
<body>

<a href="http://baidu.com">百度</a>

<p>hello p</p>

</body>
</html>

点击pycharm上面浏览器

修改false_class_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: green;
        }
        p:after{
            content: "pp";
            color: green;
        }
        p:before{
            content: "pp";
        }
    </style>
</head>
<body>

<a href="http://baidu.com">百度</a>

<p>hello p</p>

</body>
</html>

点击pycharm上面浏览器

发表于 2022-03-12 22:31 深秋、阅读(104) 评论(0) 收藏举报

公告