选择器基础知识

最新推荐文章于 2022-07-15 16:58:27 发布

洛神赋在csdn

最新推荐文章于 2022-07-15 16:58:27 发布

阅读量363

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_23143555/article/details/78386075

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

为什么需要选择器？
选择器可以直接将样式和元素绑定起来，
同时可以取代没有任何语义的class属性。
从而避免了在web程序或者网站完成以后又要修改样式所花费的大量时间。

什么是选择器？
连接html源代码和css样式表的神器，使样式表修饰源码中特定的元素的内容。

选择器的作用：进行样式指定，具体说就是，采用正则表达式的方式，声明该样式
应用于什么元素，该元素的某个属性值必须是什么。

指定样式时常用的通配符：^(开头字符任意匹配)，？(结尾字符任意匹配)，*(包含字符匹配)

/*=============属性选择器====================*/
任包含选择器[att *= value]{style};
首包含选择器[att ^= value]{style};
尾包含选择器[att $= value]{style};
代码示例：

<html>
<head>
  <meta charset = "UTF-8">
  <style type = text/css>
	/*只要属性值中包含section1即可，不论位置如何*/
	[id *= section1]
	{
		background:yellow;
	}
	/*属性值开头包含即可*/
	[id ^= section]
	{
		background:red;
	}
	/*属性值结尾包含即可*/
	[id $= \-2]
	{
		background:green;
	}
  </style>
  
  
</head>

<body>
<div id = "section1">马诗</div>
<div id = "subsection1-1">大漠沙如雪</div>
<div id = "subsection1-2">关山月似勾</div>
<div id = "subsection1-3">何当金络脑</div>
<div id = "subsection1-4">快走踏清秋</div><hr>

<div id = "section2">人民解放军占领南京</div>
<div id = "subsection2-1">钟山风雨起苍黄</div>
<div id = "subsection2-2">百万雄师过大江</div>
<div id = "subsection2-3">虎踞龙盘今胜昔</div>
<div id = "subsection2-4">天翻地覆慨而慷</div>
<div id = "subsection2-5">宜将剩勇追穷寇</div>
<div id = "subsection2-6">不可沽名学霸王</div>
<div id = "subsection2-7">天若有情天亦老</div>
<div id = "subsection2-8">人间正道是沧桑</div>
</body>

</html>

/*==========伪类选择器====================*/
类选择器可以随便起名，伪类选择器的名字是元素预定的，不可改变。
伪类选择器能够把相同的元素根据不同的状态定义成不同的样式。
CSS最常用的是a(锚)元素上的几种选择器。
a:link{style};
a:visited{style};
a:hover{style};
a:active{style};
代码示例：

/*============伪元素选择器===============*/
伪元素选择器不是针对真正的元素使用的选择器，而是针对已经定义好的伪元素使用的选择器。
CSS主要的4个伪元素选择器
first-line伪元素选择器:为某个元素的第一行文字使用样式。
first-letter伪元素选择器:为某个元素的第一个字母使用样式。
before伪元素选择器：在某元素之前插入一些内容。注意：插入文本要加上双引号。
after伪元素选择器：在某元素之后插入一些内容。注意：<p>aaa<hr>bbb</p>，p:after{}是在aaa后插入不是在bbb后加入。
代码示例：

