首页 > 代码库 > 选择器

选择器

2024-07-13 07:20:57   232人阅读

CSS中有7种选择器：
1、元素选择器
例如：
h1{
font-size:12px;
}
h2,h3,h4{
font-size:23px;
}
<h1>helloworld</h1>
<h2></h2>
...

2、类选择器：
例如：
.important{
 background-color:red;
}
/*只有包含important 和 warning两个类的元素才会被选中*/
.important.warning{
background-color:sliver;
}


<p class="important">hw</p> <!--背景颜色为红色-->
<p class="important warning">hw</p><!--背景颜色为银色-->

3、ID选择器：
例如：
#name{
font-size:1.2em;
}
/*通配将会被忽略*/
*#name{
font-size:1.2em;
}

<input id="name"  type="text" /><!--字体1.2倍当前字体-->

ID选择器和类选择器的区别：
a、ID选择器只能在一个HTML文档中使用一次
b、ID选择器不能结合使用

4、 属性选择器：
例如：
a[title]{
color:red;
}
<a title="1" href="http://www.mamicode.com/1.html">1</a><!--颜色变红-->
<a href="http://www.mamicode.com/2.html">2</a> <!--颜色无变化-->

/*根据多个属性进行选择*/
a[title][href]

/*根据具体值选择*/
a[href="http://www.mamicode.com/1.html"]{
color:blue;
}

<a href="http://www.mamicode.com/1.html">A</a><!--会被选中-->
<a href="http://www.mamicode.com/2.html">B</a><!--不会被选中-->

/*多个属性值具体值匹配选择*/
a[href="http://www.mamicode.com/1.html"][title="1"]

/*属性值必须完全匹配*/
p[class="important warning"]{
 background-color:red;
}
<p class="important warning">D</p>

/*根据部分值选择*/
/*将只选择class中包含important的标签*/
p[class~="important"]
img[title~="Figure"]{
border:1px solid gray;
}
<img title="Figure 1"  src="http://www.mamicode.com/1.jpg"/><!--会被选中-->
<img src="http://www.mamicode.com/2.jpg" /><!--不会被选中-->

/*子串匹配属性选择器*/
[abc^="def"] /*abc属性以def开头的*/
[abc$="def"]/*abc属性以def结尾的*/
[abc*="def"]/*abc属性包含def的*/
[attribute|=value]    /*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/

5、后代选择器：
例如：
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1> <!--红色-->
<p>This is a <em>important</em> paragraph.</p>

如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

6、子元素选择器：
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <!--红色-->
<h1>This is <em>really <strong>very</strong></em> important.</h1>

7、相邻兄弟选择器：
例如：
li + li {font-weight:bold;}
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li><!--被选中-->
    <li>List item 3</li><!--被选中-->
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li><!--被选中-->
    <li>List item 3</li><!--被选中-->
  </ol>
</div>
<!--上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。-->

伪类选择器：

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */a:visited {color: #00FF00}    /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF}    /* 选定的链接 */

亲自试一试

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。


来源： http://www.w3school.com.cn/css/css_pseudo_classes.asp

伪元素：
http://www.w3school.com.cn/css/css_pseudo_elements.asp
 
a:visited:hover{color:red}


UI元素状态伪类：
:enabled，:disabled，:checked （IE6-8不支持）
例如：type="text" 对应enabled 和 disabled
type="raido" 和 type="checkbox" 对应 checked 和 unchecked两种状态。

css3的:nth选择器
  • :fist-child选择某个元素的第一个子元素；
  • :last-child选择某个元素的最后一个子元素；
  • :nth-child()选择某个元素的一个或多个特定的子元素；
  • :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
  • :nth-of-type()选择指定的元素；
  • :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
  • :first-of-type选择一个上级元素下的第一个同类子元素；
  • :last-of-type选择一个上级元素的最后一个同类子元素；
  • :only-child选择的元素是它的父元素的唯一一个了元素；
  • :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  • :empty选择的元素里面没有任何内容。
     





















    • 来自为知笔记(Wiz)


    联系
    我们