时间:2020年09月21日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 723次 | 评论 0 人
*{ border: 1px solid #F00; }
就是type类型,比如div,p,直接写这个节点,这里*号是全部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ border: 1px solid #F00; } </style> </head> <body> <div> <table> <tr> <td>AY</td> </tr> <tr> <td>WPF</td> </tr> <tr> <td>WEB学习</td> </tr> </table> </div> </body> </html>
增加两个元素选择器
<style type="text/css"> *{ border: 1px solid #F00; } div{ border: 10px solid #00F; } td{ color: rgb(121, 168, 131); } </style>
下面以div举例子
div{...}
div[id] 元素[attr特性] 。具有id特性的div
div[id=xx] id=xx的div
div[id ~=value] id属性里值以空格隔开的系列值,比如说class="show bigfont"
div[id |=value] id属性值以连字符分隔的系列值,其中第一个值为value的Tag元素起作用
div[id^="xx"] id属性值以xx开头的 div
div[id$="xx"] id属性值以xx结尾的div
div[id*="xx"] id属性值包含xx的div
html节点都有id特性,取个名字,比如取 <div id="idvalue"></div>
可以这样获取到这个div,然后附加样式
#idvalue
如果还有个<p id="idvalue"></p>
也叫这个
可以 div#idvalue
事实上很少有重复的id
对class=ayclass的所有元素起作用
.ayclass{
border:1px solid #f00;
}
也可以 更精确点,对class=ayclass的div元素起作用
div.ayclass
{
border:1px solid #f00;
}
使用
<div class="ayclass"></div>
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
用空格表示层级,不限多少层,比如div是第一层, 内部的元素随便多少层才出现的
例如: div下的所有a元素
div a{
...
}
div下的所有class=a的元素
div .a{
...
}
div下的所有class=a的p元素
div p.a{
...
}
用>表示下级,限多少层,比如div是第一层, 则只对第二级生效
例如: div下的内部第一级别的a元素
div>a{
...
}
div下的内部第一级别的 所有class=a的元素
div .a{
...
}
div下的内部第一级别的 所有class=a的p元素
div p.a{
...
}
用~表示后面的同级节点
例如:
id=idvalue的元素后面,同级别的a元素
#idvalue ~ a{
...
}
id=idvalue的元素后面,同级别的 class="a"的元素
#idvalue ~ .a{
...
}
用, 英文号表示组合使用
div,a,#abc,#idvalue ~ a{
...
}
:first-letter 指定对象类第一个字符。
仅对块元素,例如 div,p,section等,如果想对行内元素例如span,必须设定对象的width和height。或者设置position:absolute.或者设置display:block,通过该选择器配合font-size,float可以制作首字母下沉效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first-letter</title> <style type="text/css"> span { display: block; } span:first-letter{ color: #f00; font-size: 20pt; } section:first-letter{ color: #00f; font-size:30pt; font-weight: bold; } p:first-letter{ color: #00f; font-size:40pt; font-weight: bold; } div:first-letter{ color: #00f; font-size:50pt; font-weight: bold; } </style> </head> <body> <span>abc</span> <section>杨洋的web</section> <p>神说ay的一圈一圈</p> <div> div而已 </div> </body> </html>
:first-line 指定对象内第一行内容
仅对块元素,例如 div,p,section等,如果想对行内元素例如span,必须设定对象的width和height。或者设置position:absolute.或者设置display:block
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first-letter</title> <style type="text/css"> span { display: block; } span:first-line{ color: #f00; font-size: 20pt; } section:first-line{ color: #00f; font-size:30pt; font-weight: bold; } p:first-line{ color: #00f; font-size:40pt; font-weight: bold; } </style> </head> <body> <span>abc<br/>def</span> <section>杨洋的wpf<br/>学习css</section> <p style="width:140px;">神说ay的一圈一圈</p> </body> </html>
:before 与内容相关的属性结合使用,在指定对象内部的 前端插入内容
配合content属性使用
比如在p前面增加一个content
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first-letter</title> <style type="text/css"> span { display: block; } span:first-line{ color: #f00; font-size: 20pt; } section:first-line{ color: #00f; font-size:30pt; font-weight: bold; } /* p:first-line{ color: #00f; font-size:40pt; font-weight: bold; } */ p:before{ content: "html5:"; background-color:yellow; color:red; font-weight:bold; font-size:40pt; } </style> </head> <body> <span>abc<br/>def</span> <section>杨洋的wpf<br/>学习css</section> <p style="width:140px;">神说ay的一圈一圈</p> </body> </html>
继续增加一个p元素
<body> <span>abc<br/>def</span> <section>杨洋的wpf<br/>学习css</section> <p style="width:140px;">神说ay的一圈一圈</p> <p style="width:140px;">ay的两圈</p> </body>
写html在content是没用的,就显示普通文本。
:after 与内容相关的属性结合使用,在指定对象内部的 尾端插入内容
顾名思义,添加在后面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first-letter</title> <style type="text/css"> span { display: block; } span:first-line{ color: #f00; font-size: 20pt; } section:first-line{ color: #00f; font-size:30pt; font-weight: bold; } /* p:first-line{ color: #00f; font-size:40pt; font-weight: bold; } */ p:after{ content:"html5"; background-color:yellow; color:red; font-weight:bold; font-size:40pt; } </style> </head> <body> <span>abc<br/>def</span> <section>杨洋的wpf<br/>学习css</section> <p style="width:140px;">神说ay的一圈一圈</p> <p style="width:140px;">ay的两圈</p> </body> </html>
include-source: 应该为url
content: Url(url),attr(alt),counter(name),counter(name,list-style-type),open-quote,close-quote等格式,用于 :before和:after
quotes:用于为content属性定义open-quote和close-quote,该属性的值可以是两个以空格分隔的字符串
counter-increment 定义一个计数器,需要与content结合使用
counter-reset 计数器复位,需要与content结合使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>:after</title> <style type="text/css"> p:after{ content:url("http://www.wpfui.com/abl/o_37.jpg"); background-color:yellow; color:red; font-weight:bold; font-size:40pt; } </style> </head> <body> <p>神说ay的一圈一圈</p> <p>ay的两圈</p> </body> </html>
content支持字符串,还支持url
选择器插入
下面是 class="ayz"的p元素后面插入 一个图片
<style type="text/css"> p.ayz:after{ content:url("http://www.wpfui.com/abl/o_37.jpg"); background-color:yellow; color:red; font-weight:bold; font-size:40pt; } </style> </head> <body> <p>神说ay的一圈一圈</p> <p class="ayz">ay的两圈</p> </body>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>quotes</title> <style type="text/css"> div#pid>p{ quotes: "<<" ">>"; } div#pid>p:before{ content: open-quote; } div#pid>p:after{ content: close-quote; } </style> </head> <body> <div id="pid"> <p>神说ay的一圈一圈</p> <p>神说ay的两圈</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>counter-increment</title> <style type="text/css"> div#pid>p{ counter-increment: aycnter; } div#pid>p:before{ content: counter(aycnter) '.'; font-size: 20pt; color:green; } </style> </head> <body> <div id="pid"> <p>神说ay的一圈一圈</p> <p>神说ay的两圈</p> </div> </body> </html>
再复杂点,二级编号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> body {counter-reset:section;} h1 {counter-reset:subsection;} h1:before { counter-increment:section; content:"Section " counter(section) ". "; } h2:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; } </style> </head> <body> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 counter-increment 属性。</p> <h1>HTML tutorials</h1> <h2>HTML Tutorial</h2> <h2>XHTML Tutorial</h2> <h2>CSS Tutorial</h2> <h1>Scripting tutorials</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML tutorials</h1> <h2>XML</h2> <h2>XSL</h2> </body> </html>
数字项目模板 Section 计数 .
然后全局body开始section计数器重置,遇到h1元素,就重置subsection计数器
修改代码,每次递增3
修改这里的值
值的列表
decimal:数字,默认
disc实心圈
circle:空心圈
square:实心方块
lower-roman:小写罗马数字
upper-roman:大写罗马数字
其他的如下
lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
:root 全局根节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> :root{ background-color: #f00; } </style> </head> <body> <div id="pid"> <p>神说ay的一圈一圈</p> <p>神说ay的两圈</p> <p>神说ay的三圈</p> </div> </body> </html>
必须是第一个元素,如果第一个是p,然后是li,都不能生效
:first-child
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> li:first-child { color: lightcoral; } </style> </head> <body> <ol> <li>www.baidu.com</li> <li>www.ayjs.net</li> <li>www.wpfui.com</li> <li>ayjs.net</li> <li>wpfui.com</li> </ol> <br /> <ul> <li>WWW.baidu.com</li> <li>WWW.ayjs.net</li> <li>WWW.wpfui.com</li> <li>AYJS.net</li> <li>WPFUI.com</li> </ul> </body> </html>
对作为 其父元素的第一个子节点的li元素
:last-child
对作为 其父元素的最后一个子节点的li元素
<style type="text/css"> li:first-child { color: lightcoral; } li:last-child { color: #00FFdd;; } </style>
:nth-child 和 :nth-last-child
第几个子节点
<style type="text/css"> li:first-child { color: lightcoral; } li:last-child { color: #00FFdd;; } li:nth-child(2) { color: blue; } li:nth-last-child(2) { color:purple; } </style>
上面是 对其父元素第二个li 颜色改为蓝色,倒数第二个li改为紫色
:only-child
它的父节点,只有他一个子节点,就生效
测试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> li:first-child { color: lightcoral; } li:last-child { color: #00FFdd; ; } li:nth-child(2) { color: blue; } li:nth-last-child(2) { color: purple; } span:only-child { color: gold; font-size: 60px; } </style> </head> <body> <ol> <li>www.baidu.com</li> <li>www.ayjs.net</li> <li>www.wpfui.com</li> <li>ayjs.net</li> <li>wpfui.com</li> </ol> <br /> <ul> <li>WWW.baidu.com</li> <li>WWW.ayjs.net</li> <li>WWW.wpfui.com</li> <li>AYJS.net</li> <li>WPFUI.com</li> </ul> <span>ay的css1</span> <div> <span>ay的css2</span> </div> </body> </html>
ay的css2上级是div,它下面只有span一个节点,符合唯一子节点的条件
li:nth-child(odd){ background-color: gray; }
li:nth-child(even){ background-color:lightblue; }
li:nth-last-child(odd){ background-color: rgb(160, 210, 243); }
li:nth-last-child(even){ background-color:peru; }
上方再增加一个li
li:nth-child(3n+1){ background-color: rgb(160, 210, 243); }
当n=0时,表示 3n+1等于1
当n=1时,表示 3n+1等于4
当n=2时,表示 3n+1等于7
li:nth-last-child(3n+2){ background-color:peru; }
当n=0时,表示 3n+2等于2
当n=1时,表示 3n+2等于5
当n=2时,表示 3n+2等于8
...
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> li:nth-child(3n+1){ background-color: rgb(160, 210, 243); } li:nth-last-child(3n+2){ background-color:peru; } </style> </head> <body> <ol> <li>www.baidu.com1</li> <li>www.ayjs.net2</li> <li>www.wpfui.com3</li> <li>ayjs.net4</li> <li>wpfui.com5</li> <li>www.bbs.com6</li> <li>www.bbs2.com7</li> <li>www.bbs3.com8</li> <li>WWW.baidu.com9</li> <li>WWW.ayjs.net10</li> <li>WWW.wpfui.com11</li> <li>AYJS.net12</li> <li>WPFUI.com13</li> </ol> </body> </html>
下面的5个和上面 5个的区别,是 在他的父元素,下面,没必要第一个是就是 指定类型的。
如果是 :first-child 由于p的上级是body,然后第一个元素div,最近的一个p是第二个元素,所以不生效
换成
p:first-of-type
p:nth-of-type(2) { background: rgb(124, 124, 233); }
第二个p节点
增加一个only的p
<div> <p id="d3">测试only p</p> </div>
样式
p:only-of-type{ color: rgb(210, 233, 8); }
修改div,保证只有一个p,但是它的父元素不止它一个子元素,有3个,此时 only-of-type就有用处了
only-child无效的
<div> <div>only p的上部</div> <p id="d3">测试only p</p> <div>only p的下部</div> </div>
测试跨越性的p
<body> <div>www.ayjs.net</div> <p>www.baidu.com</p> <p>www.wpfui.com</p> <p>测试</p> <p>测试22</p> <div>www.ayjs.net</div> <p>www.baidu.com2</p> <p>www.baidu.com3</p> <hr/> <div> <div id="ayjs">ayjs.net1</div> <div id="wpf">ayjs.net2</div> <p>www.baidu.com</p> <p>www.wpfui.com</p> <p id="ceshi">测试</p> <p id="ceshi22">测试22</p> <div>www.ayjs.net3</div> </div> <div> <div>only p的上部</div> <p id="d3">测试only p</p> <div>only p的下部</div> </div> </body>
body下,连续4个p,然后加个div,然后2个p
按道理有6个p,测试css,第5个p的背景色换下,运行更没效果的
p:nth-of-type(5) { background: rgb(124, 124, 233); }
得出结论,要连续的元素
同样的, 奇数行,偶数行,正数kn+y,倒数kn+y,例子同上面
测试一个demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> /* p:first-child { border:1px solid lightcoral; } */ p:first-of-type { border:1px solid lightcoral; } p:last-of-type { border:1px solid rgb(195, 50, 252); } p:nth-of-type(2n+1) { background: rgb(124, 124, 233); } p:nth-last-of-type(2) { background: rgb(124, 233, 182); } p:only-of-type{ color: rgb(210, 233, 8); } </style> </head> <body> <div>[div]www.ayjs.net</div> <p>www.baidu.com</p> <p>www.wpfui.com</p> <p>测试</p> <p>测试22</p> <div>[div]www.ayjs.net</div> <p>www.baidu.com2</p> <p>www.baidu.com3</p> <p>www.baidu.com4</p> <hr/> <div> <div id="ayjs">ayjs.net1</div> <div id="wpf">ayjs.net2</div> <p>www.baidu.com</p> <p>www.wpfui.com</p> <p id="ceshi">测试</p> <p id="ceshi22">测试22</p> <div>www.ayjs.net3</div> </div> <div> <div>only p的上部</div> <p id="d3">测试only p</p> <div>only p的下部</div> </div> </body> </html>
得出结论:
先拿到父元素,然后拿到父元素下所有的p,不管中间还有啥元素。
然后,奇数还是偶数,还是正数kn+y,倒数kn+y计算,然后应用的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style type="text/css"> :empty{ height: 60px; border: 1px solid #0F0; } </style> </head> <body> <img src="http://www.wpfui.com/abl/o_37.jpg" alt=""/> <div></div> <div> </div> </body> </html>
第3个div有个空格,非空,所以不应用样式
发现文本框
<input type="text" name="username" id="username"/>
<input type="text" name="username1" id="username1" value="ay"/>
也会被应用。
查出空p的元素
p:empty{ height: 20px; border: 1px solid rgba(0, 255, 200, 0.726); background-color: gray; } <p>文字</p> <p></p> <p>文字2</p>
表示元素的 lang="zh"的元素
p:lang(zh){ background-color: red; }
<p>文字</p> <p></p> <p lang="zh">文字2</p>
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
前面的Selector我省略了。
---超链接的---
:link 未被访问前的元素
:visited 访问过的元素
:active 处于被用户激活(鼠标点击与释放之间的事件)状态的元素。
:hover 鼠标悬停的时候
---文本等---
:focus 获得了焦点时候
:read-only 只读状态的元素
:read-write 处于读写状态的元素
:selection当前被选中的内容
---验证---
:required 具有必填要求的元素
:optional 不具有必填要求的元素
:valid 输入通过校验的元素
:invalid 输入未通过校验的元素
:in-range 处于指定范围内的元素
:out-of-range 处于超出指定范围内的元素
---通用---
:enabled 当前状态可用的
:disabled 不可用状态的元素
---复选,单选---
:checked 选中状态的元素
:default 页面打开时候处于选中状态(当前没有被选中的也行)
:indeterminate 当前选中状态不明确的元素
比如,鼠标按下的input
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>active</title> <style type="text/css"> input:active{ background: blue; } </style> </head> <body> <input type="text" width="120"> </body> </html>
<style type="text/css"> input:active{ background: blue; } input:focus{ text-decoration:underline; } </style>
获得焦点时候,文本框文字,文字下面加一条横线
关于:read-write
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>active</title> <style type="text/css"> input:active { background: blue; } input:focus { text-decoration: underline; } input:read-write { color: seagreen; font-size: 30px; height: 50px; } input:read-only { font-size: 30px; height: 50px; border: 1px solid purple; } </style> </head> <body> <input type="text" width="120"> <br /> <input readonly type="text" width="120"> <br /> <div contenteditable="true"> 测试ay,div </div> </body> </html>
这里还有个
:-moz-read-only
:-moz-read-write
前面-moz-表示 基于Gecko内核的浏览器指定css样式
我测试in-range没效果
不考虑这个选择器,还有浏览器专属的选择器
-ms-开头的,IE浏览器的
-moz- 基于Gecko的
-webkit- 基于webkit的
-wap- 支持 wap的移动电话
微软office,可能使用 -mso-
文本选择的时候
::selection { background-color: #f00; color: #FFF; }
::-moz-selection
必须命名锚点目标的元素
<!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: #f3d491; } </style> </head> <body> <h1>这是标题</h1> <p><a href="#news1">跳转至内容 1</a></p> <p><a href="#news2">跳转至内容 2</a></p> <p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p> </body> </html>
第一次显示
单击锚点,目标的 元素,被赋予了:target指定的样式
Selector1:not(Selector2)
例如下面的,所有p元素,但是p元素的id等于news3的除外
<!DOCTYPE html> <html> <head> <style> p:not(#news3){ font-size: 30px; } </style> </head> <body> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p> <p id="news3"><b>内容 3...</b></p> <p id="news4"><b>内容 4...</b></p> </body> </html>
修改行内css属性值
obj.style.属性名=属性值
修改HTML元素的class属性值
obj.className=class选择器
例如:
document.body.style.backgroundColor="#FF0000";
document.getElementById("XXX").className="newcClassName";
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
推荐您阅读更多有关于“web前端,”的文章
抖音:wpfui 工作wpf,目前主maui
目前在合肥市中安创谷A1科大智联就职,5月底离职
AYUI8全源码 Github地址:前往获取
杨洋(AaronYang简称AY,安徽六安人)和AY交流
高中学历,2010年开始web开发,2015年1月17日开始学习WPF
声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费
不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo
查看捐赠AYUI7.X MVC教程 更新如下:
第一课 第二课 程序加密教程
额 本文暂时没人评论 来添加一个吧
发表评论