html-css选择器

最新推荐文章于 2022-08-17 23:05:20 发布

一个程序员罢了

最新推荐文章于 2022-08-17 23:05:20 发布

阅读量330

点赞数

分类专栏： html初学笔记文章标签： css html css3

本文链接：https://blog.csdn.net/z_zsx/article/details/124673530

版权

html初学笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的各种选择器，包括标签选择器、类选择器、ID选择器、后代选择器、子选择器、直接相邻选择器、间接相邻选择器、属性选择器、公共选择器、通配符选择器和伪类与伪对象选择器。通过实例展示了它们在HTML元素样式的控制中的使用，阐述了不同选择器的优先级和应用场景，帮助理解CSS选择器在网页样式设计中的重要作用。

摘要由CSDN通过智能技术生成

一、什么是css？

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 中

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

html 在一个网页中负责的事情是一个页面的结构

css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

数据样式一般有行内标签、内部样式与外部样式

二、选择器

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>Document</title>
    <link rel="stylesheet" type="text/css" href="/css_外部样式.css"/>
    <style>
        /*内部样式*/
        /* 标签选择器 ，对所有该标签均起作用*/
        h2{
            color: blue;
        }
    </style>
</head>
<body>
    <h2>第二标题</h2>
    <h2>第二标题2</h2>
</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>Document</title>
    <link rel="stylesheet" type="text/css" href="/css_外部样式.css"/>
    <style>
        /* 类选择器 优先级高于标签选择器 会覆盖掉标签选择器的内容，但是类内没有的依旧按标签来*/
        .a001{
            color: rgb(86, 20, 20);
            font-size: 33px;
        }
        /* 标签选择器 ，对所有该标签均起作用*/
        p{
            color: rgb(192, 161, 161);
            font-size: 66px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <p>北风卷地白草折</p>
    <p>胡天八月即飞雪</p>
    <p class="a001">忽如一夜春风来</p>
    <p class="a001">千树万树梨花开</p>
</body>
</html>

3、id选择器

优先级更高，且唯一

<!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>
    <link rel="stylesheet" type="text/css" href="/css_外部样式.css"/>
    <style>
        /* 类选择器 优先级高于标签选择器 会覆盖掉标签选择器的内容，但是类内没有的依旧按标签来*/
        .a001{
            color: rgb(86, 20, 20);
            font-size: 33px;
        }
        /* id选择器 */
        #san{
            color: rgb(194, 19, 19);
        }
        #hu{
            color: rgb(229, 120, 120);
        }
        /* 标签选择器 ，对所有该标签均起作用*/
        p{
            color: rgb(192, 161, 161);
            font-size: 66px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <p>北风卷地白草折</p>
    <p>胡天八月即飞雪</p>
    <p class="a001">忽如一夜春风来</p>
    <p class="a001">千树万树梨花开</p>
    <p class="a001" id="san">散入珠帘湿罗幕</p>
    <p class="a001" id="hu">狐裘不暖锦衾薄</p>
</body>
</html>

4、后代选择器

选择一个标签的所有标签后代，无论间接还是直接

<!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>
    <style>
        /* 选择的是ul中所有的a标签 */
       ul a{
        text-decoration: line-through;
       }
    </style>
</head>
<body>
    <a href="">aaa</a>
    <ul>
        <a href="">bbb</a>
        <a href="">ccc</a>
        <li><span><a href="">ddd</a></span></li>
        <li><span><a href="">eee</a></span></li>
    </ul>
</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>Document</title>
    <style>
        /* 选择的是ul下直接连接的a标签，不包括更下级中的a标签 */
       ul>a{
        text-decoration: line-through;
       }
    </style>
</head>
<body>
    <a href="">aaa</a>
    <ul>
        <a href="">bbb</a>
        <a href="">ccc</a>
        <li><span><a href="">ddd</a></span></li>
        <li><span><a href="">eee</a></span></li>
    </ul>
</body>
</html>

6、直接相邻选择器

从上向下直接相邻的

<!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>
    <style>
        /* 直接相邻选择器，从上向下直接相邻的 */
            #two+p{
                color: rgb(194, 185, 212);
                background-color: blue;
            }
    </style>
</head>

<body>
    <span>
        <p>1</p>
        <p id="two">2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </span>
</body>

</html>

6、间接相邻选择器

从上向下的所有同一级

<!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>
    <style>
        /* 间接相邻选择器，从选中之后所有的 */
            #two~p{
                color: rgb(194, 185, 212);
                background-color: blue;
            }
    </style>
</head>

<body>
    <span>
        <p>1</p>
        <p id="two">2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </span>
</body>

</html>

7、属性选择器

根据标签的属性来选择

<!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>
    <style>
        /* 属性选择器，根据标签的属性来选择 */
     input[type=text]{
         width: 100px;
         height: 100px;
         border: 10px solid;
         border-radius: 10%; 
     }
    </style>
</head>

<body>
<form action="">
    <input type="text" name="" id="" value="" placeholder="请输入账号">
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</form>
</body>

</html>

8、公共选择器

可以使相同的部分可以不用重复写

<!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>
    <style>
        /* 公共选择器，相同的部分可以不用重复写 */
     [type=text],[type=password]{
         width: 100px;
         height: 100px;
     }
     [type=text]{
         border: 10px solid rgb(56, 9, 242);
         border-radius: 10%; 
     }
     [type=password]{
         border: 10px solid rgb(239, 11, 11);
         border-radius: 10%; 
     }
    </style>
</head>

<body>
<form action="">
    <input type="text" name="" id="" value="" placeholder="请输入账号">
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</form>
</body>

</html>

9、通配符选择器

全局样式

<!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>
    <style>
        /* 通配符选择器，全局 */
        *{
            color: rgb(31, 209, 46);
            font-size: 66px;
        }
    </style>
</head>

<body>
<ul>
    <li>111</li>
    <li>222</li>
</ul>
<a href="">333</a>
<p>444</p>
<span>555</span>
</body>

</html>

10、伪类选择器

伪类用于定义元素的特殊状态。

<!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>
    <style>
        /* 伪类选择器	
			什么是伪类？
			伪类用于定义元素的特殊状态。 
		*/
        a{
            text-decoration: none;
            font-size: 66px;
        }
        /*
        未访问前
        */
        a:link{
            color: blue;
        }
        /* 已访问后 包含之前访问过 */
        a:visited{
            color: #000;
        }
        /* 悬停 */
        a:hover{
            color: rgb(194, 127, 28);
        }
        /* 已选中但还未访问 */
        a:active{
            color: blueviolet;
        }
        img:hover{
            width: 300px;
            cursor: pointer;
            box-shadow: 100px 100px 100px 100px #ea3838;
        }
        			/*
				鼠标悬浮样式
				这里我们要用cursor属性
				cursor 属性规定要显示的光标的类型（形状）。
				1、default 默认光标(通常是一个箭头)
				2、auto 默认。浏览器设置的光标。
				3、crosshair光标呈现为十字线。
				4、pointer 光标呈现为指示链接的指针(-只手)
				5、move 此光标指示某对象可被移动。
				6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。
				7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
				8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
				9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
				10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
				11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
				12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
				13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。
				14、text 此光标指示文本。
				15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
				16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。
			*/
            img:active{
            border-radius: 50%; 
        }
    </style>
</head>

<body>
<a href="https://gitee.com/jiayinqijian/j357/blob/master/h5/css/14-css%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8.html">gitee</a>
<img src="/1 copy.png" alt="" width="200px" title="12345">
<a href="https://www.baidu.com/">baidu</a>
</body>

</html>

11、伪对象选择器

伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。

伪类和伪对象（元素）的区别

伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；

伪元素表示DOM 外部的某种文档结构

常用伪元素

1.E:before/E::before

2.E:after/E::after

伪元素是在元素内容的前面或后面定义的，必须要添加content:””这个属性，不然伪元素无法定义成功。

p::after{ content:"在P 标签元素内容前加了内容"; color: red;}

<!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>
    <style>
        /*	
				伪对象选择器
					伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。
				伪类和伪对象（元素）的区别
					伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；
					伪元素表示DOM 外部的某种文档结构
				常用伪元素
				1.E:before/E::before
				2.E:after/E::after
				伪元素是在元素内容的前面或后面定义的，必须要添加content:””这个属性，不然伪元素无法定义成功。
				p::after{ content:"在P 标签元素内容前加了内容"; color: red;}
			*/
        input:checked+span {
            background-color: #00FF00;
        }
        input:checked+span::after {
            background-color: #FF0000;
            content: '我结婚了';
        }
        input:checked+span::before {
            background-color: #5100ff;
            content: '我结婚了';
        }
        ul>li{
            list-style: none;
        }
    </style>
</head>

<body>
    <form action="" method="post">
        <fieldset>
            <legend>你过来呀</legend>
            <ul>
                <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
                <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
                <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
            </ul>
        </fieldset>
    </form>
</body>

</html>

一个程序员罢了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css选择器

一、什么是css？CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 中外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一html 在一个网页中负责的事情是一个页面的结构css(层叠样式表) 在一个网页中主要负责了页面的数据样式。数据样式一般有行内标签、内部样式与外部样式二、选择器1、标签选择器对所有该标签均起作用&l
复制链接

扫一扫

专栏目录