首页 > 代码库 > CSS选择器
CSS选择器
CSS选择器：指定样式规则可作用于HTML文档中哪个或者哪些元素。
1、元素选择器：选择匹配选择器的网页上的任何HTML元素。 （元素名称{}）
<title></title>
<style type="text/css">
div{
color:red;
}
p{
font-size: 23px;
}
</style>
</head>
<body>
<div>jfdksah</div>
<p>文化建设</p>
</body>
2、CSS类选择器：被用于选择有某个class属性的任何HTML元素。 （.类名{}）
<title></title>
<style type="text/css">
.p1{
color: aqua;
}
.class1{
font-size: 23px;
}
</style>
</head>
<body>
<p class="p1">道具卡经费和回家
</p>
<div class="class1">jfdsjkh
</div>
</body>
3、ID选择器：与类选择器相似，它可以被用于选择有某个ID属性的任何HTML元素。（#id名{}）
<title></title>
<style type="text/css">
#它{
color: gold;
}
</style>
</head>
<body>
<div id="它">
kdjsalfkjj
</div>
</body>
4、后代选择器：用于选择在文档中一个元素的所有后代元素。 （选择器空格选择器{}）
<title></title>
<style type="text/css">
p b{
color: green;
font-size: 43px;
}
</style>
</head>
<body>
<p>jkdjkfj <b>附近开赛</b>aaaajdkfjskj</p>
<p>dkjjfj <strong>家开发商</strong>dff</p>
</body>
5、 伪类选择器：CSS 伪类用于向某些选择器添加特殊的效果
（1）锚伪类：
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
（2）focus 伪类：
规定获得焦点的输入字段的颜色，所有主流浏览器都支持 :focus 伪类，如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。
input:focus { color:yellow; }（3）first-child 伪类：
:first-child 伪类向元素的第一个子元素添加样式。
<style type="text/css">p:first-child{font-weight:bold}</style> <p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p><p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
6、 伪元素选择器：用于向某些选择器设置特殊效果
（1）:first-line 伪元素：用于向文本的首行设置特殊样式，只能用于块级元素。
p:first-line { color:#ff0000; font-variant:small-caps; }（2）:first-letter 伪元素：用于向文本的首字母设置特殊样式，只能用于块级元素。
p:first-letter { color:#ff0000; font-size:xx-large; }CSS选择器