Duruofu's 个人测试

选择器

元素选择器

根据标签名来选中指定的元素语法：标签名｛｝例子：P{} h1{}

css

<style>
p{
color :red;

}
</style>

id选择器

根据元素ID来选中指定的元素 (ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。) 语法： #id属性值｛｝例子：#box｛｝ #red｛｝

html

<head>
<style>
#red{
    color:red;
}
</style>>
</head>
<body>
<p id="red">这是一段文字</p>
</body>

class选择器（类选择器）

根据class属性来选中指定的元素组 class是一个html的标签属性，和ID相似，但是它可以重复。可以同时为一个元素指定多个class元素。可以解决拿ID选择器不好给多个元素指定样式的弊端，可以通过class给元素分组语法： .class属性值

html


<style>
.red{
        color:red;
    }
</style>>
</head>
<body>
<p class="red">这是一段文字</p>
<p class="red">这是一段文字</p>
</body>

统配选择器

选中页面里所有元素语法：*

css

*{
    color:red;
}

复合选择器

交集选择器：作用：选中复合多个条件的元素语法：选择器1选择器2选择器3选择器N｛｝注意点：如果有元素选择器，必须使用元素选择器开头

html

<head>
<style>
    div.red{
        color:red;
    }
</style>
</head>
<body>
    <div class="red">这里是div</div>
    <P class="red">这里是P标签</P>
</body>

并集选择器

同时选中多个选择器对应的元素语法：选择器1，选择器2，选择器3，选择器N｛｝例子：#bi,h1,p,div{}

html

<head>
<style>
    div，p{
        color:red;
    }
</style>
</head>
<body>
    <div class="red">这里是div</div>
    <P class="red">这里是P标签</P>
</body>

关系选择器

关系描述

父元素： -直接包含子元素的元素叫父元素子元素： —直接被父元素包含的元素叫子元素祖先元素： -直接或间接包含后代元素的元素叫祖先元素 -一个元素的父元素也是它的祖先元素后代元素 -直接或间接被祖先元素包含的元素叫后代元素 -一个元素的子元素也是它的后代元素兄弟元素 -拥有相同父元素的元素是兄弟元素

子元素选择器：

选中指定父元素的子元素语法：父元素>子元素

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        为div的子元素设置一个字体颜色红色
        子元素选择器：选中指定父元素的子元素
        语法：父元素>子元素
        */
        div.box>span{
            color: crimson;
        }
    </style>
</head>
<body>
   
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        
        <span>这里是第一个div外的span标签</span>
    </div>
    
</body>
</html>

后代元素选择器：

选中指定元素的指定后代元素
语法：祖先（空格）后代

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
         后代元素选择器：
         选中指定元素的指定后代元素        
         语法：祖先 （空格）后代
         */
         div span{
             color: crimson;
         }
    </style>
</head>
<body>
  
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        
        <span>这里是第一个div外的span标签</span>
    </div>
    
</body>
</html>

并列标签选择器

选择下一个兄弟

语法：前一个+下一个

选择下方所有的兄弟

语法：兄~弟例子：

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /*
          选择下一个兄弟
          语法：前一个+下一个
          */
          p+span{
              color: crimson;
          }
          /*
          选择下方所有的兄弟
          语法：兄~弟 
           */
           P~span{color: crimson;}
    </style>
</head>
<body>
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        <span>这里是第一个div外的span标签</span>
    </div>
    
</body>
</html>

属性选择器

[属性名]选择含有指定属性的元素 [属性名=属性值]选择含有指定属性值的元素 [属性名^=属性值]选择属性值以指定属性值开头的元素 [属性名$=属性值]选择属性值以指定属性值结尾的元素 [属性名*=属性值]选择属性值含有指定属性值的元素例子：

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        [属性名]选择含有指定属性的元素
        [属性名=属性值]选择含有指定属性值的元素
        [属性名^=属性值]选择属性值以指定属性值开头的元素
        [属性名$=属性值]选择属性值以指定属性值结尾的元素
        [属性名*=属性值]选择属性值含有指定属性值的元素
         */
        p[title]{
            color: crimson;
        }
        p[title=abc]{
            color: crimson;
        }
        p[title^=abc]{
            color: crimson;
        }
    </style>
</head>
<body>
    <h1 title="abc">将进酒</h1>
    <p title="abcde">君不见黄河之水天上来，奔流到海不复回 </p>
	<p title="deabc">君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
	<p>人生得意须尽欢，莫使金樽空对月。</p>
	<p>天生我材必有用，千金散尽还复来。</p>
