用户代理(User Agent,简称UA)是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等
属性选择器
语法
E[att = ‘val’]{}
att 后接^表示以val开头
接$表示以val结尾
接*表示包含val
接~表示以空格分开的’单词’选择 空格可以多个
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input[type^='t'] {outline: none;color: red;}</style></head><body><input type="text" />username <input type="password" />password</body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input[type$='d'] {outline: none;color: red;}</style></head><body><input type="text" />username <input type="password" />password</body></html>
这里的属性也可以是自定义的属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input[typeIndex^='n'] {outline: none;color: red;}</style></head><body><input type="text" typeIndex="normal" />username <input type="password" />password</body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input[typeIndex~='first'] {outline: none;color: red;}</style></head><body><input type="text" typeIndex="normal first" />username <input type="password" />password</body></html>
E[att |= ‘val’]{}
一般用在p标签用于以下情况
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>p[lang|='en'] {color: red;}</style></head><body><p lang="en-us">aaaa</p></body></html>
伪类选择器
:root
:root 相当于设置html标签
但是它的权重更高
当想要更改html元素的样式时 可以直接使用:root更改
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {background-color: green;}:root {background-color: orange;}</style></head><body></body></html>
:not()
使用时一般指定父级
找到与匹配到的相反的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input:not([typeIndex$='first']) {outline: none;color: red;}</style></head><body><input type="text" typeIndex="normal first" />username<input type="password" typeIndex="normal second" />password</body></html>
使用:not优先级不会改变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input:not([typeIndex~='second']) {color: blue;}input[typeIndex~='first'] {outline: none;color: red;}</style></head><body><input type="text" typeIndex="normal first" />username<input type="password" typeIndex="normal second" />password</body></html>
:empty
找到子元素节点或文本为空
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 10px;background-color: red;width: 100px;height: 100px;}.box:empty {background-color: blue;}</style></head><body><div class="box"><!-- 有注释的空元素 --></div><div class="box">这是空的元素</div><div class="box"><!-- 有换行的空元素 --></div></body></html>
:target
用户当前指向的元素
一般用在超链接锚点中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>:target {background-color: #000;}</style></head><body><h4 id="one">这是h4</h4><p id="two">这是p</p><div id="three">这是div</div><a id="fore">这是A</a><em id="five">这是em</em><a href="#one">First</a><a href="#two">Second</a><a href="#three">Third</a><a href="#fore">Fouth</a><a href="#five">Fifth</a></body></html>
:first-child :last-child :nth-child :nth-last-child
odd 2n+ 奇数
even 2n 偶数
an + b
a:循环的个数
b:循环中的第几个
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">p:first-child {background-color: red;}p:nth-child(3) {background-color: orange;}p:nth-last-child(3) {background-color: purple;}p:last-child {background-color: blue;}</style></head><body><div><p>第一</p><p>第二</p><p>第三</p><p>第四</p><p>第五</p><p>第六</p><p>第七</p><p>第八</p></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">p:nth-child(4n + 1) {background-color: orange;}p:nth-child(4n + 2) {background-color: blue;}p:nth-child(4n + 3) {background-color: red;}p:nth-child(4n + 4) {background-color: purple;}</style></head><body><div><p>第一</p><p>第二</p><p>第三</p><p>第四</p><p>第五</p><p>第六</p><p>第七</p><p>第八</p></div></body></html>
:first-of-type :last-of-type :nth-of-type :nth-of-type
div:first-child
div下兄弟元素中第一次出现的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">div :first-child {background-color: red;}</style></head><body><div><span>span1</span><span>span2</span><span>这是<em>嵌套em</em>的span</span><span>这是<span>嵌套span</span>的span</span><em>这是em</em><span>这是最后一个span</span></div></body></html>
div:first-of-type
div下兄弟元素 在同一级中第一次出现的元素也会被选中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">div :first-of-type {background-color: red;}</style></head><body><div><span>span1</span><span>span2</span><span>这是<em>嵌套em</em>的span</span><span>这是<span>嵌套span</span>的span</span><em>这是em</em><span>这是最后一个span</span></div></body></html>
结构选择器
:only-child
找到父元素下唯一出现一次的子元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">.box :only-child {color: red;}</style></head><body><div class="box"><div><i>只有一个子元素</i></div><div><i>我是i标签</i><em> 我是em标签 </em><span>我有一个<span>我是里面的span</span></span></div></div></body></html>
UI元素状态伪类选择器
:hover :focus :active
:hover鼠标滑过
:active元素被激活 鼠标按下没松开时的状态
:focus聚焦之后的状态
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input:focus {color: red;}input:active {color: blue;}input:hover {color: purple;}</style></head><body><input type="text" />username</body></html>
不松开鼠标输入
松开鼠标输入
:enabled :disabled
:disabled 元素禁用时的样式
:enabled 元素可用时的样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='text']:disabled {background-color: red;}</style></head><body><input type="text" disabled="disabled" />username</body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='text']:enabled {background-color: red;}</style></head><body><input type="text" />username</body></html>
:read-only :read-write
:read-only 只读状态时的样式
:read-write 可读写时的样式
设置只读与禁用时 都不可以操作
只读时表单设置默认样式 数据可以提交给后台
禁用时表单数据 不能提交给后台
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='text']:read-only {background-color: red;}</style></head><body><input type="text" readonly="readonly" />username</body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='text']:read-write {background-color: red;}</style></head><body><input type="text" />username</body></html>
:checked :default
:checked 单选框与复选框被选中时的样式
:default 页面打开默认选中的选项的样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='radio']:checked {outline: 2px solid #000;}</style></head><body><input type="radio" /><input type="checkbox" />a <input type="checkbox" />b</body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">input[type='checkbox']:checked {outline: 2px solid #000;}input[type='checkbox']:default {outline: 2px solid red;}input[type='radio']:default {outline: 2px solid red;}</style></head><body><input type="radio" id="man" checked /><label for="man">男</label><input type="checkbox" id="read" checked /><label for="read">阅读</label><input type="checkbox" id="tourist" /><label for="tourist">旅游</label><input type="checkbox" id="basketball" /><label for="basketball">篮球</label></body></html>
:indeterminate
不确定的表单元素
使用时 我们需要获取到 需要指明样式的元素
将其indeterminate属性更改为true
页面打开 就会有样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">:indeterminate,:indeterminate + label {background-color: red;}</style></head><body><div><input type="checkbox" id="checkbox" /><label for="checkbox">这是input1</label></div><div><input type="checkbox" id="radio" /><label for="radio">这是input2</label></div><script>var oIt = document.getElementsByTagName('input');for (let i = 0; i < oIt.length; i++) {oIt[i].indeterminate = true;}</script></body></html>
当点击一次之后 样式消失
伪元素
::first-letter ::first-line
::first-letter 第一个字母 一定要是块级元素才生效
::first-line 第一行 一定要是块级元素才生效
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">.box {width: 200px;height: 200px;border: 1px solid #000;}.box p::first-letter {color: red;}</style></head><body><div class="box"><p class="text">hello这是为了test这是为了test这是为了test这是为了test</p></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">.box {width: 200px;height: 200px;border: 1px solid #000;}.box p::first-line {color: red;}</style></head><body><div class="box"><p class="text">hello这是为了test这是为了test这是为了test这是为了test</p></div></body></html>
::selection
选中时生效 行内元素 块级元素都会生效
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">.box {width: 200px;height: 200px;border: 1px solid #000;}.box p::selection {color: red;}</style></head><body><div class="box"><p class="text">hello这是为了test这是为了test这是为了test这是为了test</p></div></body></html>
user-select
user-select: none;
限制用户复制
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style type="text/css">.box {user-select: none;}</style></head><body><div class="box"><span class="text">hello这是为了test这是为了test这是为了test这是为了test</span></div></body></html>
css3-属性选择器 伪类:root :not() :first-of-type :first-child 伪元素 ::first-letter ::first-line ::selection等等
