web前端 --- CSS（1）-- 选择器

企业开发 2023-06-05 22:53:50 阅读次数: 0

CSS（Cascade Style Sheet） --- 级联样式表（1）

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

属性名：修饰对象的属性（样式）
属性值：样式的取值

1、书写CSS

  • 行内样式：【不推荐使用】
  • 页面样式：（内联样式）
  • 外联样式：【推荐使用】

例：

<!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>css书写样式</title>

    <style>
        @import url();/* 在html中也可写入import,只不过外部必须添加style标签 */
    </style>

    <!-- 使用link标签，引入需要的css文件 -->
    <link rel="stylesheet" href="css/a.css">
    <!-- rel不可省略，类名必须为stylesheet，表示引入的为层叠样式表。href：路径 -->

</head>
<body>
    <div style="color:red;font-size: 20px;">这是一个div</div>
    <!-- 行内样式，优先级高，绑在标签上一般无法被覆盖。优点：该标签独一无二；缺点：批量修改较为麻烦 -->
    <!-- style：当前标签的样式. -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</body>
</html>

2、CSS选择器

（1）基本选择器

  • id选择器：通过标签的id名称来选择标签  （# id）
  • 类选择器：class选择器，选择一个类别  （.classname）
  • 标签选择器：tagname直接选择标签
  • 逗号选择器：复合选择器
  • 通配符（*）选择器：匹配所有标签

例：

