CSS和选择器

最新推荐文章于 2024-03-06 17:08:15 发布

不如去追风

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量224

点赞数

分类专栏：选择器文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44122749/article/details/104463003

版权

选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS和选择器

一、CSS介绍

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS的最新版本是CSS3，但是我们目前学习的是CSS2.1
接下来讲讲我们为什么要使用CSS：

原因：HTML的缺陷

数据和显示没有分开
功能不够强大
不能够适应多种设备
要求浏览器必须智能化足够庞大

CSS 优点

使整个网站视觉效果一致
使开发效率提高了（代码的耦合性降低）
使数据和显示分开
降低网络流量

比方说：同一个样式多个页面需要用到如果用html来实现的话会很繁琐，但是用CSS的话只需要写一遍。所以现在html只提供数据和一些控件，而各种各样的样式完全交给css提供。

二、CSS选择器

css的选择器：1.基本选择器 2.高级选择器

1. 基本选择器

(1) 标签选择器

类型选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span…等。`

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

(2) id选择器

同一个页面中id不能重复，因为id是唯一的（id唯一性）
任何的标签都可以设置id
id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值


#box{
      background:green;
  }
          
#box1{
  color: red;
}

#box2{
 font-size: 30px;
}

(3) class（类）选择器

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。
同一个标签中可以携带多个类，用空格隔开


.boxColor{
    color: green;
}

.big{
    font-size: 40px;
}

.line{
   text-decoration: underline;
 
 }


<!-- 公共类    共有的属性 -->
    <div>
        <p class="boxColor big">段落1</p>
        <p class="boxColor line">段落2</p>
        <p class="line big">段落3</p>
    </div>

2.高级选择器

(1) 后代选择器

使用**空格**表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.father  .granson{
    color: red;
}
.father .son .granson{
    color: yellowgreen;
}


<div class="father">
	<div class="son">
		<div class="grandson"></div>
	</div>
</div>

(2) 子代选择器

使用**>**(大于号)表示后代选择器。顾名思义，父元素的子代(不包含孙子…)元素

.father>.son{
    color: red;
}
.father>.son>.granson{
    color: yellowgreen;
}


<div class="father">
	<div class="son">
		<div class="grandson"></div>
	</div>
</div>

(3) 并集选择器

多个选择器之间使用**逗号**隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

.box1, .box2, .box3{
	border: 1px solid #999;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

比如像重置样式

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
  margin: 0;
  padding: 0
}

(4) 交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.box

比如有一个

这样的标签。那么

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 中间没有空格*/
h4.active{
    background: #00BFFF;
}

3.CSS的伪类选择器

属性选择器

E[date~="val"]　　E[date|="val"]　　E[date^="val"]　　E[date$="val"]　　E[date*="val"]

/*根据属性查找*/
[date]{
  color: red;
}

/*找到date属性的等于username的元素 字体颜色设为红色*/

div[date='username']{
color: yellow;
}

/*以....开头  ^*/
div[date^='user']{
color: #008000;
}

/*以....结尾   $*/
div[date$='vvip']{
color: red;
}

/*包含某元素的标签*/
div[date*="vip"]{
color: #00BFFF;
}


/*指定单词的属性*/
label[date~='user1']{
color: red;
}

input[type='text']{
background: red;
}

4.CSS的伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器

a:link {color: red;} /* 未访问的链接状态 */

a:visited {color: green;} /* 已访问的链接状态 */

a:hover {color: blue;} /* 鼠标滑过链接状态 */

a:active {color: yellow;} /* 鼠标按下去时的状态 */

input:focus 选择获得焦点的输入框

说明：

1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：

a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：a{color:red;} a:hover{color:green;}

表示超链接的三种状态都相同，只有鼠标划过变化颜色

再给大家介绍一种css3的选择器 nth-child()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		/*选中第一个元素*/
		 div ul li:first-child{
		     font-size: 20px;
		     color: red;
		 }
		 /*选中最后一个元素*/
		 div ul li:last-child{
		     font-size: 20px;
		     color: yellow;
		 }
		  
		 /*选中当前指定的元素  数值从1开始*/
		 div ul li:nth-child(3){
		     font-size: 30px;
		     color: pink;
		 }
		  
		 /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
		 div ul li:nth-child(n){
		     font-size: 40px;
		     color: red;
		 }
		  
		 /*偶数 或者是 odd  */
		 div ul li:nth-child(2n){
		     font-size: 50px;
		     color: gold;
		 }
		 /*奇数 或者是 even */
		 div ul li:nth-child(2n-1){
		     font-size: 50px;
		     color: yellow;
		 }
		 /*隔几换色 就是5n+1,隔3换色就是4n+1 */
		  
		 div ul li:nth-child(5n+1){
		     font-size: 50px;
		     color: blue;
		 }
		</style>
	</head>
	<body>
			<div>
				<ul>
					<li>1111111111</li>
					<li>2222222222</li>
					<li>3333333333</li>
					<li>4444444444</li>
					<li>5555555555</li>
					<li>6666666666</li>
					<li>7777777777</li>
					<li>8888888888</li>
					<li>9999999999</li>
					<li>0000000000</li>
				</ul>
			</div>
	</body>
</html>

在这里插入图片描述

6.CSS的伪元素选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*设置第一个首字母的样式*/
			p:first-letter {
				color: red;
				font-size: 30px;
			}

			/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
			p:before {
				content: 'alex';
			}

			/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
			p:after {
				content: '&';
				color: red;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<p>我是p标签</p>
	</body>
</html>

在这里插入图片描述

不如去追风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS和选择器

CSS和选择器一、CSS介绍CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。CSS的最新版本是CSS3，但是我们目前学习的是CSS2.1接下来讲讲我们为什么要使用CSS：原因：HTML的缺陷数据和显示没有分开功能不够强大不能够适应多...
复制链接

扫一扫