CSS中的定位器复习小结

最新推荐文章于 2024-05-29 22:48:09 发布

jackyrongvip

最新推荐文章于 2024-05-29 22:48:09 发布

阅读量577

点赞数

分类专栏： ajax/web相关

本文链接：https://blog.csdn.net/jackyrongvip/article/details/97102256

版权

ajax/web相关专栏收录该内容

409 篇文章 1 订阅

订阅专栏

1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

例子：

<style>
         .red {
         	color: red;
         }
         p.red {
         	font-size:  30px;
         }
		div.red {
			font-size: 15px;
		}
        </style>
    </head>
    <body>
    <div class="red">熊大</div>
    <div>熊二</div>
    <div>熊熊</div>
    <p>小明</p>
    <p>小红</p>
    <p class="red">小强</p>

2 并集选择器，就是说只要包含有，就可以了
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<style>
	
		div, 
		p, 
		span,
		.daye {
			color:blue;
			font-size: 18px;
		}
        </style>
    </head>
    <body>
    <div>刘德华</div>
    <p>张学友</p>
    <span>郭富城</span>
    <h1>凤姐</h1>
    <h1>风哥</h1>
    <h1 class="daye">凤大爷</h1>

3 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

  <style>
		 /* div p {
		  	color: pink;
		  } */
		  .jianlin p {
		  	color: red;
		  }
        </style>
    </head>
    <body>
     <p>王者荣耀</p>
     <div class="jianlin">
     	<p>王思聪</p>
     </div>
     <div>
     	<p>王宝强</p>
     </div>

4 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格

   <meta charset="utf-8">
        <style>
		.nav li { /*  空格 后代选择器  可以选择 儿子 孙子 重孙子.. */
			color: red;
		}
		.nav > li {  /* 大于号 子元素选择器  只选择 亲儿子 */
			color: pink;
		}
        </style>
    </head>
    <body>
    <ul class="nav">
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    </ul>

5 属性选择器：

   <style>
		div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
		div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
		div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}
        </style>
    </head>
    <body>
    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

6 伪元素选择器：

 <style>
        div::before {   /* before 和 after 在盒子div 的内部前面插入或者是内部后面插入 */
        	content: "俺";
        }
        div::after {
        	content: "18岁";
        }
        </style>
    </head>
    <body>
    <div>今年</div>