html常用选择器?

发布网友 发布时间：2024-09-06 18:00

我来回答

共1个回答

热心网友 时间：2024-11-10 22:43

CSS3选择器大概有一下几个类型：

全局选择器????UniversalSelector

类型选择器????TypeSelector

属性选择器????AttributeSelectors

伪类????Pseudo-classes

伪元素????Pseudo-element

Class选择器????ClassSelectors

ID选择器????ID?埋塌渗Selectors

选择符????Combinator

下面是W3C官网上关于SelectorLevel3的一个表格。我翻译了一下。

不同浏览器对CSS选择器有不同程度的支持，目前的浏览器（IE9前除外）已经支持了下面的绝大部分选择器。

*??任何元素

E??一个E类型的元素?

E[foo]??拥有“foo”属性的E元素

E[foo="bar"]??拥有属性值等于“bar”的“foo”属性的E元素

E[foo~="bar"]??一个E元素，它的“foo”属性值是通过空格分开的一系列的值，其中有一个值等于“bar”

E[foo^="bar"]??一个E元素，它的“foo”属性的值是一个以“bar”开头的字符串

E[foo$="bar"]??一个E元素，它的“foo”属性的值是一个以“bar”结尾的字符串

E[foo*="bar"]??一个E元素，它的“foo”属性值包含字符串“bar”

E[foo|="en"]??一个E元素，它的“foo”属性的值是通过连字符（-）分割的一系列的值的字符串，其中有一个值是以“en”开头?

E:root??一个E元素，是文档的根元素

E:nth-child(n)??一个E元素，是它父元素的第n个子元素

E:nth-last-child(n)??一个E元素，是它父元素的倒数第n个子元素

E:nth-of-type(n)??一个E元素，在它同类型的兄弟元素中排在第n个

E:nth-last-of-type(n)??一个E元素，在它同类型的兄弟元素中排行倒数第n个

E:first-child??一个E元素，是它父元素衫搏的第一个子元素

E:last-child??一个E元素，是它父元素的最后一个子元素

E:first-of-type??一个E元素，是它同类型兄弟元素中的第一个

E:last-of-type??一个E元素，是它同类型的兄弟元素中的最后一个

E:only-child??一个E元素，是它父元素的唯一一个子元素

E:only-of-type??一个E元素，是它同类型的兄弟元素的唯一一个（没有别的同类的兄弟）

E:empty??一个没有子元素的E元素

E:link????一个没有被访问过的，作为超链接的锚点的E元素

E:visited??一个被访问过的锚点E元素?

E:active??一个正处于某些用户操作状态的E元素

E:hover????一个鼠标滑过的E元素

E:focus??一个获得用户焦点的E元素

E:target??一个做为起Refer制定锚点的元素（urlhash相关）

E:lang(fr)??一个language是fr的E元素?

E:enabled????一个UI操作上enabled的E元素

E:disabled??一个UI操作上disabled的E元素?

E:checked??一个UI操作上状态为checked的E元素

E::first-line??E元素中格式化后的第一行

E::first-letter??E元素的第弯脊一个字母

E::before??在E元素之前生成的内容

E::after??在E元素之后生成的内容

E.warning??一个class属性包含warning的E元素

E#myid??一个ID为myid的E元素

E:not(s)??一个不匹配简单的选择器s的E元素

EF??一个作为E元素后代的F元素

EF??一个作为E元素子元素的F元素

E+F??一个紧跟在E元素后面的F元素

E~F??一个出现在E元素前面（紧挨着）的F元素

1.标记选择器主要应用在HTML页中的标记样式选择。如P选择器就用于声明网页中有P标记的文樱敬碧本内容，同理，H1选择器则可以标记页面中H1的样式。例如：H1{font-size:14px;font-weight:bold;color:#ccc;}以上代码表示在所有应用H1选择器的地方，将文字的大小设为14像素并加粗，同时将颜色设为灰色，如果要改变H1的颜色，只需将color属性更改就可以了，比如将color设为#e7eefe来与网页的其他地方协调。脊举2.类别选择器这是一类最常用的选择器，用它来定义网页中需要特殊表现的样式，类别选择器的名称可以由作者自由定义，一般来讲类别选择器的命名最好有一定的意义，使CSS代码更易维护和阅读。例如定义导航就可以使稿念用.hang{}或者是.nav{}，不要使用简略或者特殊的字符串，否则可能三天后当你再读你的CSS代码时，就连你自己都搞不清一个样式到底是做什么用的！类别选择器就是CSS类，在HTML表现为调用的class。例如：(1)style.css文件中定义.title{margin:10px;padding:2px5px;}(2)HTML文件中pclass="title"/p在上述定义中，p标签将引用CSS文件中的title样式应用到整个p覆盖的范围。p将显示为一个上下左右margin各为10px，上下padding为2px，左右padding为5px的矩形。请注意类别选择器CSS定义和标记选择器的区别：在CSS文件中，标记选择器前边没有"."号，下面我们还会讲到ID选择器，它的定义也不一样，每个ID选择器样式前有一个"#"号，以确定其为ID选择器，而在HTML中则用ID="style"引用。值得注意的是，一个标签可以同时应用多个class选择器，如h3class="style1style2"/h3,具体大家可以在下边思考并做下实验，笔者在这就不举例了。3.ID选择器(1)ID选择器用法和class基本没有区别，他们的不同之处就在于ID选择器只能在HTML页中使用一次，而class则可以任意多次调用，在CSS文件中，ID选择器一般写成#idname{bgcolor:#339;font-size:16px;}如果一个ID应用于多个HTML标记，则有可能造成IE编译错误，并且由于ID选择器可以被JAVASCRIPT等调用，所以多个ID会导致JAVA编译错误并崩溃！(2)HTML的引用在HTML中引用ID选择器的代码如下所示：divid="name"/div并且ID选择器不能像类别选择器那样同时被一个标签调用。这也是完全错误的语法。复合选择器就是基本选择器通过不同的链接方式构成的。复合选择器就是两个或多个基本选择器，通过不同方式链接而成的选择器。