<html>
<head>
  <meta charset = "UTF-8">
  <style type = "text/css">
    :root
	{
	  background-color:yellow;
	}
	body *:not(h1)
	{
	  background-color:limegreen;
	}
	:empty
	{
	  background:red;
	}
    p:first-line
	{
		color:red;
	}
	p:first-letter
	{
		font-size:40px;
		font-weight:bold;
	}
	p:before
	{
	  content:"说什么 脂正浓 粉正香 如何两鬓又成霜 	";/**文字要加双引号/
	  color:grad;
	  font-size:25px;
	}
	p:after
	{
	  content:"昨怜破袄寒 今嫌紫蟒长";
	}
	table
	{
	  border:2px solid balck;
	}
  </style>
  
</head>

<body>
  <h1>好了歌</h1>
  <p>昨日黄土隆中埋白骨<hr>今宵红灯帐里卧鸳鸯<hr>训有方<hr>保不定日后作强梁<hr>择高粱<hr>谁承望<hr>流落在烟花巷</p>
  <table>
  <tr><td>金满箱</td><td>银满箱</td></tr>
  <tr><td>展眼乞丐人皆谤</td><td></td></tr>
  </table>
</body>
</html>

/*==========结构性伪类选择器=======================*/
root选择器讲样式绑定到html元素上。
not选择器相对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。
empty选择器指定当元素的内容为空时使用的样式。
target选择器对页面中某个target元素指定样式。
代码示例：

<html>
<head>
  <meta charset = "UTF-8">
  <style type = "text/css">
    :target
	{
	  background-color:yellow;
	  display:inline;
	}
  </style>
</head>
<body>

<p id = "menu">
<a href = "#text1">赤壁怀古</a><br>
<a href = "#text2">短歌行</a><br>
<a href = "#text3">观沧海</a><br>
<a href = "#text4">龟虽寿</a><br><hr>
</p>

<div id = "text1">
大江东去，浪淘尽，千古风流人物。<br>
故垒西边，人道是，三国周郎赤壁。<br>
乱石穿空，惊涛拍岸，卷起千堆雪。<br>
江山如画，一时多少豪杰。<br>
遥想公瑾当年，小乔初嫁了，雄姿英发。<br>
羽扇纶巾，谈笑间，樯橹灰飞烟灭。<br>
故国神游，多情应笑我，早生华发。<br>
人生如梦，一尊还酹江月。<br><hr>
</div>

<div id = "text2">
对酒当歌，人生几何！<br>
譬如朝露，去日苦多。<br>
慨当以慷，忧思难忘。<br>
何以解忧？唯有杜康。<br>
青青子衿，悠悠我心。<br>
但为君故，沉吟至今。<br>
呦呦鹿鸣，食野之苹。<br>
我有嘉宾，鼓瑟吹笙。<br>
明明如月，何时可掇？<br>
忧从中来，不可断绝。<br>
越陌度阡，枉用相存。<br>
契阔谈讌，心念旧恩。<br>
月明星稀，乌鹊南飞。<br>
绕树三匝，何枝可依？<br>
山不厌高，海不厌深。<br>
周公吐哺，天下归心。<br><hr>
</div>

<div id = "text3">
东临碣石，以观沧海。<br>
水何澹澹，山岛竦峙。<br>
树木丛生，百草丰茂。<br>
秋风萧瑟，洪波涌起。<br>
日月之行，若出其中；<br>
星汉灿烂，若出其里。<br>
幸甚至哉，歌以咏志。<br><hr>
</div>

<div id = "text4">
神龟虽寿，犹有竟时。<br>
腾蛇乘雾，终为土灰。<br>
老骥伏枥，志在千里。<br>
烈士暮年，壮心不已。<br>
盈缩之期，不但在天；<br>
养怡之福，可得永年。<br>
幸甚至哉，歌以咏志。<br><hr>
</div>
</body>
</html>

first-child选择器：父元素中第一个子元素
last-child选择器：父元素中最后一个子元素
nth-child选择器：父元素中指定序号的子元素
nth-last-child选择器：父元素中倒数序号子元素
代码示例：

<html>
<head>
  <meta charset = "UTF-8">
  <style>
    li:first-child
	{
	  background-color:yellow;
	}
	li:last-child
	{
	  background-color:skyblue;
	}
	li:nth-child(2)
	{
	  background-color:blue;
	}
	li:nth-last-child(2)
	{
	  background-color:green;
	}
	p:nth-child(odd)
	{
	  background:#246;
	}
	p:nth-child(even)
	{
	  background-color:#38F;
	}
  </style>
</head>

<body>
  <ul>
    <li>风雨送春归，飞雪迎春到。</li>
	<li>已是悬崖百丈冰，犹有花枝俏。</li>
	<li>俏也不争春，只把春来报。</li>
    <li>待到山花烂漫时，她在丛中笑。</li>
  </ul>
  
  <p>人民胜利今何在</p>
  <p>满路新贵满目衰</p>
  <p>核弹高置昆仑巅</p>
  <p>摧尽腐朽方释怀</p>
</body>

</html>

循环选择器：p:nth-child(an+b)
代码示例：

<html>
<head>
  <meta charset = "gbk">
  <style type = "text/css">
    p:nth-child(3n+1)
	{
		background-color:yellow;
	}
	p:nth-child(3n+2)
	{
		background-color:limegreen;
	}
	p:nth-child(3n+3)
	{
		background-color:red
	}
  </style>
</head>

<body>
<h1>走吧</h1>
<p>
走吧<br>
落叶吹进深谷<br>
歌声却没有归宿<br>
</p>

<p>
走吧<br>
冰上的月光<br>
已从河面上溢出<br>
</p>

<p>
走吧<br>
眼睛望着同一片天空<br>
心敲击着暮色的鼓<br>
</p>

<p>
走吧<br>
我们没有失去记忆<br>
我们去寻找生命的湖<br>
</p>

<p>
走吧<br>
路呵路<br>
飘满了红罂粟<br>
</p>
</body>

</html>

/*========UI元素状态伪类选择器================*/
特征：指定的状态只有当元素处于某种状态下才会发生作用。默认情况下，不起作用。
E:hover{style}指定当鼠标指针移动到元素上面时元素才会使用的样式。
E:active{style}指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。
E:focus{style}文本框控件获得焦点并进行输入时使用的样式。
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
input:focus
{
	background-color:greenyellow;
}
input:hover
{
	background-color:skyblue;
}
input:active
{
	background-color:yellow;
}
</style>
</head>

<body>
<form>
<p>姓名: <input type = "text" name = "name"></p>
<p>地址: <input type = "text" name = "address"></p>
</form>

</body>
</html>

E:enabled{style}指定元素处于可用状态时的样式
E:disabled{style}指定元素处于不可用状态时的样式
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
input[type = "text"]:enabled
{
  background-color:yellow;
}
input[type = "text"]:disabled
{
  background-color:purple;
}
</style>

<script>
function radio_onchange()
{
	var radio = document.getElementById("radio1");
	var text = document.getElementById("text1");
	if (radio.checked)
	{
		text.disabled = "";
	}
	else
	{
		text.value = "";
		text.disabled = "disabled";
	}
}
</script>
</head>

<body>
<form>
<input type = "radio" id = "radio1" name = "radio" onchange = "radio_onchange();">可用 
<input type = "radio" id = "radio2" name = "radio" onchange = "radio_onchange();">不可用<br>
<input type = "text" id = "text1" disabled>
</form>
</body>
</html>

E:read-only伪类选择器：指定元素处于只读状态下的样式。
E:read-write伪类选择器：指定元素处于非只读状态下的样式。
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
input[type = "text"]:read-only
{
	background-color:skyblue;
}
input[type = "text"]:read-write
{
	background-color:greenyellow;
}
</style>
</head>

<body>
<form>
<fieldset>
<legend>read-only vs read-write</legend>
<input type = "text" name = "name">
<input type = "text" name = "address" value = "蕲春县三角山" readonly = "readonly">
</fieldset>
</form>
</body>
</html>

E:checked伪类选择器：指定表单中的单选框radio或者复选框checkbox被选中时的样式。
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
input[type = "checkbox"]:checked
{
	outline:2px solid red;
}
input[type = "checkbox"]:default
{
	outline:2px solid yellow;
}

input[type = "radio"]:checked
{
	outline:2px solid red;
}
input[type = "radio"]:default
{
	outline:2px solid yellow;
}
</style>
</head>

<body>
<form>
<fieldset>
<legend>兴趣</legend>
<label><input type = "checkbox" checked>吃</label>
<label><input type = "checkbox">喝</label>
<label><input type = "checkbox">嫖</label>
<label><input type = "checkbox">赌</label>
</fieldset>
</form>

<form>
<fieldset>
<legend>爱好</legend>
<label><input type = "radio" name = "radio" checked>吃</label>
<label><input type = "radio" name = "radio">喝</label>
<label><input type = "radio" name = "radio">拉</label>
<label><input type = "radio" name = "radio">撒</label>
</fieldset>
</form>
</body>
</html>

E:selection伪类选择器
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
input[type = "text"]::selection
{
	background-color:red;
}
table
{
	border:1px solid #48c;
	cellpadding:2px;
	cellspacing:2px;
	margin:4px;
}
td::selection
{
	background-color:skyblue;
}
p::selection
{
	background-color:yellow;
}
</style>
</head>
<body>
<label>文本框：<input type = "text" name = "text"></label>
<table>
<tr><td>卑鄙是卑鄙者的通行证</td><td>高尚是高尚者的墓志铭</td></tr>
</table>
<p>
	目击众神死亡的草原上野花一片
	远在远方的风比远方更远
	我的琴声呜咽 泪水全无
	我把这远方的远归还草原
	一个叫木头 一个叫马尾
</p>
</body>
</html>

通用兄弟元素选择器：指定位于同一级别的某个元素之后的所有其它某个种类的兄弟元素所使用的样式。
代码示例：

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
div ~ p
{
	background-color:#00FF00;
}
</style>
</head>

<body>
<div>
<p>以前不来报导我们绥德的大好形势，现在一出这事你们就过来，这不是给我们的工作添乱吗?</p>
</div>

<p>我就是干了，怎么样?要多少钱你们开个价吧。我给钱嘛!”“你知道我是谁吗?我是北京交通部派下来的，级别和你们市长一样高，和市委书记是山东老乡。我卡了小孩的脖子又怎么样，你们这些人算个屁呀!敢跟我斗，看我怎么收拾你们</p>
<p>你们将来受了处分，吊销了你们的记者证，你们不要后悔!</p>
<p>我是法院的，我代表国家罗汉，花100万弄死你这个农民。</p>

<div>
<p>叫门卫把她扣下来!我今天要做一个轰动全国的事情!</p>
<p>这是啥考试，还弄得和真的一样;我掏钱买文凭，你有啥资格管我!</p>
<p>替党说话，还是替老百姓说话?</p>
</div>
<p>你知道重庆为什么打击黑恶势力不?你知道什么叫恶不?跟政府作对就是恶。</p>
<body>
</html>