0
点赞
收藏
分享

微信扫一扫

【CSS学习总结】

90哦吼 2022-04-19 阅读 24
html5css

CSS选择器的深入了解

一、属性选择器

前提："E"表示各个标签，"att "指各个属性

1、E[att]

举个例子：如下所示，属性选择器h1[class]对前两行起作用，字体为斜体，颜色为红色，对第三行没有作用。
①代码展示

<!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>
</head>
<style>
    h1[class]{
        color: red;
        font-style: italic;
    }
</style>
<body>
    <h1 class="">西安邮电大学</h1>
    <h1 class="">西安邮电大学</h1>
    <h2 class="">西安邮电大学</h2>
</body>
</html>

②页面展示：
在这里插入图片描述

2、E[att=“val”]

举个例子：如下所示，属性选择器a[class=‘ex1’]只对第二行起作用，而a[class=‘ex3’]只对第三行起作用，二三行都是超链接的默认样式。

①代码展示:

<!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>
</head>
<style>
a[class='ex1']{
    color: red;
}
a[class='ex3']{
    font-size: 25px;
    color: aquamarine;
}
</style>
<body>
    <ul>
        <li ><a href="#" class="ex1">外部链接</a></li>
        <li ><a href="#">内部链接</a></li>
        <li ><a href="#" class="ex3">外部链接</a></li>
        <li ><a href="#">内部链接</a></li>
    </ul>
</body>
</html>

②页面展示：
在这里插入图片描述

3、E[att~=“val”]

**举个例子：如下所示，属性选择器 li[class~=‘zh’] 是用空格隔开的单词,其中一个单词等于zh,如页面展示中， 对一三行的样式起作用，字体颜色、字体大小、字体类型样式都已改变，而三四行就是默认值，无任何改变。

①代码展示:

<!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>
</head>
<style>
    li[class~='zh']{
    font-size: 30px;
    color: aqua;
    font-family: '宋体';
}
</style>
<body>
    <ul>
        <li class="zh xiyou">红楼梦</li>
        <li>西游记</li>
        <li class="zh why">水浒传</li>
        <li>三国演义</li>
    </ul>
</body>
</html>

②页面展示：
在这里插入图片描述

4、E[att^=“val”]

**举个例子：如下所示，属性选择器 input[name^=‘user’] 是将name属性值是以user开头的字符串的input标签的样式进行修改。
正如页面展示所示，一三行的输入框内容样式改变，颜色为红色，而第二行为默认样式，没有任何样式改变。

①代码展示:

<!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>
</head>
<style>
/* 选择具有name属性，并且name属性值是以user开头的input标签 */
input[name^='user']{
    color: red;
}
</style>
<body>
密码: <input type="password" name="userpwd">
<br/><br/>
地址: <input type="text" name="address">
<br/><br/>
年龄:<input type="text" name="userage">
</body>
</html>

②页面展示：
在这里插入图片描述

5、E[att$=“val”]

**举个例子：如下所示，属性选择器 input[name$=‘age’]是将name属性值是以age结尾的字符串的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为紫色。

①代码展示:

<!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>
</head>
<style>
/* 选择具有name属性，并且name属性值是以age结尾的input标签 */
input[name$='age']{
    color: blueviolet;
}
</style>
<body>
    年龄：<input type="text" name="userage">

</body>
</html>

②页面展示：
在这里插入图片描述

6、E[att*=“val”]

*举个例子：如下所示，属性选择器 input[name=‘add’]是将name属性值中包含’add’的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为青色。

①代码展示:

<!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>
</head>
<style>
/* 选择具有name属性，并且name属性值中包含'add'的input标签  */
input[name*='add']{
    color: chartreuse;
}
</style>
<body>
    地址: <input type="text" name="address">
</body>
</html>

②页面展示：
在这里插入图片描述

7、E[att|=“val”]

**举个例子：如下所示，属性选择器input[name|=‘user’]是将name属性值中是以user开头，以’-'分隔的字符串的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为橘色。