</body>
</html>

伪类选择器

伪类：不存在的类，特殊的类。用来描述元素的特殊状态。比如：第一个子元素，被点击的元素，鼠标处在上面的元素。伪类一般以：开头

常用的伪类选择器

第一个子元素：first-child 最后一个子元素：last-child 第n个子元素:nth-child(n) n=n是选中除第零个元素之外的所有元素 n=2n或n=even表示偶数元素 n=2n+1或n=odd表示奇数元素
以上几个伪类都是根据所有元素的顺序排列的 :first-of-type :last-of-type :nth-of-type() 这几个和上面三个功能相似，但是是根据同类一元素的顺序进行排列的

否定伪类选择器

:not()去除满足条件的元素示例：

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将ul里第一个li设为红色 */
        /* 第一个子元素 ：first-child*/
        ul>li:first-child{
            color: brown;
        }
        /* 最后一个子元素：last-child */
        ul>li:last-child{
            color: red;
        }
        /* 
        第n个子元素:nth-child(n) 
        n=n是选中除第零个元素之外的所有元素
        n=2n或n=even表示偶数元素
        n=2n+1或n=odd表示奇数元素        */
        ul>li:nth-child(1){
            color: red;
        }
        /* 以上几个伪类都是根据所有元素的顺序排列的 */
        :first-of-type
        :last-of-type
        :nth-of-type()
        /* 这几个和上面三个功能相似，但是是根据同类一元素的顺序进行排列的 */
         /* 否定伪类选择器 */
        ul>li:not(:nth-child(3)){
            color: seagreen;
        }
    </style> 
</head>
<body>
    <ul>
        <span>第一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

a元素的伪类（超链接）

超链接可以分为特殊状态： 1.访问过的超链接 2.没有访问过的超链接：link 表示没有访问过的链接（正常的链接）（a独有） :visited表示是访问过的链接（a独有）由于隐私原因，这个伪类只能修改链接的颜色，不能修改其他字体大小等属性：hover表示鼠标移入的状态 :active表示鼠标点击

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       a:link{
           color: seagreen;
       }
       /* :link表示没访问过的链接 */
       a:visited{
           color: sienna;
       }
       /* :visited表示是访问过的链接 
       由于隐私原因，这个伪类只能修改链接的颜色，不能修改其他字体大小等属性*/
       /* ：hover表示鼠标移入的状态 */
       a:hover{
           color: skyblue;
           font-size: 50px;
       }
       /* :active表示鼠标点击 */
       a:active{
           color: springgreen;
       }
    </style>
</head>
<body>
    <a href="http://www.baibu.com">baidu（访问过）</a>
    <br>
    <a href="http://www.baidu123.com">baidu123（没访问过）</a>
</body>
</html>

伪元素

伪元素：不真实存在的元素，特殊的位置的元素。伪元素使用::开头 ::first-letter表示第一个字母（字符） ::first-line表示第一行 ::selection表示选中的文本

::before表示元素开始的位置 ::after表示元素结束的位置 -->必须配合属性content来使用这两个应用很多，是重点内容例子：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        P{
            font-size: 20px;
        }
        /* ::first-letter表示第一个字母（字符） */
        p::first-letter{
            font-size: 50px;
        }
        /* ::first-line表示第一行 */
        p::first-line{
            font-size: 50px;
        }
        /* p::selection表示选中的文本 */
        p::selection{
            background-color: springgreen;
        }
        div::before{
            content: "123";
            color: tan;
        }
        div::after{
            content: "hh";
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello ,how are you.</div>
    <p>这是一个段落</p>
</body>
</html>

选择器 ​

元素选择器 ​

id选择器 ​

class选择器（类选择器） ​

统配选择器 ​

复合选择器 ​

并集选择器 ​

关系选择器 ​

关系描述 ​

子元素选择器： ​

后代元素选择器： ​

并列标签选择器 ​

选择下一个兄弟 ​

选择下方所有的兄弟 ​

属性选择器 ​

伪类选择器 ​

常用的伪类选择器 ​

否定伪类选择器 ​

a元素的伪类（超链接） ​

伪元素 ​

选择器

元素选择器

id选择器

class选择器（类选择器）

统配选择器

复合选择器

并集选择器

关系选择器

关系描述

子元素选择器：

后代元素选择器：

并列标签选择器

选择下一个兄弟

选择下方所有的兄弟

属性选择器

伪类选择器

常用的伪类选择器

否定伪类选择器

a元素的伪类（超链接）

伪元素