<!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>css的基本选择器</title>
    <style>
        *{
            /* 通配符选择器（*）：匹配所有标签 */
            margin: 0;
            padding: 0;
            /* 向左无空格。适合通用设置，不适合独立设置 */
        }
        #box{
            width: 200px;
            height: 100px;
            border: 1px solid rgb(237, 20, 20);
        }
        .msg{
            width: 100px;
            height: 50px;
            border: 2px solid blue;
        }
        .msg-2{
            border: 3px solid rebeccapurple;
        }
        ul,ol{
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>id选择器</h1>
    <div id="box"></div>
    <!-- 有时id不可复用，所以一般不可重复添加id，id一般适合页面中独一无二的，例如：搜索框 -->

    <h1>类选择器</h1>
    <div class="msg"></div>
    <div class="msg"></div>
    <div class="msg msg-2"></div>
    <!-- css是少数允许用中划线命名的技术（驼峰法） -->
    <div class="msg"></div>
    <!-- 类选择器：class选择器。允许重复；允许出现多个 -->

    <h1>标签选择器，逗号选择器</h1>
    <ul>
        <li>国内新闻1</li>
        <li>国内新闻2</li>
        <li>国内新闻3</li>
        <li>国内新闻4</li>
        <li>国内新闻5</li>
    </ul>

    <ol>
        <li>国外新闻1</li>
        <li>国外新闻2</li>
        <li>国外新闻3</li>
        <li>国外新闻4</li>
        <li>国外新闻5</li>
    </ol>

</body>
</html>

（2）包含选择器：

  • 子代选择器：（>）父子关系
  • 后代选择器：（空格）后代所有
<!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>包含选择器</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        ul.news{
            /* 选择其中的ul */
            border: 1px solid red;
            width: 200px;
            min-height: 50px;
        }
        ul.news>li{
            /* 子代选择器 */
            height: 50px;
            width: 200px;
            border: 1px solid red;
        }
        ul.news li{
            /* 后代选择器 */
            height: 50px;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <ul class="news">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <ul>
            <li>wishing1</li>
            <li>wishing2</li>
            <li>wishing3</li>
        </ul>
    </ul>
    <!-- 一般常见复合元素出现在类选择器和复合选择器中。 -->
    <div class="news"></div>
</body>

</html>
@charset "utf-8";
html {
  background-color: #fff;
  color: #000;
  font-size: 12px
}

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, figure, form, fieldset, legend, input, textarea, button, p, blockquote, th, td, pre, xmp {
  margin: 0;
  padding: 0
}

body, input, textarea, button, select, pre, xmp, tt, code, kbd, samp {
  line-height: 1.5;
  font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
}

h1, h2, h3, h4, h5, h6, small, big, input, textarea, button, select {
  font-size: 100%
}

h1, h2, h3, h4, h5, h6 {
  font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
}

h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: normal
}

address, cite, dfn, em, i, optgroup, var {
  font-style: normal
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left
}

caption, th {
  text-align: inherit
}

ul, ol, menu {
  list-style: none
}

fieldset, img {
  border: 0
}

img, object, input, textarea, button, select {
  vertical-align: middle
}

article, aside, footer, header, section, nav, figure, figcaption, hgroup, details, menu {
  display: block
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "\0020"
}

textarea {
  overflow: auto;
  resize: vertical
}

input, textarea, button, select, a {
  outline: 0 none;
  border: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0
}

mark {
  background-color: transparent
}

a, ins, s, u, del {
  text-decoration: none
}

sup, sub {
  vertical-align: baseline
}

html {
  overflow-x: hidden;
  height: 100%;
  font-size: 50px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
  color: #333;
  font-size: .28em;
  line-height: 1;
  -webkit-text-size-adjust: none;
}

hr {
  height: .02rem;
  margin: .1rem 0;
  border: medium none;
  border-top: .02rem solid #cacaca;
}

a {
  color: #25a4bb;
  text-decoration: none;
}

（3）属性选择器：根据元素的属性以及属性值来选择元素

书写方式：

  • []
  • [属性]
  • [属性=“xxx”]
  • [属性*="xxx"]
  • [属性^="xxx"]
  • [属性$="xxx"]
  • ......

例：

<!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>css属性选择器</title>
    <style>
        /* [title]{
            color: red;
        } */
        /* div [title]{
            color: red;
        } 
        仅筛选出含div标签的title属性
        */
        /* div[title=" this is a title"]{
            color: #FF0000;
        } 
        筛选出中title在div标签中为指定内容的标签
        */

        /* 前三个用的较多 */

        /* div[title^="12"]{
            color: aqua;
        } 
        筛选出title属性在div标签中以指定内容开头的标签
        */
        /* div[title$=67]{
            color: chocolate;
        }
        筛选出title属性在div标签中以指定内容结尾的标签 
        */

    </style>
</head>
<body>
    <div title=" this is a title">123456</div>
    <div title="1234567">123456</div>
    <div>123456</div>
    <div>123456</div>
    <div id="box">123456</div>

    <p title>有title</p>
    <p>无title</p>
</body>
</html>

（4）伪类选择器：添加选择器的特殊效果

（最先出现是为了装饰a标签诞生的）

  • anchor伪类
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

例：

<!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>伪类选择器</title>
    <style>
        .content{
            color:red;
        }
        a:link{
            color: aqua;
            text-decoration: none;
            /* 默认显示 */
        }
        a:hover{
            color: mediumaquamarine;
            text-decoration: underline;
            font-size: 21px;/* 不建议 */
            /* 光标移动到字符的显示 */
        }
        a:active{
            color: green;
            /* 光标点击字符未松开 */
        }
        a:visited{
            color: blueviolet;
            /* 光标点击字符后的显示 */
        }

        input:focus{
            background-color: brown;
        }

    </style>
</head>
<body>
    <div class="content">
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <!-- a标签不会继承父类的样式，需单独设置样式 -->

    </div>

    <input type="text" name="" id="">

</body>
</html>

（5）兄弟选择器：+和~

  • +选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
  • ~选择器：查找某一个指定元素的后面的所有兄弟结点。
<!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>选择器</title>
    <link rel="stylesheet" href="css/d.css">
</head>
<body>
    <h1>+选择器</h1>
    <div>
        <p>1234567</p>
        <p class="box">1234567</p>
        <!-- <div>1234567</div> -->
        <p>1234567</p>
        <p>1234567</p>
    </div>

    <h1>~选择器</h1>
    <div>
        <P>567890</P>
        <P class="bax">567890</P>
        <P>567890</P>
        <P>567890</P>
    </div>
</body>
</html>
p.box{
    color: saddlebrown;
}
.box + p{
    color: crimson;
    /* +表示与下一个p标签，当下一个是别的标签时，无法选中 */
}
.bax ~ p{
    color: darkmagenta;
    /* 表示.bax后面所有所有p标签都被选中 */
}

（6）伪元素选择器：（::）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

例1：

<!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>伪类选择器</title>
    <style>
        p::first-letter{
            text-transform: uppercase;
        }
        p::first-line{
            color: brown;
        }
        ul.news>li:first-child{
            color: red;
            /* 第一个子元素，若第一个元素的类型不是li，则无法选中*/
        }
        ul.news>li:last-child{
            color: aqua;
        }
        ul.news>li:first-of-type{
            color: blueviolet;
            /* 第一个类型为li的子元素 */
        }
        .new>li:nth-child(1){
            color: #423232;
        }

        ::placeholder{
            color: coral;
        }
        /* :root{
            选择文档的根元素，默认为根标签。与html{}等价
        } */
        ::selection{
            /* 用于已选取的颜色部分 */
            color: mediumaquamarine;
        }
    </style>
</head>
<body>
    <p>this is a book
        <ul class="news">
            <p>第一个子元素</p>
            <li>12345</li>
            <li>12345</li>
            <li>12345</li>
            <li>12345</li>
        </ul>
    </p>

    <p>Cobalt Strike是一款超级好用的渗透测试工具，拥有多种协议主机上线方式，集成了提权，凭据导出，端口转发，socket代理，office攻击，文件捆绑，钓鱼等多种功能。同时，Cobalt Strike还可以调用Mimikatz等其他知名工具，因此广受技术大佬的喜爱。</p>

    <p>
        <input type="text" placeholder="输入用户名称" id="">
    </p>

    <p>
        <textarea placeholder="请输入建议或意见" id="" cols="30" rows="10"></textarea>
    </p>
</body>
</html>

​

例2：

<!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>伪元素选择器</title>     
    <link rel="stylesheet" href="css/e.css">
</head>
<body>
    <div class="box"></div>
    <div></div>
    <div></div>
</body>
</html>
.box{
    width: 100px;
    height: 200px;
    border: 1px solid red;
}
.box::before{
    content: "1"; 
    /* 将行元素变成块元素 */
    display: block;/* block：块元素。inline：行内元素 */
    height: 200px;
    width: 50px;
    background-color: aqua;
    float: left;

    border-radius: 50%;
    /* 圆 */
}
.box::after{
    display: block;
    content: '2';
    background-color: blue;
    height: 200px;
    width: 50px;
    float: left;
    border-radius: 50%;
}

猜你喜欢

转载自blog.csdn.net/weixin_62443409/article/details/130318228
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022