css:基本选择器

1.html选择器(标签选择器)

基本语法:

html标签名称{
属性名:属性值;
属性名:属性值;
}

继续在上面的代码中做修改,实例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span-news{
            font-weight:bold;
            background-color:pink;
            color:black;
        }
        #span-news-tb{
            font-weight:bold;
            font-size:25px;
            background-color:silver;
        }
        body{
            color:orange;
        }
        span{
            color:red;
        }
    </style>
</head>
<body>你好,北京!<br>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
<hr>
<span id="span-news-tb">这是一个比较重要的新闻</span>
</body>
</html>

刷新浏览器后显示效果如下:

image

对于选择器的优先级的一些说明:

类选择器的优先级 > html标签选择器的优先级
父元素的样式会被子元素继承下来

如何区分同一个标签的不同样式,以达到下图中的效果呢??

image

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            background-color:#f0f;
            font-size:30px;
            font-style:italic;
        }
        p.tb1{
            background-color:silver;
        }
        p.tb2{
            background-color:pink;
            font-style:normal;
        }
    </style>
</head>
<body>
<p>这是笑傲江湖的内容</p>
<p>这是笑傲江湖的内容</p>
<p>这是笑傲江湖的内容</p>
<p class="tb1">这是笑傲江湖的内容</p>
<p class="tb2">这是笑傲江湖的内容</p>
</body>
</html>

刷新浏览器显示的效果如下：

image

2.伪元素选择器(伪类选择器)

现在有如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>

刷新浏览器效果如下：

image

现在的如下需求：

1.默认样式是黑色的，24px,没有下划线
2.当鼠标移动到超链接时，自动出现下划线
3.点击后，超链接变成红色．

如下图所示：

image

该怎么样实现呢？？

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*超链接的默认样式*/
            color:black;
            font-size:24px;
            text-decoration:none;
        }
        a:hover{
            /*当鼠标移动到超链接时的样式*/
            text-decoration:underline;
        }
        a:visited{
            /*点击超链接后的样式*/
            color:red;
        }
    </style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>

刷新浏览器后的效果如下：

image

把鼠标放在其中的一个超链接上，看会发生什么？

image

点击其中一个超链接，会打开超链接指定的网页．

然后返回本页面，又会发生什么呢？？

我点击的是第一个超链接，结果显示的效果如下：

image

我只点击一个超链接，结果却是相同的两个超链接变成红色的了．

再修改一下代码，又会实现另外一种效果，那就是鼠标选中一个超链接的时候，不松开，而这个超链接的颜色会变成蓝色的．

看下面的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*超链接的默认样式*/
            color:black;
            font-size:24px;
            text-decoration:none;
        }
        a:hover{
            /*当鼠标移动到超链接时的样式*/
            text-decoration:underline;
        }
        a:visited{
            /*点击超链接后的样式*/
            color:red;
        }
        a:active{
/*鼠标按下的样式*/
            color:blue;
        }
    </style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>

刷新浏览器，显示的效果如下：

image

鼠标选中一个超链接，然后不松开，看显示的效果：

image

这个时候，所选中的超链接确实变成蓝色的了．

现在再来更改下需求，当我把鼠标移动到某个超链接上的时候，超链接的字体就变大，这个又该怎么实现呢？？

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*超链接的默认样式*/
            color:black;
            font-size:24px;
            text-decoration:none;
        }
        a:hover{
            /*当鼠标移动到超链接时的样式*/
            text-decoration:underline;
            font-size:50px;
        }
        a:visited{
            /*点击超链接后的样式*/
            color:red;
        }
        a:active{
            /*鼠标按下的样式*/
            color:blue;
        }
    </style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>

刷新浏览器，跟正常的时候一样，现在再把鼠标放在一个超链接上，显示的效果又会改变了．

image

上面针对的都是对所有的超链接的处理，现在想对不同的超链接做不同的样式，该怎么做呢？？

初始效果如下：

image

现在把第三个超链接变成别的样式．

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*超链接的默认样式*/
            color:black;
            font-size:24px;
            text-decoration:none;
        }
        a:hover{
            /*当鼠标移动到超链接时的样式*/
            text-decoration:underline;
            font-size:50px;
        }
        a:visited{
            /*点击超链接后的样式*/
            color:red;
        }
        a:active{
            /*鼠标按下的样式*/
            color:blue;
        }
        a.baidu:link{
            color:gold;
        }
    </style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a class="baidu" href="http://www.baidu.com">点击进行百度页面</a><br>
</body>
</html>

刷新浏览器．显示效果如下：

image

把鼠标移动到百度的超链接上，看看显示的效果：

image

可以看到，因为没的对这个标签进行设置其样式，所以它继承了整个页面的样式．

现在来对这个超链接设置其样式，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*超链接的默认样式*/
            color:black;
            font-size:24px;
            text-decoration:none;
        }
        a:hover{
            /*当鼠标移动到超链接时的样式*/
            text-decoration:underline;
            font-size:50px;
        }
        a:visited{
            /*点击超链接后的样式*/
            color:red;
        }
        a:active{
            /*鼠标按下的样式*/
            color:blue;
        }
        a.baidu:link{
            color:gold;
        }
        a.baidu：hover{
            color:blue;
        }
    </style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a class="baidu" href="http://www.baidu.com">点击进行百度页面</a><br>
</body>
</html>

刷新浏览器后显示的效果跟上面的一样，但是把鼠标放在这个超链接上的时候，颜色就改变了，如下图所示：