①代码展示:

<!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>
</head>
<style>
/* 选择具有name属性，并且name属性值是以user开头，以'-'分隔的字符串的input标签  */
input[name|='user']{
    color: orange;
}
</style>
<body>
    爱好：<input type="text" name="user-hobby">
</body>
</html>

②页面展示：
在这里插入图片描述

二、关系选择器

穿插个小知识点：html中的父元素、子元素、兄弟元素是什么？

html元素指的是从开始标签到结束标签的所有代码，不同的标签之间有包含关系，也有同级关系，举例如下：

<html>
<body>
<p>我是一段文字</p>
<p>我也是一段文字</p>
</body>
</html>

1、包含选择器(E F)

**举个例子：如下所示，包含选择器 (ol li)是选择所有被ol包含的li元素样式进行修改。
正如页面展示所示，li标签样式被改变，字体颜色为红棕色，字体大小也被改变为20px，默认字体为16px。

①代码展示:

<!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>
</head>
<style>
    /* 选择所有被ol包含的li元素 */
    ol li{
            font-size: 20px;
            color: brown;
        }
</style>
<body>
    <ol>
        <li>茅台</li>
        <li>五粮液</li>
        <li>泸州老窖</li>
        <li>西凤酒</li>
    </ol>
</body>
</html>

②页面展示：
在这里插入图片描述

2、子元素选择器(E>F)

**举个例子：如下所示，子元素选择器 (nav>p)是选择nav所包含的所有为p子元素标签进行修改。
正如页面展示所示，p标签样式被改变，字体颜色改为黄绿色。span标签就为默认样式，没有被改变。

①代码展示:

<!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>
</head>
<style>
   /* 选择nav所包含的所有为p子元素标签 */
   nav>p{
            color: yellowgreen;
        }
</style>
<body>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
</body>
</html>

②页面展示：
在这里插入图片描述

3、相邻元素选择器(E+F)

**举个例子：如下所示，相邻元素选择器 (nav+p)是指选择紧贴在nav标签之后的p标签样式进行修改。
正如页面展示所示，紧贴nav标签的p标签样式被改变，字体颜色为红色。相隔的p标签就不行，字体颜色没有被改变。

①代码展示:

<!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>
</head>
<style>
  /* 选择紧贴在nav标签之后的p标签 */
  nav+p{
            color: red;
        }
</style>
<body>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
    <p>西安邮电大学</p>
    <p>西安交通大学</p>
</body>
</html>

②页面展示：
在这里插入图片描述

4、兄弟选择器(E~F)

**举个例子：如下所示，兄弟选择器 (ol~p)是指选择ol之后的所有兄弟标签样式进行修改。
正如页面展示所示，p样式被改变，字体颜色为深黄色，字体大小也被改变为45px。

①代码展示:

<!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>
</head>
<style>
  /* 选择ol之后的所有兄弟标签 */
  ol~p{
            color: gold;
            font-size: 45px;
        }
</style>
<body>
    <ol>
        <li>茅台</li>
        <li>五粮液</li>
        <li>泸州老窖</li>
        <li>西凤酒</li>
    </ol>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
    <p>西安邮电大学</p>
    <aside>
        <p>西北政法大学</p>
    </aside>
    <p>西安交通大学</p>
</body>
</html>

②页面展示：
在这里插入图片描述

举报

相关推荐

CSS学习总结

css前端

CSS学习总结一

cssWebCSS选择器编程语言

CSS样式学习总结

csshtml前端

CSS 总结

pythonword开发语言excel自动化

CSS总结

java开发语言

2022.02.21_HTML+CSS学习总结_HTML基础

csshtml学习

html & css学习第二周总结（下）

html&css学习总结前端开发那些事儿视觉艺术

CSS知识总结

学习笔记饥人谷技术博客

CSS总结2

选择器行内元素块元素Html/CSS前端开发

css知识总结

csscss3javascript
0 条评论