码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器

时间:2018-02-21 15:52:50      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:after   而在   let   结构   鼠标悬停   输入   基本   输入框   文字   

CSS选择器决定了样式规则适用于哪些

基本选择器

元素选择器

文档的元素就是最基本的选择器。如果设置HTML的样式,选择器通常将某个HTML元素,比如 p、h1、em、a,甚至可以是html本身:

html{color:black;}

h1{color:red;}

p{color:blue;}

所有与这些标记名匹配的元素,都将应用声明块中的规则。

类选择器

类选择器允许以一种独立的文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。

为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值:

html:  <h1 class="F47">       css :  .F47

所有class属性为指定类名的元素,都将应用声明块中的规则。

ID选择器

id选择器可以为标有id的HTML元素指定的样式。

id选择器以 # 来定义。

html:<p id="red">这个段落是红色</p>     css:#red{color:red;}

HTML代码中,id属性为 red 的 p 元素内容在页面显示为红色。

属性id为指定值的元素,将应用声明块中的规则

在同一个HTML文档中,元素的id值必须唯一。

通配符选择器

在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。

*{color:red;}

并集选择器

格式: 选择器1,选择器2,...{ 属性:值; } 注意点: (1),选择器之间利用,连接 (2),选择器可以是标签名称,也可以是id、class名称

h1,h2,h3{color:red;}

层次选择器

子级选择器

只能选择作为某元素子元素的元素。

格式:父级元素名称 + “>” +子级元素名称 + {声明块}

如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子级选择器。

例如,如果选择只作为 h1 元素子元素的 strong 元素,可以这样写:

   h1> strong{color:red;}

后代选择器

后代选择器又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

如果只对 h1 元素中的 p 元素应用样式,可以这样写:

h1 p{color:red;}

兄弟选择器

只选中同级的标签 1,相邻兄弟兄弟选择 格式: 选择器1+选择器2{ 声明块}

注意点: (1),相邻选择器必须用+链接 (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签

span p{color:red;}

通用选择器

只选中同级的标签,格式:选择器1+选择器2{ 声明块}

注意:选择A元素后的B元素,且位于A元素的所有B元素

span~p{color:red;}

伪类选择器

动态伪类选择器

未访问:例: a:link{color:red;}   鼠标悬停:a:hover{color:blue;}   鼠标点击:a active{color:green;}   鼠标点击后:a:visited{color:yellow;}     顺序: link—visited—hover—active    (link和visited属于静态伪类选择器,只应用于超链接(a)    hover和active属于动态伪类选择器,不仅限于超链接)

焦点

焦点(多用于输入框,链接,可以用到非a类标签     a:focus

语言伪类选择器

格式:元素名称+":lang"+(en/fr/cn)

结构伪类选择器

格式:元素名称{元素内容}  例:p{新年好}*10

格式: 元素名称+":nth-child(n)"{声明块}  例:p:nth-child(4){color:red}  表示选中HTML中的第四个p,文字颜色为红色

格式: 元素名称+":first-child"{声明块}  例:p:first-child{color:red}  表示选中HTML中的第一个p,文字颜色为红色

格式: 元素名称+":last-child"{声明块}  例:p:last-child{color:red}  表示选中HTML中的倒数第一个p(最后一个p),文字颜色为红色

格式: 元素名称+":nth-child(even)"{声明块}  例:p:nth-child(even){color:red}  表示选中HTML中的偶数项,文字颜色为红色

格式: 元素名称+":nth-child(odd)"{声明块}  例:p:nth-child(odd){color:red}  表示选中HTML中奇数项,文字颜色为红色

格式: 元素名称+":nth-last-child(n)"{声明块}  例:p:nth-last-child(n){color:red}  表示选中HTML中的倒数第N个p,文字颜色为红色

格式: 元素名称+":nth-of-type(n)"{声明块}  例:p:nth-of-type(n){color:red}  表示找类型为p的第N个元素,文字颜色为红色

格式: 元素名称+":first-of-type"{声明块}  例:p:first-of-type{color:red}  表示找类型为p的第1个元素,文字颜色为红色

格式: 元素名称+":last-of-type"{声明块}  例:p:last-of-type{color:red}  表示找类型为p的最后一个元素,文字颜色为红色

格式: 元素名称+":only-child"{声明块}  例:p:only-child{color:red}  表示只有一个p元素时样式才生效

格式: 元素名称+":empty"+{声明块}  例:p:empty{color:red}  表示p元素没有嵌套时样式才生效

格式: 元素名称+":only-of-type"{声明块}  例:p:onlyt-of-type{color:red} 表示只有一个p元素时样式才生效

否定伪类选择器

格式: 元素名+":after"  例:p+":after"或"::after" 表示在p元素后添加内容

格式: 元素名+":before"  例:p+":before"或"::before" 表示在p元素前添加内容

格式: 元素名+"::first-letter"  例:p+"::first-letter" 表示p标签中的第一个字进行样式改变

格式: 元素名+"::first-line"  例:p+"::first-line" 表示p标签中的第一行,进行样式改变

伪元素选择器

CSS 中的伪元素选择器:before 和:after,按照其官方的说法,是在被选中的元素的内容之前插入内容。根据最近几次的实践,我觉得所谓被选中的元素,需要是能包含其他元素的元素,比如<label>,<p>,<div>,等,他们之中可以插入其他的元素,比如<p><input type="text" /></p>,如果用p:before{content:"666";},就会在<input/>元素前面插入“666”,相反,其他不能包含元素的元素则不能使用此功能,比如<input>,css:input:before{content:"666";}则没有用。

 

CSS选择器

标签:after   而在   let   结构   鼠标悬停   输入   基本   输入框   文字   

原文地址:https://www.cnblogs.com/ningmengguliang/p/8456652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!