image
伪类选择器主要是用来控制超链接的相关样式．

常用的伪类选择器
1、before和after伪类

在p标签前面添加内容：
p:before{
content:"start";
color:red;
}

在p标签后面添加内容：
p:after{
content:"end";
color:red;
}

 

2、a伪类
<a href="http://wwww.baidu.com">百度一下</a>
a:link {color:red;}

a:visited {color:blue;}

a:hover {color:green;}
a:active {color:yellow;}

a:hover 必须位于 a:link 和 a:visited 之后！！【hover属性必须应用在link上，且被访问过】
a:active 必须位于 a:hover 之后！！
  1. id选择器
    基本语法:

id选择器名称{

CSS属性:属性值;
CSS属性:属性值;
}
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>css的基础选择器</title>
<link rel="stylesheet" type="text/css" href="../index.css">
</head>
<body>
<div id="container">
<h3>抖音</h3>
<p>
布偶猫又称<span id="peiqi">布拉多尔猫</span>，是猫中体形和体重较大的一种。布偶猫于1960年开始繁育，1965年在美国获得认可。布偶猫头呈V形，眼大而圆，被毛丰厚，四肢粗大，身体柔软，多为三色或双色猫。布偶猫全身非常松弛，像软绵绵的布偶一样。它性格温顺、恬静，对人非常友善，对疼痛的忍受性相当强，常被误认为缺乏疼痛感。它非常能容忍孩子的玩耍，也因此被称为<spon class="active">布偶猫，是非常理想的家养宠物</span>
</p>

</div>
</body>
</html>
刷新浏览器．显示效果如下：


id选择器.png

4 .类选择器
基本语法：
.c1 {
color: red;
}
代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.te1{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>

<p><span class="te1">李白</span></p>
</div>
</body>
</html>
刷新浏览器．显示效果如下：


0923.PNG

5 后代选择器
div p {
color: red;
}
从div的所有后代中找p标签，设置字体颜色为红色。

6 子代选择器
div>p {
color: red;
}
从div的直接子元素中找到p标签，设置字体颜色为红色

7 组合选择器

组合选择器

在css文件中，组合选择器可以是id选择器，类选择器，html标签选择器等

实例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span1{
            color:red;
            font-weigth:bold;
        }
        .span2{
            color:red;
            font-weight:bold;
            font-size:30px;
        }
        .span3{
            color:red;
            font-weight:bold;
            font-size:50px;
            background-color:silver;
        }
        .span4{
            color:red;
            font-weight:bold;
            font-size:50px;
            background-color:silver;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</body>
</html>

刷新浏览器后显示的效果如下：

image

虽然达到了效果，但是所用到的代码太烦杂了，可以使用更好的办法．

修改后的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span1,.span2,.span3,.span4{
            color:red;
            font-weight:bold;
        }
        .span2{
            font-size:30px;
        }
        .span3{
            font-size:50px;
            background-color:silver;
        }
        .span4{
            font-size:50px;
            background-color:silver;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</body>
</html>

刷新浏览器，看到的效果跟上面的是一样的．

现在想要把网页中所有的字体颜色都变成绿色的，就只用修改一行代码就可以了．
修改后的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span1,.span2,.span3,.span4{
            color:green;
            font-weight:bold;
        }
        .span2{
            font-size:30px;
        }
        .span3{
            font-size:50px;
            background-color:silver;
        }
        .span4{
            font-size:50px;
            background-color:silver;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</body>
</html>

修改后的效果如下：

image

现在再来修改代码，在span2这个类标签中添加一个颜色属性，其值为红色的，效果会怎么样呢？？

修改后的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span1,.span2,.span3,.span4{
            color:green;
            font-weight:bold;
        }
        .span2{
            font-size:30px;
            color:red;
        }
        .span3{
            font-size:50px;
            background-color:silver;
        }
        .span4{
            font-size:50px;
            background-color:silver;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</body>
</html>

刷新浏览器后，显示的效果如下：

image

8 属性选择器
代码如下：
<div class="gradefather"> hello1
　　<div name="son">hello2
　　　　<p name="son">hello4</p>
　　</div>
　　<p name="son">hello3</p>
　　<p>hello5</p>
</div>

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E，Element。在此处可以省略，比如“[cheacked]”。以下同。）
p[name] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 。值仅等于val的元素。
p[name=”son”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值包含“val”的E元素

p[name~=”son”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值val开头的每个元素
div[name^="test"]{background:#ffff00;}

E[attr=val] 匹配属性值以指定值val结尾的每个元素** **div[name="test"]{background:#ffff00;}

E[attr=val] 匹配属性值中包含指定值val的每个元素*
div[name="test"]{background:#ffff00;}*

E[attr|=val] 匹配属性值中包含以"val-"开头的值
div[name="test-hahaha"]{background:#ffff00;}*

注意：
1、~ 是多个属性中，包含有val（精确匹配）属性的元素；而*是指属性包含有val即匹配（模糊匹配）。
例如：

name="girl boy"(~和都可匹配) 和name="girl-boy"（仅可匹配）
2、| 是指以val-开头的元素
3、E[attr]，E代表标签，attr代表属性。
9 选择器优先级排序

CSS_02.png

转载：[https://www.cnblogs.com/skyflask/p/8678997.html]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,884评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,212评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 167,351评论 0赞 360
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,412评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,438评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,127评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,714评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,636评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,173评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3赞 339
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,073评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,763评论 3赞 332
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2赞 358