CSS选择器的使用

fengku1

已于 2022-10-11 20:27:08 修改

阅读量243

点赞数

分类专栏： HTML基础文章标签： css html

于 2022-10-11 20:14:23 首次发布

本文链接：https://blog.csdn.net/fengku1/article/details/127270311

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS选择器的使用

标签选择器

标签选择器可以快速方便的空置页面标签显示效果

<style type="text/css">
p {
    font-size: 12px;                   		/* 字体大小为12像素 */
    color: red;                         	/* 字体颜色为红色 */
}

</style>

类选择器

类选择器以(.)前缀开头，然后跟随一个自定义类名

<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
p {
    font-size: 12px;                   		/* 字体大小为12像素 */
    color: red;                         	/* 字体颜色为红色 */
}
.font18px { font-size: 18px; }
</style>
</head>

<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
</body>
</html>

Class属性还可以包含多个类，因此可以设计复合样式

<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
p {/* 段落默认样式 */
    font-size:12px;                       	/* 字体大小为12像素 */
    color:red;                            	/* 字体颜色为红色 */
}
.font18px {/* 字体大小类  */
    font-size:18px;                         	/* 字体大小为18像素 */
}
.underline {/* 下划线类 */
    text-decoration:underline;                	/* 字体修饰为下划线 */
}
.italic {/* 斜体类 */
    font-style:italic;                        	/* 字体样式为斜体 */
}
</style>
</head>

<body>
<p class="underline">问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
</body>
</html>

如果把标签和类捆绑在一起来定义选择器，则可以限制类的适用范围

<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
p {/* 段落样式  */
    font-size:12px;                        	/* 字体大小为12像素 */
}
.font18px {/* 类样式  */
    font-size:18px;                        	/* 字体大小为18像素 */
} 
p.font18px {/* 指定段落的类样式  */
    font-size:24px;                        	/* 字体大小为24像素 */
}
</style>
</head>

<body>
<div class="font18px">问君能有几多愁，恰似一江春水向东流。</div>
<p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
</body>
</html>

ID选择器

ID选择器以#作为前缀，后面式一个自定义的ID名
也可以为ID选择器指定标签范围，采用这种方法能够提高该样式的优先级

<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
#box {/* ID样式  */
    background:url(images/2.jpg) center bottom; /* 定义背景图像并居中、底部对齐 */
    height:200px;                          	/* 固定盒子的高度 */
    width:400px;                          	/* 固定盒子的宽度 */
    border:solid 2px red;                    	/* 边框样式 */
    padding:100px;                         	/* 增加内边距 */
}
</style>
</head>

<body>
<div id="box">问君能有几多愁，恰似一江春水向东流。</div>
</body>
</html>

通配选择器

通配选择器是固定的,用*来表示,用于HTML袁术都需要定义相同的样式

组合选择器

当把两个或多个基本选择器组合在一起,就形成了一个复杂的选择器,通过组合选择器可以精确的匹配页面元素

包含选择器

包含选择器通过空格标识符表示,前面的一个选择器表示包含框对象的选择器,而后面的选择器则是被包含的选择器
比如如下代码:定义id=header的p标签字体大小为14px,id=main的p标签字体大小为12px

<style type="text/css">
#header p { font-size:14px;}
#main p {font-size:12px;}
</style>

子选择器

子选择器是父元素包含的子元素,子选择器用尖角号表示>

<style type="text/css">
span { /* span元素的默认样式 */
    font-size:12px;                        	/* 增加内边距 */
}
div > span { /* div元素包含的span子元素的默认样式 */
    font-size:24px;                        	/* 增加内边距 */
}
</style>

相邻选择器

相邻选择器通过加号(+)分隔符进行定义.其基本结构是第一个选择器指定前面的相邻元素,后面的选择器指定相邻元素

<style type="text/css">
h2, p, h3 {
    margin: 0;	/* 清除默认边距 */
    padding: 0;	/* 清除默认间距 */
    height: 30px;	/* 初始化设置高度为30像素 */
}
p+h3 { background-color: #0099FF;	/* 设置背景色 */ }
</style>
</head>
<body>
<div class="header">
    <h2>情况一：</h2>
    <p>子选择器控制p标签，能控制我吗</p>
    <h3>子选择器控制p标签</h3>
    <h2>情况二：</h2>
    <div>我隔开段落和h3直接</div>
    <p>子选择器控制p标签，能控制我吗</p>
    <h3>相邻选择器</h3>
    <h2>情况三：</h2>
    <h3>相邻选择器</h3>
    <p>子选择器控制p标签，能控制我吗</p>
    <div>
        <h2>情况四：</h2>
        <p>子选择器控制p标签，能控制我吗</p>
        <h3>相邻选择器</h3>
    </div>

兄弟选择器

通过(~)分隔符进行定义,基本结构为:第一个选择器指定同级前置元素,后面的选择器指定器后同级所有匹配元素
将上个例子p+h3 { background-color: #0099FF;更换成p~h3 { background-color: #0099FF;

分组选择器

分组选择器通过(,)分隔符进行定义,器基本结构:第一个选择器指定匹配元素,后面选择器指定另一个匹配元素,最后把前后选择器匹配的元素都提取出来

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="IE8.js"></script>
<style type="text/css">
h1, h2, h3, h4, h5, h5, h6 {
    background-color: #99CC33;	/* 设置背景色 */
    margin: 0;	/* 清除标题的默认外边距 */
    margin-bottom: 10px;	/* 使用下边距拉开各个标题之间的距离 */
}
h1+h2, h2+h3, h4+h5 { color: #0099FF;	/* 兄弟关系 设置字体的颜色 */ }
body>h6, h1>span, h4>span { font-size: 20px;	/* 子选择器 设置字体的大小 */ }
h2 span, h3 span { padding: 0 20px;	/* <span>标签的左右间距 */ }
h5 span[class], h6 span[class] { background-color: #CC0033;	/* h5、h6标题中含有class属性的span标签设置背景色 */ }
</style>
</head>
<body>
<h1>h1元素<span>这里是span元素</span></h1>
<h2>h2元素<span>这里是span元素</span></h2>
<h3>h3元素<span>这里是span元素</span></h3>
<h4>h4元素<span>这里是span元素</span></h4>
<h5>h5元素<span class="S1">这里是span元素</span></h5>
<h6>h6元素<span class="S2">这里是span元素</span></h6>
</body>
</html>