(1)css3属性选择器
<style>
/* 属性选择器使用方法 */
/* 选择的是: 既是button 又有 disabled 这个属性的元素 */
/* 属性选择器的权重是 10 */
/* 1.直接写属性 */
button[disabled] {
cursor: default;
}
button {
cursor: pointer;
}
/* 2. 属性等于值 */
input[type="search"] {
color: pink;
}
/* 3. 以某个值开头的 属性值 */
div[class^="icon"] {
color: red;
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
color: green;
}
/* 5. 可以在任意位置的 */
div[class*="icon"] {
color: blue;
}
</style>
</head>
<body>
<!-- disabled 是禁用我们的按钮 -->
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="iicon3">图标4</div>
<div class="absicon">图标5</div>
</body>
(2)css3结构伪类选择器
<style>
/* div :nth-child(1) {
background-color: pink;
}
div :nth-child(2) {
background-color: purple;
} */
/* div span:nth-child(1) { 这个选不到
background-color: pink;
} */
div span:nth-child(2) {
background-color: pink;
}
/* 总结: :nth-child(n) 选择 父元素里面的 第 n个孩子, 它不管里面的孩子是否同一种类型 */
/* of-type 选择指定类型的元素 */
div span:first-of-type {
background-color: purple;
}
div span:last-of-type {
background-color: skyblue;
}
div span:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<div>
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
<!-- ul 里面我们只允许放li 所以 nth-child 和 nth-of-type 就一样了 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
记住nth:child(n)n指的是元素
- n可以是数字、关键字和公式
- n如果是数字,就是选择第几个
- 常见的关键词有even偶odd 奇数
- 常见的公式如下(如果n是公式,则从0开始计算)但是第0个元素或者超出了元素的个数会被忽略)
(2)css3伪类选择器
注意:
- before 和after 必须有content 属性
- before在内容的前面,after在内容的后面
- before和after创建一个元素,但是属于行内元素。
- 因为在dom里面看不见刚才创建的元素,所以我们称为伪元素伪元素和标签选择器一样,权重为1
<style>
div {
width: 300px;
height: 300px;
border: 1px solid #000;
}
div::before {
content: "我";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
div::after {
content: "小猪佩奇";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>是</div>
</body>