sssssssssss

最新推荐文章于 2023-01-10 18:11:05 发布

kingkissmm

最新推荐文章于 2023-01-10 18:11:05 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/kingkissmm/article/details/8170494

版权

选择器target
target 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。
选择器focus(注意这是常用的强大的)
focus 伪类用于改变 input 和 textarea 等标签在获得焦点时的样式。当展示在用户面前的是一个项目繁多的表单时，使用 focus 伪类能使更易找到焦点
例：
CSS样式：

.txtinput{
width:200px;
height:30px;
margin:5px;
}
.txtinput:focus{
border:solid 2px #fc0000;
}

复制代码

HTML代码：

<input class="txtinput" name="" type="text">
<input class="txtinput" name="" type="text">

复制代码

选择器root
匹配文档的根元素。在HTML中，根元素永远是HTML（这个。。。就是HTML嘛！-_-||好纠结）

选择器not
选择除了（）中选择器之外的标签元素。
例：
CSS样式：

.txtnot{
width:200px;
color:#000;
}
*:not(li){
color:#fc0000;
}
HTML代码：
<ul class="txtnot">
<li>这里不变色</li>
<li>
<span>这里是红色</span>
</li>
</ul>

复制代码

first-child 与 last-child
匹配其父元素的第n个子元素中第一个子元素与最后一个子元素
例：
CSS样式：

.texfstcld{
width:200px;
}
.texfstcld li{
width:100%;
background-color:#999;
list-style:none;
border:solid 1px #000;
}
.texfstcld li:first-child{
border-top:none;
}
.texfstcld li:last-child{
border-bottom:none;
}
HTML代码：
<ul class="texfstcld">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>

复制代码

nth-child
匹配X元素中从头数第几个标签
例：
CSS样式：

.txtnthcld{
width:200px;
}
.txtnthcld p{
color:#099;
}
.txtnthcld p:nth-child(3){
color:#fc0000;
}

复制代码

HTML代码：
<ul class="txtnthcld">
   <p>我们是一起的</p>
   <p>不得变成红的</p>
   <p>我是第三个，我要变红求关注</p>
</ul>

nth-of-type
与:nth-child()作用类似，但是仅匹配使用同种标签的元素
nth-last-of-type
nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
only-child
匹配父元素下仅有的一个子元素
例：
CSS样式：

.txtonlycld{
width:200px;
}
.txtonlycld p{
color:#099;
}
.txtonlycld p:only-child{
color:#fc0000;
}

复制代码

HTML代码：

<ul class="txtonlycld">
<p>我们是一起的</p>
<p>不得变成红的</p>
</ul>
<ul class="txtonlycld">
<p>我只有一个个，我要变红求关注</p>
</ul>

复制代码

3 UI元素状态伪类选择器
E：hover E:active E：focus
E：hover 指定鼠标指针移动到元素上面时候元素使用的样式
E:active 指定激活被指定元素（鼠标在元素上按着还没有松手）时候使用的样式；
E：focus指定元素获取光标焦点时候使用的样式。

<style type="text/css" media="all">
input[type="text"]:hover{ background: #6CF;}
input[type="text"]:focus{ background: #390;}
input[type="text"]:active{ background: #9FF;}
</style>
</head>
<body>
<p>姓名：<input type="text" name="name" /></p>
<p>地址：<input type="text" name="address" /></p>
</body>

复制代码

什么也没有发生                            鼠标悬停的时候

点击鼠标还没有松手的时候       获取焦点的时候

这里做实例的时候发现个问题，active 写样式的时候要写到，focus后面，否则是不生效的，这里我是这样理解的，当active的时候其实也是focus，focus写到active后面就把样式重写了。相反focus的时候单击这样active在后面来重写样式，当失去active的时候，回到focus。我是这样理解的，但是是否合理有待验证。

E: enabled    E：disabled
E:enabled  匹配所有用户界面（form表单）中处于可用状态的E元素
E：disabled匹配所有用户界面（form表单）中处于不可用状态的E元素
这两个伪类，主要针对表单元素，例如下面
<input type="text" value="" disabled="disabled" />
可以用input ：disabled选择到它，就是表单不可用的样式，默认元素表单的属性是enabled也就是说E: enabled 选择的是没有 disabled="disabled"属性的表单元素。
放弃说明的伪类
E:read-only    E:read-write
E:checked       E:default
E:indeterminate
E :: selectipon
这些大家可以在网上找些资料或者参看css3.0手册，放弃的原因是因为实用性不大，或许在以后发现强大之处，把这块补充完整。
4通用兄弟元素选择器
关于选择器部分，最后介绍的是通用兄弟选择器，它用来指定位于同一个父元素之中的某个元素的之后的所有其他某个种类的兄弟元素所使用的样式。
<子元素>~<子元素之后的同级兄弟元素>{
//指定样式
}
例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<title>通用兄弟元素选择器 E ~ F</title>
</head>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<div>
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
</div>
<hr />
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
<hr />
<p>匹配E元素之后的F元素</p>
<hr />
<div>匹配E元素之后的F元素</div>
<hr />
<p>匹配E元素之后的F元素</p>
</div>
</body>
</html>

复制代码

kingkissmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sssssssssss

选择器targettarget 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。选择器focus(注意这是常用的强大的)focus 伪类用于改变 input 和 textarea 等标签在获得焦点时的样式。当展示在用户面前的是一个项目繁多的表单时，使用 focus 伪类
复制链接

扫一扫