1.22 CSS3选择器了解

最新推荐文章于 2022-07-19 10:04:13 发布

Bug制造者_moyi

最新推荐文章于 2022-07-19 10:04:13 发布

阅读量116

点赞数

分类专栏： HTML5 CSS3 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/saber_Q7/article/details/113027239

版权

CSS3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

CSS3学习

Cascading Style Sheet（层叠样式表）
发展史
- css2.0:div+css,html+css结构分离
- css2.1:浮动,定位
- css3.0:圆角，阴影，动画（兼容性）

1：三种导入方式

行内样式
内部样式

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--三种样式的优先级：就近原则-->
<style>
    /*内部样式*/
    h1{
        color: yellow;
    }
    </style>
<!--外部样式-->
    <link rel="stylesheet" href="css文件/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: green">万般皆下品，唯有读书高</h1>
</body>
</html>

外部样式拓展：

链接式：html文件
```
<link rel="stylesheet" href="路径">
```
导入式：(css2.1)
```
@import url("路径");
```

2：选择器

选择器：选择页面上某一块或类的元素
css选择器（重难点）

选择器{

声明1；

声明2；

}

2.1:三种选择器

标签选择器：会选择页面内所有相同标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*标签选择：会选择页面内所有相同标签*/
        h1{color: #ff3cfc}
        p{color: #ff9f32}
    </style>
</head>
<body>
<h1>万般皆下品</h1>
<h1>唯有读书高</h1>
<p>唯有读书高</p>
</body>
</html>

类选择器：.加类名，可独立控制标签，可反复使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*类选择器：.加类名，可独立控制标签，可反复使用*/
        .西巴{color: #ff3cfc}
        .阿{color: #ff9f32}
    </style>
</head>
<!--引用-->
<body>
<h1 class="西巴">万般皆下品</h1>
<h1 class="阿">唯有读书高</h1>
<p class="西巴">唯有读书高</p>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*id选择器：#号加上id名 必须唯一*/
        #xiba{
            color: #14681a;
        }
    </style>
</head>
<body>
<h1 id="xiba">读书破万卷</h1>
</body>
</html>

2.2:优先级

id选择器>类选择器>标签选择器

3：层次选择器

后代选择器：在某个元素后面的相同标签

/*后代选择器*/
     body p{
         background-color: #26ff1a;
  }

子选择器：元素都的一个相同标签，>号隔开表示

/*子选择器*/
        body>p{
            background-color: #26ff1a;
        }

相邻兄弟选择器：下级一个，对下不对上，+表示

/*相邻兄弟选择器*/
        .axi+p{
            background-color: #26ff1a;
        }

通用选择器：对下级所有相同标签有效，~表示

/*通用选择器*/
        .axi~p{
            background-color: #26ff1a;
        }

注意：以上都是style标签中的代码全部代码为下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

    </style>
</head>
<body>
<p>p0</p>
<p class="axi">p1</p>
<p>p2</p>
<ul>
    <li>
        <p>p3</p>
    </li>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>

4.结构伪类选择器

:(冒号)表示，定位更加精准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*ul li:定位元素*/
        /*first/last首尾*/
        ul li:first-child{
            background-color: #82fff7;
        }
        ul li:last-child{
            background-color: #82fff7;
        }
        /*nth父类，*/
        p:nth-child(1){
            background-color: #14681a;
        }
        /*nth-child只能是p标签，不是将不显示*/
        p:nth-child(3){
            background-color: #feff22;
        }
        /*在父类下选择p标签的第一个元素（只能是p元素）*/
        p:nth-of-type(1){
            background-color: #ff3cfc;
        }
    </style>
</head>
<body>
<h1>和</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>
</body>
</html>