1.22 CSS3选择器了解

2021-01-23 09:05:54 阅读：303 来源： 互联网

标签：CSS3 color 标签 nth background child 1.22 选择器

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>

5.属性选择器

标签定位属性
=：绝对等于
*=：包含于
^=：以" "开头
$=：以" "结尾

标签：CSS3,color,标签,nth,background,child,1.22,选择器
来源： https://blog.csdn.net/saber_Q7/article/details/113027239

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9