#标签选择器
<style>
div{
color: green;
}
span{
color: pink;
}
</style>
<body>
<div>标签选择器</div>
<div>标签选择器</div>
<div>标签选择器</div>
<span>标签选择器</span>
<span>标签选择器</span>
</body>
效果: 
#类名选择器与多类名
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
}
</style>
<body>
<div class="red font20">多类名写法</div>
<div class="red">类名选择器</div>
<div>类名选择器</div>
<span>类名选择器</span>
<span class="red">类名选择器</span>
</body>
效果: 
ID选择器
<style>
#red {
color: red;
}
</style>
<body>
<!-- id名不能重复设置 -->
<div id="red">id选择器</div>
<!-- id是唯一的不能重复虽然有效果! -->
<div id="red">id选择器</div>
</body>
效果: 
通配符选择器
<style>
/* 选中页面上所有的标签 */
* {
color: palevioletred;
}
</style>
<body>
<div>我是文字</div>
<p>我是文字</p>
<span>我是文字</span>
<em>我是文字</em>
</body>
效果: 
后代选择器
<style>
div p span{
color: gold;
}
</style>
<body>
<div>
<p><span>后代选择器</span></p>
<p>后代选择器</p>
</div>
</body>
效果: 
子代选择器
<style>
ul li>a{
color: red;
}
</style>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
效果:
交集选择器
<style>
div.red{
color: red;
}
</style>
<body>
<div>交集选择器</div>
<div>交集选择器</div>
<div class="red">交集选择器</div>
<p>交集选择器</p>
<p>交集选择器</p>
<p>交集选择器</p>
<p class="red">交集选择器</p>
</body>
效果: 
并集选择器
<style>
div,p,span{
color: red;
}
</style>
<body>
<div>并集选择器</div>
<div>并集选择器</div>
<div>并集选择器</div>
<p>并集选择器</p>
<p>并集选择器</p>
<p>并集选择器</p>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<h1>并集选择器</h1>
<a href="#">并集选择器</a>
</body>
效果: 
相邻兄弟选择器
<style>
/* 选中div后面p元素 */
div+p {
color: red;
}
</style>
<body>
<p>相邻兄弟选择器</p>
<div>相邻兄弟选择器</div>
<div>相邻兄弟选择器</div>
<div>相邻兄弟选择器</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
效果:
通用匹配选择器
<style>
/* 选中div后面全部p元素 */
div~p {
color: red;
}
</style>
<body>
<p> 通用选择器</p>
<div>通用选择器</div>
<div>通用选择器</div>
<div>通用选择器</div>
<p> 通用选择器</p>
<p> 通用选择器</p>
</body>
效果: 
动态伪类选择器
<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;
}
input:focus {
/* 获取焦点时被的样子 */
background-color: gold;
}
</style>
<body>
<a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
效果:
目标伪类选择器
<style type="text/css">
/* 匹配元素被相关URL指向 */
#div1 :target p {
color: red;
}
</style>
<body>
<div id="div1">
i am div1
<div id="div2">
i am div2
<p>pppp</p>
</div>
</div>
<a href="#div2">click me</a>
</body>
效果: 
UI元素状态伪类选择器语法
<style type="text/css">
/* checked 元素被选中后触发 */
input:checked+p {
color: red;
}
/*enabled 启用的表单元素 */
input:enabled+p {
color: green;
}
/* disabled 禁用的表单元素 */
input:disabled+p {
color: blue;
}
</style>
<body>
<input type="radio" disabled>
<p>abc</p>
</body>
效果: 
结构伪类选择器使用语法
<style type="text/css">
/*first-child 作为父元素的第一个子元素 */
li:first-child {
color: red;
}
/*last-child 父元素的最后一个子元素的元素 */
li:last-child {
color: gold;
}
/*
nth-child 选中父元素的第n个子元素
其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
*/
ul li:nth-child(2n -1) {
background: chartreuse;
}
/*
nth-last-child 选择父元素倒数第n个子元素。nth-child(n)选择器计算顺序刚好相反，
但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素
*/
ul li:nth-last-child(2n) {
background: gray;
}
/*
nth-of-type()
父元素内具有指定标签的第n个子元素
*/
ul div:nth-of-type(2) {
background: chocolate;
}
/*
nth-last-of-type()
父元素内具有指定标签的倒数第n个子元素
*/
ul div:nth-last-of-type(2) {
background: chocolate;
}
/*
first-of-type
父元素内具有指定标签的第1个子元素
*/
ul div:first-of-type {
background: greenyellow;
}
/*
last-of-type
父元素内具有指定标签的倒数第1个子元素
*/
ul div:last-of-type {
background: greenyellow;
}
/*only-child 选择父元素只包含一个子元素 */
div p:only-child {
background: cadetblue;
}
/* only-of-type 父元素只包含一个同类型子元素 */
div p:only-of-type {
background: cadetblue;
}
/*
empty 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格），
无论一个元素是否为 (empty 或 not), 注释或处理指令都不会产生影响。
*/
/* body {
display: flex;
justify-content: space-around;
} */
.box {
background: red;
height: 200px;
width: 200px;
float: left;
margin: 0 20px;
}
.box:empty {
background: lime;
}
</style>
<body>
<ul>
<div>
嘿嘿
</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<div>嘿嘿</div>
</ul>
<div>
<p>这是一个段落。</p>
</div>
<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
<div class="box"><!-- I will be lime --></div>
<div class="box">I will be red</div>
<div class="box">
<!-- I will be red because of the whitespace around this comment -->
</div>
</body>
小部分效果: 
否定伪类选择器
<style>
p {
color: #000000;
}
/* 设置非 <p> 元素的所有元素的背景色 */
:not(p) {
color: #ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
</body>
效果: 
属性选择器语法
<style>
/* 选取带有指定属性的元素 */
[class]{
color: red;
}
[type]{
background-color: gold;
}
/* 选取带有指定属性和值的元素 */
[class = 'DD']{
background-color: black;
}
[type = 'password']{
background-color: red;
}
/* 选取属性值中包含指定词汇的元素 */
[class ~= 'abc']{
background-color: pink;
}
[class ~= 'ww']{
background-color: pink;
}
/* 选取带有以指定值开头的属性值的元素，该值必须是整个单词 */
[lang |='top' ] {
background-color: pink;
}
/* 属性值以指定值开头的每个元素 */
[class ^= 'a']{
background-color: chartreuse;
}
/* 匹配属性值以指定值结尾的每个元素。 */
[class $= 'd']{
background-color: crimson;
}
/* 匹配属性值中包含指定值的每个元素 */
[class *= 'dwh']{
background-color: cornflowerblue;
}
</style>
<body>
<div class="XX">哈哈哈</div>
<div class="DD ww aa">哈哈哈</div>
<div class="abcdddd abc dddwhh">哈哈哈</div>
<div class="abcdddd abc dddwhh">哈哈哈</div>
<input type="text">
<input type="text">
<input type="text">
<input type="password">
<p lang="top-da">pppppppppppppp</p>
<p lang="adda">dddddddddddddd</p>
</body>
效果: 
扫一扫
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
