正文

CSS 1. 选择器

IP云
IP云V管理员/4 阅读
07/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、css的介绍

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离   2.网页的表现统一，容易修改   3.丰富的样式，使页面布局更加灵活   4.减少网页的代码量，增加网页浏览器速度，节省网络带宽   5.运用独立页面的css,有利于网页被搜索引擎收录

CSS的三种引入方式：

行内样式、内部样式表、外部样式表。

一.行内样式

使用style属性引入CSS样式。

示例：
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title> <!-- 内链式；内部样式表 -->
<style type="text/css">
/*h1{
font-size: 30px;
color: red;
}*/
</style><style type="text/css">
@import url('./css/index.css'); </style>
<!-- 外部样式表；链接式是下面这种（推荐使用）；上边的为导入式 -->
<!-- <link rel="stylesheet" type="text/css" href="./css/index.css"> --></head>
<body> <!--一般不用内嵌式，不好维护 优先级内嵌式>内链式>外链式-->
<!-- 行内样式， 使用style引入css样式；直接在HTML标签中设置样式如下 -->
<div>
<h1 style='font-size: 10px;color: yellow'>路飞学诚</h1>
<h2>路飞学诚</h2>
</div> </body>
</html>

、<link/>标签属于XHTML,@import是属性css2.
、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

2、基础选择器

id选择器 #

标签选择器，可以选择所有的标签元素；不管标签藏的有多深，都可以选中；选中的是所有的而不是某一个，所以说“共性”而不是特性； 如div标签

通配符选择器 *

类选择器 .

父级没有设置高度，子级可以把父级撑开。

.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
.id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA
3.类选择器
.所谓类 就是class .类名 class与id非常相似 任何的标签都可以加类
但是类是可以重复的 归类,可以使用同一个类名
.同一个标签中可以携带多个类 用空格隔开 如class="title alex egon xmg"但是后边的类把前边的给遮蔽了，层叠效果被遮盖了。
类的使用 能够决定前端工程师的css水平到底有多牛逼？
一定要有”公共类“的概念
总结：
.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title> <style type="text/css">
/*通配符选择器；左边和上边都没有间距了；加*表示选择所有元素 */
*{
padding: ;
margin: ;
color: #;
} /*id选择器margin:0 auto;表示在中间显示*/
#container{
width: 968px;
background-color: #C1C1C1;
margin: auto;
} /*元素或叫标签选择器； */
h1{
color:#6D8B00;
}
.content{
width: 968px;
background-color: #D50092;
}
img{
width: 968px;
} /*子代选择器 从ul的直接子元素中找到li标签，设置字体颜色为红色 */
ul>li{
color: red;
}
/*后代选择器 从ul的所有后代中找到a标签，设置字体颜色 */
/*ul a{
color: #27CD00;
}*/
</style>
</head>
<body>
<!--上+中+下布局 -->
<div id="container">
<div class="header">
<h1>路飞学诚</h1>
</div> <div class="content">
<h3>我是内容</h3>
<img src="./images/banner.jpg" alt="">
</div> <div class="footer">
<ul>
<li> <a href="">哈哈哈</a> </li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

3、高级选择器

后代选择器、子元素选择器、交集选择器、并集选择器、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*div p{ !*后代选择器，作用于所有的后代*!*/
/*color: red;*/
/*}*/
.container div p{ /*后代选择器，中间用空格*/
color: #985f0d;
}
.container>p{ /*子代选择器，仅作用于子元素，孙子的p标签不起作用*/
color: yellowgreen;
}
/*交集选择器，第一个必须是标签选择器，第二个必须是类或者ID选择器*/
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
} h3.active{
background-color: #5bc0de; }
/*并集（组合）选择器 设置多个标签中的统一样式*/
a, h4{
font-size: 43px;
text-decoration: none; /*文本的修饰，*/
color: #2b542c;
}
/* *通配符选择器，性能有点差，一般不用它*/ </style>
</head>
<body>
<div class="container">
<p>我是第一个段落</p>
<div>
<p>我是第二个div的段落</p>
<a href="#">luffy</a>
</div>
<p>我是另外一个段落</p>
<ul>
<li class="item">
<h3 class="active">我是一个h3标题</h3>
<h4>我是一个h4标题</h4>
</li>
<li>
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>

群组选择器、交集选择器、毗邻选择器、兄弟（弟弟）选择器、

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*群组选择器* 统一宽度，居中，背景颜色，，/
.title,.content,.footer{
width: 968px;
/*height: 300px;*/
margin: auto;
background-color: #BFBFBF;
border: 1px solid red;
} /*交集选择器*/
p.p1{
color: #0DC87A;
}
p#title1{
font-size: 30px;
color: #CF5600;
} /*紧跟着h3标题的标签；毗邻选择器 找到所有紧挨在h3后面的第一个p标签，设置字体颜色*/
h3+p{
color:#D23180;
} /*兄弟选择器 ； 弟弟选择器 找到所有h3标签后面同级的的p标签，设置字体颜色*/
h3~p{
color: #4558C9;
} /*找到所有class=baidu的选择器*/
[class='baidu']{
color: #25CB33;
} /*找到所有class开头是btn的选择器*/
[class$='ault']{
font-size: 20px;
color:#37C8B0;
} /*基础选择器：
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器
1.群组选择器 中间是用,
2.交集选择器 选择器之间不能有空格 ，第一个标签必须是标签选择器，第二个标签可以是id选择器或类选择器
3.后代选择器 选择器之间用空格；（使用很频繁）
4.子代选择器 >
5.毗邻选择器 +
6.兄弟选择器 ～
7.属性选择器 [class='值'] [class^='开头的值'] [class$='结尾的值']
*/ </style>
</head>
<body> <div class="title">
<p class="p1" id="title1">我是一个标题</p>
</div> <div class="content">
<h3>我是3级标题</h3>
<a href="">百度一下</a>
<p>我是一个段落</p>
<h3>我是3级标题</h3>
<p>我是一个段落</p>
<h3>我是3级标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p> </div> <div class="footer"> <a href="" class="baidu"> 百度</a>
<a href="" class="btn-default"> 百度一下</a>
<a href="" class="baidu"> 百度</a> </div></body>
</html>

