CSS(1)---css语法、css选择器
wangjie 2019-10-31
一、CSS语法
1、CSS语法
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被冒号分开。
示例
<!-- 这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素 -->
h1 {color:red; font-size:14px;}
<!-- 在这里，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 -->二、CSS三种引入方式
CSS三种引入方式有：行内样式、内部样式表、外部样式表。
1、行内样式
它是通过标签的 style属性 来设置元素的样式，
基本语法示例：
<!--使用行内样式引入CSS-->
<body>
<p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>
</body>建议 实际在写页面时不提倡使用，在测试的时候可以使用。
2、内部样式表
在 style标签 中书写CSS代码。style标签写在head标签中。
其基本语法示例：
<head>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>3、外部样式表
CSS代码保存在扩展名为.css的样式表中。有两种方式：链接式、导入式。
基本语法示例：
<head>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>4、三者比较
三、CSS基础选择器
基础选择器可以分为: 标签选择器、类选择器、id选择器、通配符选择器。
1、标签选择器
标签选择器（元素选择器）是指用 HTML标签名称 作为选择器，按标签名称分类，为页面中同一类标签指定统一的CSS样式。基本语法示例：
<!-- 示例 这里h1就是标签-->
h1 {color:red; font-size:14px;}标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
2、类选择器
类选择器使用 .（英文点号）进行标识，后面紧跟 类名。
基本语法示例
<head>
<style type="text/css">
.center {text-align: center}
</style>
</head>注意：类名的第一个字符不能使用数字！
3、 id选择器
id选择器使用 # 进行标识，后面紧跟id名，其基本语法示例：
<head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>id选择器和类选择器区别
类选择器： 好比人的名字,是可以多次重复使用的。
id选择器： 好比人的身份证号码,是唯一的不能重复。
4、通配符选择器
通配符 选择器用 * 号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}四、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器。
1、交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如p.className。
基本语法
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
div.red { /*交集选择器 既要满足是 div 标签 又要满足class叫 red*/
color: red;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div class="red">交集选择器</div> <!-- 只有这个会变红 -->
<p class="red">交集选择器</p>
</body>
</html>2、并集选择器
并集选择器，只要满足一个就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。 通常用于集体声明。
示例
<!DOCTYPE html>
<html>
<head>
<title>并集选择器</title>
<style>
/*1. 只要满足其中一个就会变红*/
div, p, span { /*并集选择器 用逗号隔开 */
color: red;
}
</style>
</head>
<body>
<div>并集选择器</div>
<p>并集选择器</p>
<span>并集选择器</span>
<h1>并集选择器</h1> <!-- 只有这一个不会变红 -->
</body>
</html>3、后代选择器
后代选择器又称为包含选择器，一般标签里面又会包含标签,那么内层标签就为外层标签的后代。
示例
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<style>
div p { /* 后代选择器 p 一定是 div 的孩子 */
color: red;
}
</style>
</head>
<body>
<div> 后代选择器 </div>
<div>
<p>后代选择器</p> <!-- 只有它变红 -->
</div>
</body>
</html>4、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
后代选择器跟子元素选择器的区别
后代可以是 亲儿子 、亲孙子 、亲重孙子之类的，而子代只是亲儿子。所以后代选择器的范围更广些。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
ul li > a { /*这里表示 ul的后代中的li的亲儿子才会有效 */
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a> <!-- 只有这个是li的亲儿子，所以只有它会变红 -->
<div>
<a href="#">二级菜单</a> <!-- 这三个只是li的后代但并不是亲儿子，所以不会变红 -->
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>5、相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
6、 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .className {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
a:link { /* 未访问过的连接状态*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*这个链接我们已经点过的样子 已访问过链接*/
color: orange;
}
a:hover { /*鼠标经过连接时候的样子*/
color: #f10215;
}
a:active { /*鼠标按下时候的样子*/
color: green;
}
</style>
</head>
<body>
<a href="http://www.oujiong.com">点击</a>
</body>
</html>参考
有关CSS选择器上面也只是讲了一部分，更多的可以看w3school官方文档。当你需要怎么样的选择器到这里查找就可以。
你如果愿意有所作为，就必须有始有终。(3)
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT