CSS 选择器——（标记、包含关系、类、id、分组、伪类及伪对象选择器）

来源：互联网发布：彗星网络测速器编辑：程序博客网时间：2024/05/21 14:45

CSS选择器种类：

①。标记类型选择器

②。包含关系选择器

③。类选择器

④。id选择器

⑤。分组选择器

⑥。伪类及伪对象选择器

就是通过不同的方式找到页面中的对象

①标记类型选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        body {color:blue;font-size:15px;background-color:green;}    </style></head><body>    这是body里面的内容</body></html>

设置body中字体颜色为蓝色，字体大小为15px，body的背景色为绿色

②包含关系选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        body a {color:red;background-color:yellow;}    </style></head><body>    这是body里面的内容    <a href="http://www.baidu.com">百度</a></body></html>

设置body中的a标记字体为红色，背景为黄色

③类选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        p.left{text-align:left;}        p.right{text-align:right;}    </style></head><body>    <p calss="left">这段文字居左对齐</p>    <p class="right">这段文字居右对齐</p></body></html>

设置类名为left的p标记样式为居左对齐，类名为right的p标记样式为居右对齐

④id选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        #w {color: green;}    </style></head><body>   <p id="w">一段文字</p></body></html>

设置id为w的标记字体为绿色

⑤分组选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        p,table{font-size:20px;font-family:YouYuan;}    </style></head><body>    <table>        <tr><th>1</th><th>2</th></tr>        <tr><td>x</td><td>x</td></tr>    </table>   <p>一段文字</p></body></html>

设置p标记和table标记的字体大小都为20px，字体样式都为幼圆

*混合

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        p,table,.a{color:purple;}    </style></head><body>    <table><tr><th>table中的文字</th></tr></table>   <p>p标记中的文字</p>    <div class="a">div中的文字</div></body></html>

设置p标记，table标记以及类为a的标记字体均为紫色

⑤伪类及伪对象

四种最常用的a（锚）元素的伪类（当然也可用在li上）
link visited active hover

未访问已访问激活链接鼠标停留

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">       a:link{color:red;}       a:visited{color:green;}       a:active{color:yellow;font-size:25px;}       a:hover{color:blue;}    </style></head><body>   <a href="http://www.baidu.com">百度</a></body></html>

未访问时

已访问

激活链接(就是点击的时候)：这里不知道为什么颜色效果出不来，但是字体确实变大了

鼠标停留

2.首字放大（例如一些报刊上常用的效果）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">    p:first-letter{font-size:300%;}    </style></head><body>    <p>这是一个段落，这个段落的首字被放大了，<br/>       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX    </p></body></html>

其实伪类及伪对象还有很多，在这里我只列了常用的两个例子。

0 0