1.5 CSS的常用选择符

优质

小牛编辑

130浏览

2023-12-01

1.5.1 css2的选择符(重要)

(1). html选择符（标签选择器）

就是把html标签作为选择符使用
如 p{....}  网页中所有p标签采用此样式
h2{....}  网页中所有h2标签采用此样式

(2). class类选择符 (使用点.将自定义名（类名）来定义的选择符)

定义：  .类名{样式....}    匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>        
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;}  /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用

(3). Id选择符:

定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次.

选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

(4). 关联选择符（包含选择符）

格式： 选择符1 选择符2 选择符3 ...{样式....}

table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

(5). 组合选择符（选择符组）

格式： 选择符1,选择符2,选择符3 ...{样式....}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

(6). 伪类选(伪元素)择符：

格式：标签名:伪类名{样式....}

a:link {color: #FF0000; text-decoration: none}             /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none}          /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline}     /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline}     /* 激活链接 */

1.5.2 CSS3中的选择器（熟悉）

(1). 关系选择器：

div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p

(2). 属性选择器：

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。 
[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

(3). 结构性伪类选择器：

::first-letter设置对象内的第一个字符的样式。 
::first-line设置对象内的第一行的样式。 
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
:lang(language)匹配使用特殊语言的E元素。 
:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
:last-child()匹配父元素的最后一个子元素
:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML 
:empty匹配没有任何子元素（包括text节点）的元素

(4). *状态伪类选择器

:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active     设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover    设置元素在其鼠标悬停时的样式
*:focus    设置元素在其获取焦点时的样式
:target    匹配相关URL指向的E元素
:enabled   匹配用户界面上处于可用状态的元素
:disabled   匹配用户界面上处于禁用状态的元素
:checked   匹配用户界面上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection  设置对象被选择时的样式

(5). 其他伪类选择器

E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}