CSS 选择器
CSS 基本选择器及其扩展
CSS 基本选择器
- 通配符选择器
* - 元素选择器
使用标签的名称 - 类选择器
使用 . 进行匹配 - ID 选择器
使用 # 进行匹配 - 后代选择器
使用空格进行匹配
>代码案例
```html
<style>
* { /* 通配符选择器 */
margin: 0;
padding: 0;
}
p { /* 元素选择器 */
color: pink;
}
div { /* 元素选择器 */
width: 100px;
height: 100px;
}
#test-id{ /* ID选择器 */
font-size:24px;
}
.test-class{ /* 类选择器 */
color:red;
}
.test-class p{ /* 后代选择器 */
color:pink;
}
</style>
<body>
<div id="test-id" class="test-class">
这是一个 div 块级元素
<p>这是一个p标签</p>
</div>
</body>
```
CSS 扩展选择器
直接后代选择器
使用 > 匹配相邻兄弟选择器
使用 + 匹配通用兄弟选择器
使用 ~ 匹配-
选择器分组
使用 , 分组代码案例
<style> .container>div { /* 直接后代选择器 */ border: purple 1px solid; } .div1+p { /* 相邻兄弟选择器 */ color: pink; } .div1~p { /* 通用兄弟选择器 */ border: springgreen 1px solid; } .test1, .test2, .test3 { /* 选择器分组 */ font-size: 50px; color: yellowgreen; } </style> <body> <div class="container"> <div class="div1">1</div> <p>p1相邻兄弟</p> <div> div2 <div>div2-1</div> </div> <div>3</div> <p>p2通用兄弟</p> <div class="test1">4</div> <div class="test2">5</div> <div class="test3">6</div> <div>7</div> </div> </body>
属性选择器
存在和值选择器
[attr]该选择器选择包含 arrt 属性的所有元素，不论 attr 的值如何。[attr=val]该选择器仅选择 attr 属性被赋值为 val 的所有元素。-
[attr~=val]表示带有 attr 命名的属性的元素，并且该属性是一个以空格作为分割的值列表，其中至少包含一个值为 val。代码案例
<style> div[name] { /* [attr] */ background: dodgerblue; } div[name="dalaomao"] { /* [attr=val] */ border: 1px solid pink; } div[name~="test"] {/* [attr~=val] */ color: yellowgreen; } </style> <body> <div class="container"> <div name="dalaomao">带name属性的div</div> <div name="test xss">测试2的div</div> </div> </body>
子串值属性选择器
[attr|=val]选择 attr 属性值为 val(包含val)，或者val-开头的元素。[attr^=val]选择 attr 属性值以 val(包含 val) 开头的元素。[attr$=val]选择 attr 属性值以 val(包含 val) 结尾的元素。-
[attr*=val]选择 attr 属性值中包含字符串 val 的元素。代码案例
<style> ul>li[class|="atguigu"] { /* [attr|=val] */ border: 1px solid; } ul>li[class^="atguigu"] {/* [attr^=val] */ border-color: yellowgreen; } ul>li[class$="guigu"] {/* [attr$=val] */ background: deeppink; } ul>li[class*="-"]{/* [attr*=val] */ background: deepskyblue; } </style> <body> <ul> <li class="atguigu">atguigu</li> <li class="atguigu-1">atguigu-1</li> <li class="atguigu-2">atguigu-2</li> <li class="atguigu-3">atguigu-3</li> <li class="atguigu-4">atguigu-4</li> <li class="guigu">guigu</li> <li class="guigu1">guigu1</li> <li class="guigu2">guigu2</li> </ul> </body>
伪类与伪元素选择器
链接伪类
以下三个伪类仅可以作用于 "链接" 上,故叫 “链接伪类”，又叫“锚点伪类”.
:link表示作为超链接,并指向一个未访问地址的所有锚。:visited表示作为超链接,并指向一个已访问地址的所有锚。-
:target表示一个特殊元素，它的 ID 是URI 的片段标识符。代码案例
<style> /* link & visited 使用方法 */ .container a:link { /* :link */ color: pink; } .container a:visited { /* :visited */ color: green; } </style> <body> <div class="container"> <a href="#">Click me.</a> </div> </body>target 面试题(用CSS实现选项卡)
<style> * { padding: 0; margin: 0; } a { text-decoration: none; color: deeppink; } div { width: 200px; height: 200px; background: pink; display: none; font: 50px/200px "Copperplate"; } :target{ display: block; } </style> <body> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">div3</a> <div id="div1">DIV1</div> <div id="div2">DIV2</div> <div id="div3">DIV3</div> </body>
动态伪类
:hover表示鼠标悬浮到元素上时。-
:active表示匹配被用户激活的元素(鼠标按下未抬起时)。代码案例
<style> .container a:hover { /* :hover */ color: deeppink; } .container a:active {/* :active */ color: deepskyblue; } </style> <body> <div class="container"> <a href="#">Click me.</a> </div> </body>
表单伪类
:enabled匹配可编辑的表单:disabled匹配被禁用的表单:checked匹配被选中的表单-
:focus匹配获取焦点的表单代码案例
<style> .container input:enabled { /* 可编辑的表单 背景色改为 粉色 */ background: pink; } .container input:disabled { /* 禁用的表单 背景色改为 绿色 */ background: green; } .container input:focus { /* 表单获取焦点时背景颜色改为 深粉色 */ background: deeppink; } </style> <body> <div class="container"> <input type="text"> <input type="text" disabled> </div> </body>自定义单选按钮案例
<style> * { margin: 0; padding: 0; } label { float: left; width: 100px; height: 100px; border: 1px solid; border-radius: 50%; position: relative; } input { position: absolute; top: -50px; left: -50px; display: none; } span { position: absolute; border-radius: 50%; top: 0; left: 0; bottom: 0; right: 0; } input:checked+span { background: pink; } </style> <body> <label> <input type="radio" name="test" checked> <span></span> </label> <label> <input type="radio" name="test"> <span></span> </label> <label> <input type="radio" name="test"> <span></span> </label> </body>
结构性伪类
注意：
① index 的值从 1 开始计数.
② index 可以为变量 n (只能是 n)
-
:nth-child(idnex)系列:first-child:last-childnth-last-child(idnex)only-child相当于 :first-child:last-child 或者 :nth-child(index):nth-last-child(index)代码案例
<style> /* 获取 ul 下边的所有子元素，并且匹配到第一个子元素，并且 这个子元素必须是 li. */ /* 第一个是 li标签 的时候生效 */ ul>li:nth-child(1) { color: palegreen; } /* 第一个标签是 p标签 的时候生效 */ ul>p:first-child { color: deeppink; } /* 最后一个标签是 li标签 的时候生效 */ ul>li:last-child { color: green; } /* 倒数第二个标签是 li标签 的时候生效 */ ul>li:nth-last-child(2) { color: deepskyblue; } /* 只有一个 p标签 的时候生效 */ ul>p:only-child { color: violet; } </style> <body> <ul> <p>我是 ul 的第一个 p 儿子</p> <li>1</li> <p>我是 ul 的第二个 p 儿子</p> <li>2</li> <li>3</li> <li>4</li> <a href="#">我是a标签</a> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> -
:nth-of-type(index)系列:first-of-type:last-of-type:nth-last-type(index)only-of-type代码案例
<style> /* 我要选择的是第二个 li标签 */ ul>li:nth-of-type(2) { color: deeppink; } /* 我要选择的是倒数第二个 li标签 */ ul>li:nth-last-of-type(2) { color: blueviolet; } /* 我要选择的是第一个 li标签 */ ul>li:first-of-type { color: greenyellow; } /* 我要选择的是最后一个 li标签 */ ul>li:last-child { color: hotpink; } /* 我要选择的是仅有的一个 a标签 */ ul>a:only-of-type { color: yellowgreen; } </style> <body> <ul> <p>我就是一个 p1 .</p> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <a href="#">我是一个 a标签 </a> <li>7</li> <li>8</li> <p>我就是一个 p2 .</p> </ul> </body> :not:empty内容必须是空的，有空格都不行，有 attr 没关系。
伪元素选择器
未完待续.
