CSS常见的几种选择器

最新推荐文章于 2022-03-17 19:41:37 发布

亦是木子也是雨

最新推荐文章于 2022-03-17 19:41:37 发布

阅读量840

点赞数 4

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_44162474/article/details/85220124

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基本选择器

标签选择器

  直接引用HTML5标签名称
  举例如下：

<style type="text/css">
	h1{
		font-size: 17px;
		color: red;
	}
	p{
		font-size: 14px;
		color: yellow;
	}
</style>
</head>
<body>
	<h1>标签选择器</h1>
	<p>标签选择器</p>
</body>

类选择器

类选择器以一个点（.)前缀开头，然后跟随一个自定义类名。
具体步骤为：先在标签中定义class属性，然后把该属性值设置为实现定义好的类选择器名称即可。
举例如下：

<style type="text/css">
	.lei{
		font-size: 14px;
		color: red;
	}
	</style>
</head>
<body>
	<p class="lei">类选择器</p>
</body>

ID选择器

ID选择器以#号作为前缀，然后是自定义一个ID名。
具体步骤为：先在标签中定义id属性，然后把改属性值设置为事先定义好的ID选择器的名称即可。
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>类选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#lei{
			font-size: 14p;
			color: red;
		}
	</style>
</head>
<body>
	<p id="lei">类选择器</p>
</body>
</html>

通配符选择器

如果HTML所有元素都需要定义相同的样式，这时就使用通配选择器，一般用星号（*）表示。
举例如下:

/*如清除边距样式*/
*{
	margin: 0;
	padding: 0;
}

主要区别：
标签选择器针对的是页面上的一类标签，
类选择器可以供多种标签使用，
ID选择器是供特定的标签（一个）。ID是此标签在此页面上的唯一标识

组合选择器

包含（派生选择器）

父子选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器
举例如下：

<style type="text/css">
		#header p{
			font-size: 17px;
		} 
		#main p{
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div id="header">
		<p>秦时明月汉时关</p>
		<div>
		<!-- 次处的P标签是全部被选中的，和嵌套没关系 -->
			<p>秦时明月汉时关</p>	
		</div>
	</div>
	<div id="main">
		<p>秦时明月汉时关</p>
		<p>秦时明月汉时关</p>
	</div>
</body>

直接子选择器

直接子选择器是指定父元素所包含的子元素。子选择器使用尖叫号（>)表示。
举例如下：

<head>
	<style type="text/css">
		span{
			font-size: 14px;
			color: red;
		}
		div>p{
			font-size: 17px;
			color: yellow;
		}
	</style>
</head>
<body>	
	<h1><span>CSS选择器</span></h1>
	<div id="box">
		<p>秦时明月汉时关</p>
		<div>
		<!-- 次处的P标签是没有被选中 -->
			<p>秦时明月汉时关</p>	
		</div>
	</div>
</body>

包含选择器和直接子选择器的区别

包含选择器选中的是所有的子元素（也可以是孙子），而直接子选择器只选择子元素（不可以是孙子）

 <style>
 /* 选中 grand下的所有 h2 标签 */
 div h2 {
 }
 /* 直选中 child1 */
 div > h2 {

 }
</style>
<div class="grand">
    <h2 class="child1"></h2>
    <div class="child2">
      <h2 class="grand-child"></h2>
    </div>
  </div>

并列选择器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div.demo{
			background-color: #ff00ff;
		}
	</style>
</head>
<body>
	<div>秦时明月汉时关</div>
	<div class="demo">>秦时明月汉时关</div>
	<p class="demo">>秦时明月汉时关</p>
</body>
</html>

分组选择器

分组选择器通过逗号（，）分隔符进行定义。其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素都选取出来

通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放在一起，然后通过逗号链接这些选择器，减少代码的书写量

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.demo1,
		.demo2{
			width: 100px;
			height: 100px;
		}
		.demo1{
			background-color: red;
		}
		.demo2{
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="demo1"></div>
	<div class="demo2"></div>
</body>
</html>

伪选择器

伪选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。
有两种主要类型：伪类和伪元素。
常见的几种伪类

链接伪类

 <style>
        div{
            width: 200px;
            height: 200px;
            background: #008c8c;
        }
        div:link{
            background: red;
        }
        div:visited{
            background: yellowgreen;
        }
        div:hover{
            background: lightgreen;
        }
        div:active{
            background: red;
        }
        /* 四个可以全写，也可以只写一部分，
        如果四个全写,则四个顺序不能打乱，否则浏览器将会进入怪异的渲染模式(即就是不能显示出正常的效果);
        ps:爱恨情长(lvha); */
    </style>

结构伪类

<head>
    <style>
        li {
            list-style: none;
        }

        /*选择第一个子元素*/
        .test1 li:first-child {

            color: red;
        }

        /*选择最后一个子元素*/
        .test1 li:last-child {

            color: blue;
        }

        /* 选择奇数倍的子元素 */
        .test2 li:nth-child(2n + 1) {
            color: orange;
        }
        /*
            取值说明
            奇数: odd or 2n + 1
            偶数: even or 2n
            注:可以根据自己的需要，通过几n加几来实现
                如3n+1、4n-1等
         */
    </style>
</head>

<body>
    <ul class="test1">
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
    </ul>

    <ul class="test2">
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
        <li>我已经爱上你</li>
    </ul>
</body>

伪元素

<style>
        /* 用于向文本的首行设置特殊样式 */
        p:first-line{
            font-weight: bold;
        } 
        /* 用于向文本的首字母设置特殊样式： */
        p::first-letter{
            font-weight: bold;
        }
        /* 可以在元素的内容前面插入新内容。 */
        p::before {
            content: " ";
        }
        /* 可以在元素的内容之后插入新内容 */
        p:after {
            content: " ";
        }
    </style>