4、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
label[for]{
color: red;
font-size: 20px;
}
/*根据属性和值查找*/
label[for='pwd']{
color: yellow;
}
/*以...开头*/
label[for^='vip']{
font-size: 30px;
}
/*以...结尾*/
label[for$='']{
font-size: 40px;
}
/*包含有ser*/
label[for*='ser']{
color: green;
}
input[type='text']{
background-color: purple;
}
</style>
</head>
<body>
<!-- 属性选择器 通常在 表单控件中 使用比较频繁-->
<div class="box">
<form action="">
<label form="user">用户名</label>
<input type="text" name="" id="user"> <!--name的属性跟form的action有关，id是跟label的form=“user”有关 -->
<label for="pwd">密码</label>
<label for="vip1">vip1</label>
<label for="vip2">vip2</label>
<label for="user2">用户名2：</label>
<label for="user3">用户名3：</label>
</form>
</div>
</body>
</html>

5、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box ul li.item1 a:link{ /*没有被访问的a标签超链接的样式; 后代选择器结合交集选择器来选中a标签 */
color:#666;
}
.box ul li.item2 a:visited{ /*访问过后的a标签超链接的样式*/
color: yellow;
}
.box ul li.item3 a:hover{ /*鼠标悬停时超链接的样式*/
color: #2aabd2;
}
.box ul li.item4 a:active{ /*鼠标点住不松手的时候a标签超链接的样式*/
color:#c9302c;
} /*'爱恨原则' love hate 一定要先love再hate*/ div ul li:first-child{ /*选中第一个元素*/
font-size: 20px;
color: red;
}
div ul li:last-child{ /*选中最后一个元素*/
font-size: 20px;
color: #985f0d;;
}
div ul li:nth-child(3){ /*选中当前指定的元素 数值从1开始*/
font-size: 30px;
color: #2aabd2;
}
div ul li:nth-child(n){ /* n表示选中所有 从0开始的 0的时候表示没有选中*/
font-size: 35px;
color: darkred;
}
div ul li:nth-child(2n){ /*偶数*/
color: mediumvioletred;
}
div ul li:nth-child(2n-1){ /*奇数*/
color: yellow;
}
div ul li:nth-child(3n+1){ /*隔几换色 隔行换色 隔2行换1 */
color: #2aabd2;
}
input:focus{ /*获取焦点时的样式*/
background-color: transparent;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1<a href="#">张三</a>
</li>
<li class="item2">
2<a href="#">李四</a>
</li>
<li class="item3">
3<a href="#">王五</a>
</li>
<li class="item4">
4<a href="#">赵六</a>
</li>
<li class="item5">
5<a href="#">钱李</a>
</li>
<li class="item6">
6<a href="#">嘿哒</a>
</li>
</ul> <form>
<input type="text" name="">
</form>
</div></body>
</html>

6、伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-letter{ /*设置第一个首字母的样式，为文本首字母设置特殊样式*/
color: #c9302c;
font-size: 25px;
}
p:before{ /* 在....之前添加内容,这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
content: 'alex';
}
p:after{ /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
content: '&';
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<p>我是一个段落哦</p>
</body>
</html>

css的继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素

像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father{
font-size: 30px;
color: #c9302c;
background-color: #2aabd2; }
.child{
color:rebeccapurple;
}
</style>
</head>
<body>
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
<p>小马哥</p>
</div>
</body>
</html>

css的层叠性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
#box1 #box2 p{ /*2 0 1*/
color:yellow;
}
#box2 .wrap3 p{ /*1 1 1*/
color: rebeccapurple;
}
div div #box3 p{ /*1 0 3*/
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{ /*0 3 4*/
color: blue;
}
</style>
<!--
层叠性： 权重大的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单 数数，谁的数量多就选谁，就不用接着看后边的数量了
id的数量 class的数量 标签的数量
-->
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是什么颜色了</p>
</div>
</div>
</div>
</body>
</html>

层叠性相同时处理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1 1 1 */
/*#box2 .wrap3 p{
color: yellow;
}*/
/*1 1 1*/
/*#box1 .wrap2 p{
color: red;
}*/ /* 0*/
/*继承来的*/
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2 .wrap3{
color: green;
} /*选中来的*/
/*1 1 1*/
/*#box2 .wrap3 p{
color: green;
}*/ </style>
</head>
<body> <!-- 当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上。
继承来的属性 权重为0 总结：
1.先看标签元素有没有被选中，如果选中了（最内层标签），就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则"：谁描述的近，就显示谁的属性 -->
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>

选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css"> #div1{
background-color: #2E2FCC;
} .box{
background-color: #00CC3C;
} div{
width: 200px;
height: 200px;
background-color: red;
} </style>
</head>
<body> <!-- 优先级id >类 >标签 -->
<div id="div1" class="box" >哈哈</div>
</body>
</html>