CSS标签选择器

xhj～

已于 2022-05-09 22:12:48 修改

阅读量1.4k

点赞数

文章标签： css html css3

于 2022-05-09 22:08:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_69015220/article/details/124672580

版权

本文详细介绍了CSS中的标签选择器，包括外部样式、行内样式、内部样式、类选择器、ID选择器、后代和子选择器、相邻兄弟选择器、属性选择器、公共选择器、通配符选择器以及伪类和伪对象选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS标签选择器

外部样式

/* 外部样式 */
h3 {
    color: #00FF00;
}

行内样式：

<body>
    <h1><font color="red">老妹儿01</font> </h1>
     <h1 style="color: rgb(199, 20, 20) ; " >对方过后</h1>
</body>

内部样式：

<head>
...
  <style>
        /* 内部样式 */
        h3 {
            color: #00FF00;
        }
    </style>
    
</head>
<body>
    <h3>内部样式</h3>
    <h3>内部样式</h3>
    
</body>

外部式样：

外部.css
h1{
    color: aqua;
}
------------------------------------------------------------------------
html:
<head>...
<link rel="stylesheet" href="./外部.css"><!--调用外部式样--！>
</head>
<body>
    <h1>外部式样</h1>
</body>

标签选择器：

   <style>
        p{
            color: #5b9e4c;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
    <p>标签选择器</p>
</body>

类选择器：

 <style>
        .buzhidao {
            font-size: 33px;
            color: #4054ea; 
        }
    </style>
</head>

<body>
    <p class="buzhidao">类选择器</p>      
</body>

ID选择器：

<style>       
        .buzhidao {
            font-size: 33px;
            color: #4054ea;
        }
<!--id选择器--!>
        #li{
            color: #be82d1;
        }
    </style>
</head>
<body>
    <p class="buzhidao" id="li">id选择器</p> 
</body>

后代选择器

 <style>
 		<!-- 空格 后代选择器，指ul内的a标签，其他a标签没有变化--!>
        ul a{
          text-decoration: line-through;  
        }
    </style>
</head>

<body>
    <a href="">00</a>     -->此a标签没有变化
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
    </ul>
</body>

子选择器：

 <style>
 <!--  >号  子选择器，指ul内直接下级a标签，其他a标签没有变化--!>
        ul>a {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <a href="">00</a>  -->此a标签没有变化
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>  -->此a标签没有变化  
    </ul>
</body>

直接相邻选择器

 <style>
<!-- 直接相邻选择器,有ID选择器 p标签老二 相邻的样式发生改变 +号表示--!>
<!-- 相邻的此标签“老三”会发生变化--!>
        #two + p {
            color: #0df005;
            background-color: #5B5BEB;
            font-size: 66px;

        }
    </style>
</head>

<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p> <!--id选择器不变--!>
        <p>老三</p>          <!--相邻的此标签“老三”会发生变化--!>
        <p>老四</p>
        <p>老五</p>
    </span>
</body>

间接相邻选择器

 <style>
<!-- 间接相邻选择器,有ID选择器 p标签老二 间接与相邻的样式发生改变 ~号表示--!>
<!-- 相邻的此标签“老三”会发生变化--!>
        #two ~ p {
            color: #0df005;
            background-color: #5B5BEB;
            font-size: 66px;

        }
    </style>
</head>

<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p> <!--id选择器不变--!>
        <p>老三</p>          <!--相邻的此标签“老三”会发生变化--!>
        <p>老四</p>			 <!--间接相邻的此标签“老四”会发生变化--!>
        <p>老五</p>			 <!--间接相邻的此标签“老五”会发生变化--!>
    </span>
</body>

属性选择器：

<style>
<!--用 [ ] 号的是属性选择器，下面的type=text 的样式会变化--!>
        [type=text]{
            width: 300px;
            height: 100px;
            border-width: 30px;
            border-radius: 15%;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号" />  -->会发生变化
    <input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>

公共选择器

 <style>
 <!--用 [ ],[ ] 的是公共选择器，里的样式会变化，可以单独改变样式--!>
        [type=text],
        [type=password] {               -->拥有相同的样式可以写在一起
            width: 300px;
            height: 50px;
        }

        [type=text] {				    -->可以单独增加样式
            border: 10px solid #123456;
        }

        [type=password] {
            border: 15px solid #654321;
        }
    </style>
</head>

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

通配符选择器：


<style>
<!--给当前界面上所有的标签设置属性。（*的意思是选中所有的标签）--!>
       * {
            color: #FF007F;
            background-color: #DBDCDB;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">超链接</a>
        </li>
    </ul>
    <p>统一样式</p>
    <span>统一样式</span>
</body>

伪类选择器：


 <style>
        /* 
			伪类选择器通过 ：冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
		*/
        a {
            text-decoration: none;  -->取消下划线式样
            font-size: 66px;
        }

        /* 未访问的链接，显示红色 */
        a:link {
            color: #FF0000;
        }

        /* 已访问的链接，变成绿色*/
        a:visited {
            color: #00FF00;
        }

        /* 鼠标悬停链接，会变紫色 */
        a:hover {
            color: #FF00FF;
        }

        /* 点击未放开时链接，会变蓝色 */
        a:active {
            color: #0000FF;
        }
        /* 会变特殊效果 */
        img:hover {
            width: 800px;
            cursor:se-resize;
            box-shadow: 30px 30px 30px 30px #c77474;
        }

        /*
			鼠标悬浮样式 ，要用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 此

```html
 <style>
        /* 
			什么是伪类？
			伪类用于定义元素的特殊状态。 
		*/
        a {
            text-decoration: none;
            font-size: 66px;
        }

        /* 未访问的链接，显示红色 */
        a:link {
            color: #FF0000;
        }

        /* 已访问的链接，变成绿色*/
        a:visited {
            color: #00FF00;
        }

        /* 鼠标悬停链接，会变紫色 */
        a:hover {
            color: #FF00FF;
        }

        /* 点击未放开时链接，会变蓝色 */
        a:active {
            color: #0000FF;
        }
        /* hover选择器 选择鼠标指针浮动在其上的元素，并设置其样式： */
        img:hover {
            width: 800px;
            cursor:se-resize;
            box-shadow: 30px 30px 30px 30px #c77474;
        }

        /*
			鼠标悬浮样式
			这里我们要用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 此光标指示可用的帮助(通常是一个问号或-个气球)。
		*/
         /* active 选择器为链接设置不同的样式效果： */
        img:active {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <a href="https://space.bilibili.com/480308139">李昊哲-小课</a>
    <img src="./img/1.png" width="300px" title="点击进入婚礼">
    <a href="https://blog.youkuaiyun.com/qq_24330181">李昊哲-小课</a>
</body>

伪对象（伪元素）选择器

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