css3选择器

最新推荐文章于 2024-08-30 08:59:35 发布

青栀zjl

最新推荐文章于 2024-08-30 08:59:35 发布

阅读量245

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_36373178/article/details/79607988

版权

第一，内联样式表，通过HTML元素的style属性直接将样式嵌入HTML标记中；
//原则上不使用
第二，样式规则块，将表示样式的style属性的内容，全部提到公共的样式规则块中，以方便管理和扩展；
//放在head里
第三，外部链接样式文件，将样式彻底独立成一个文件，供任何页面调用。

选择器：
基本选择器（例如body）
标签选择器（例如：h1）
id选择器css（引用时前面#号，例如：#heart{}）
class选择器（引用时带点号，例如：.fancy{}）
a[href^="http:"]
[]表示属性具备等号左边的属性，并且以右边的内容开头
^表示属性的头部以http：开头
$匹配字符串的尾部
*只要有无论什么位置都匹配
4个属性选择器：

E[foo]：选择匹配E的元素，且该元素定义了foo属性。
E选择符可以省略，表示选择定义了foo属性的任意类型的元素，下面几个用法相同。

E[foo="bar"]：选择匹配E的元素，且该元素定义了foo属性值为bar。

E[foo~="bar"]：选择匹配E的元素，且该元素定义了foo属性，
foo属性值是一个以空格符分隔的列表，其中一个列表值为“bar”，
例如，a[title~="bar"]匹配<a title="bar1bar2bar3"></a>，而不匹配<a title="bar2 bar3 bar4"></a>。

E[foo|="en"]：选择匹配E的元素，且该元素定义了foo属性，
foo属性值是一个以连字符（-）分隔的列表，值开头的字符为“en”。
E[foo^="bar"]：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为“bar”的子字符串。

E[foo$="bar"]：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为“bar”的子字符串。

E[foo*="bar"]：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”的子字符串。

伪类选择器及伪元素

伪类选择器：CSS中已经定义好的选择器，不能随便取名。
常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active。

伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。
CSS中有如下4种伪元素选择器。
first-line：为某个元素的第一行文字使用样式；

first-letter：为某个元素中的文字的首字母或第一个字使用样式；

before：在某个元素之前插入一些内容；

after：在某个元素之后插入一些内容；
first-child选择器指的是选择F的第一个子元素(所有第一个子元素都会被选择)。

:last-child选择最后一个子元素。
nth-child(n)用来定位某父元素的一个或多个特定的子元素。

:nth-last-child(n)选择器用于选择在其父元素中倒数第n个位置的元素或特定某元素。
:first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

:last-of-type选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

<style>
ul li{list-style:none;margin-top:5px}
ul :first-child{background:red}
ul :last-child{banckground:green}
ul :nth-child(2n){banckground:black}//偶数行选中
ul :nth-child(2){banckground:lime}//第二行选中
</style>
<body>
<h1>child</h1>
<ul>
<li>23333</li>
<li>23333</li>
<li>23333</li>
<ul>
:only-child选择器匹配的元素的父元素中有且仅有一个子元素。例如， E:only-child选择的是这个E元素，也就是子元素。

root、not、empty和target（伪类以冒号开头）
root将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分。

not想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用not样式。

//id不为footer的div，选中背景为粉色
div:not([id="footer"]){
background: pink;
}

empty用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格都不行。

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

//target内部锚连接的目标
:target{/*这里的:target就是指id="brand"的div对象*/
display:block;

//实现页面内跳转（内部锚连接）
<head>
<meta charset="UTF-8">
<title>使用target选择器控制样式</title>
<style>
.menuSection{
display: none;//隐藏
}
:target{/*这里的:target就是指id="brand"的div对象*/
display:block;
}
</style>
</head>
<body>
<h2><a href="#brand">Brand</a></h2>//超链接到下方的div
<div class="menuSection" id="brand">//该div被隐藏，当点击上方的连接后出现
content for Brand
</div>
</body>

选择器E:hover、E:active和E:focus 鼠标悬浮，激活（鼠标按下），获取焦点（按下后释放）
E:hover选择器用来指定当鼠标指针移动到元素上面时，元素所使用的样式。

E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开时）时使用的的样式。

E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。

<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>

E:enabled选择器用来指定当前元素处于可用状态时的样式
E:disabled选择器用来指定当前元素处于不可用状态时的样式

<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>

E:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式

E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式

<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>

E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。
在ff下需要写成-moz-checked的形式
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox">水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>

E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。
需要注意的是，即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态，
使用E:default选择器设定的样式依然有效。
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>

E:indeterminate选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。
如果用户选中这组中的任何一个单选按钮，那么整组的单选按钮的样式被取消。
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别：
<input name="sex" type="radio">男
<input name="sex" type="radio">女
</form>

E::selection选择器用来指定当元素处于选中状态时的样式。
这里需要注意的是:在ff下使用时，需要写成-moz-selection的形式。
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">

E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的
诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。

E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的
诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入E-mail">
</form>
</body>

E:required伪类选择器用来指定允许使用required属性，
而且已经指定了required属性的input元素、select元素以及textarea元素的样式。

E:optional伪类选择器用来指定允许使用required属性，
而且未指定了required属性的input元素、select元素以及textarea元素的样式。
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>

E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。

E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;

}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>

青栀zjl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3选择器

第一，内联样式表，通过HTML元素的style属性直接将样式嵌入HTML标记中； //原则上不使用第二，样式规则块，将表示样式的style属性的内容，全部提到公共的样式规则块中，以方便管理和扩展； //放在head里第三，外部链接样式文件，将样式彻底独立成一个文件，供任何页面调用。选择器：基本选择器（例如body）标签选择器（例如：h1） id选择器css（引用时前面#号，例如...
复制链接

扫一扫