学习java 第十三天_java属性选择器。-CSDN博客

本文链接：https://blog.csdn.net/nmwxhy/article/details/124132869

CSS3

什么是CSS

Cascading Style Sheet 层叠级样式表

CSS：表现（美化网页）

优势：

1、内容和表现分离

2、网页机构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录

CSS的3种导入方式

1、行内样式：<h1 style = "color : red;”>标签</h1>

2、内部样式：<style>

h1{color : red;}

</style>

3、外部样式：在css文件中设置h1{color : red;}

外部样式导入

链接式：link （推荐）

导入式：@import （必须放在style标签中）

优先级：行内样式、内部样式、外部样式遵循 就近原则

选择器（重点）

作用：选择页面上的某一个或者某一类元素

1 - 基本选择器

1、标签选择器(标签名称{})

会选择到页面上所有的这个标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>标题</h1>

</body>
</html>
2、类选择器（.class名称{}）

可以多个标签归类，相当于是同一个class 可以复用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .t1{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="t1">标题</h1>

</body>
</html>
3、ID选择器（#id名称{}）

不能多个归类！！！

必须保证全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #i1{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="i1">标题</h1>

</body>
</html>
优先级：不遵循就近原则---->ID选择器 > 类选择器 > 标签选择器

2 - 层次选择器

1、后代选择器：在某个元素的后面
body p{
        background-color: #19cdd3;
    }
2、子选择器：一代
body>p{
        background-color: #19cdd3;
    }
3、相邻兄弟选择器 ：同辈相邻一个（向下）
.active + p{
        background: #19cdd3;
    }

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
4、通用选择器：当前选中元素的向下的所有兄弟元素
.active~p{
        background: #19cdd3;
    }

3 - 结构伪类选择器

伪类：条件

<style>
     /* ul的第一个子元素*/
    ul li:first-child{
        background: #35d5b1;
    }
      /* ul的最后一个子元素*/
    ul li:last-child{
        background: #bea14e;
    }
 </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>

/*选中p的父级的第一个子元素，并且是当前元素才生效*/
p:nth-child(1){
 background: #bea14e;
}

/*选中父级的第一个p类型元素*/
p:nth-of-type(1){
 background: #bea14e;
}

4 - 属性选择器（常用）

a[ 属性 ]{}

存在id属性的元素： a[ id ]{}

id=first的元素： a[ id = first ]{}

class中有links的元素： a [ class *= links ]{}

选中href中以http开头的元素： a[ href ^=http ]{}

选中href中以jpg结尾的元素： a[ href $=jpg ]{}

★ =绝对等于

★ *= 包含这个属性

★ ^=以这个开头

★ $=以这个结尾