三、HTML+CSS

标签：匹配 attr val lanlllll 元素 HTML 选择器 CSS

HTML和CSS

1.选择器，css属性

/*注释*/在css3注释的使用

p{
    font-size2px；设置字体大小
    color：red；设置字体颜色
}

2.CSS引入方式

1.行内样式

在HTML标签中使用style属性

2.内部样式

在页面中使用style标签

3.外部样式

需要创建.css文件，使用链接式或导入式引入。

外部样式，链接式引入
<link href=“css/index.css" rel="stylesheet"/>
<style>
    /*外部样式，导入式引入*/
   @impor url（"css/index.css");
 </style>

3.选择器

一、基本选择器

1.标签选择器

使用HTML标签

2.类选择器

使用HTML标签中class属性并且使用.操作符

<style type="text/css">
        .tt{
            color: red;
        }
</style>

3.ID选择器

使用HTML标签中id属性并使用#操作符（唯一）

<style type="text/css">
        #tt{
            color: red;
        }
</style>
<body>
    <a id="tt">baifbeu</a>
</body>

4.全局选择器

使用*操作符(全局选择器)

<style type="text/css">
        *{
            color: red;
        }
</style>

全部改变

二、层次选择器

1.后代选择器E F

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        ul li{
            color: red;
        }
    </style>
    <body>
    <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

ul是父级li是子级，子级全变

2.子选择器E>F

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        body>ul{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

3.相邻兄弟选择器E+F

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    li+.tt{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li class="tt">lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

必须紧挨着

不然没效果

4.通用兄弟选择器 E~F

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    li~li{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li class="tt">lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

相同级别第一个不选中，其余全选中

三、结构伪类选择器

1.E:first-child

作为父元素的第一个子元素的元素E

2.E:last-child

作为父元素的最后一个子元素的元素E

3.E F:nth-child(n)

选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

4.E:first-of-type

选择父元素内具有指定类型的第一个E元素

5.E:last-of-type

选择父元素内具有指定类型的最后一个E元素

6.E F:nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

一般用后三个,指定必须是这个元素才开始计数

前三个没有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    ul li:nth-of-type(6){
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li >lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

四、属性选择器

1.E[attr]

选择匹配具有属性attr的E元素

2.E[attr=val]

选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

3.E[attr=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

4.E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

5.E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

标签：匹配,attr,val,lanlllll,元素,HTML,选择器,CSS
From： https://blog.csdn.net/QAZ412803/article/details/141819180