扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1 、类别选择器
蕉岭网站建设公司创新互联,蕉岭网站设计制作，有大型网站制作公司丰富经验。已为蕉岭1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的蕉岭做网站的公司定做！
2 、标签选择器
3 、ID选择器
4、 后代选择器
5、 子选择器
6 、伪类选择器
7 、通用选择器
8 、群组选择器
9 、相邻同胞选择器
10、 属性选择器
扩展资料：
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能处于不同的位置，
但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明
参考资料 百度百科-css选择器
我们在很多时候其实是需要在网页中设置鼠标效果的，有些是自动生成的，比如一个link链接，那么鼠标移上去自动会变成一个手的样子去点击，有时候一个input输入框，那么鼠标就自动变成一个英文大写I的样子，那么我们是否可以将更多对象设置成我们需要的样子呢？这完全是可以的，接下来就看下效果吧
onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。）
onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。）
onMouseDown：鼠标按下事件。（鼠标按下时即产生。）
onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。）
onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。）
onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。）
onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。）
onLoad：载入事件。（当图象或页面结束载入时产生。）
onUnload：卸载事件。（当访问者离开页面时产生。）
onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）
将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：
.over {}
.out {filter: Gray}
然后在图片标记（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图像。oMouseOver和onMouseOut是鼠标事件，this.className=”…”表示当前对象的class名 为…，注意大小写不要写错，JS对大小写非常敏感。
这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。
十字
文本光标
等待
默认
问号
左右箭头
上下箭头
系统自动给出效果
系统自动给出效果
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示： :hover 选择器可用于所有元素，不只是链接。
提示： :link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释： 在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
CSS中常用的选择器：
（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器
（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素
(一)基本选择器
1.标签选择器：通过标签名获取元素 权重：0001
（此种选择器影响范围大，建议尽量应用在层级选择器中。）
2.class选择器：通过 . 类名获取元素 权重：0010
（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）
3.id选择器：通过 # id名获取元素 权重：0100
（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）
4. * 通配符选择器：获取到页面的所有元素
5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到
(二)层次/关系选择器
（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）
1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代
例：p a { color:red; }
2.子代选择器：用隔开基本选择器，表示后一个选择器是前面的子代
例：ulli { line-style: none; }
3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）
例： a+a { }
4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素
例： li~li { }
(三）动态伪类选择器
1. a:link 锚链接被访问前添加样式
2. a:visited 锚链接被访问后添加样式
3. e:hover 鼠标悬停在元素上添加样式
4. e:active 鼠标点击元素时添加样式
5. :focus 表单元素被聚焦时，添加样式
(四)目标伪类选择器
语法： 目标:target {属性：属性值} 被选中的目标添加样式
目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式
(五)ui状态伪类选择器
1. :enabled 可用的表单元素添加样式
2. :disabled 不可用的表单元素添加样式(disabled )
3. :checked+E 被选中的表单元素添加样式
(六)结构伪类选择器
1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。
2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子
3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子
n的用法：
(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”）
(3) -n+5 选中1-5
(4)p:nth-child(-n+3):nth-child(n+2) 2-3个
4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子
5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子
6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子
7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子
8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子
9. E:empty 获取到空的E元素（注：连空格都不能有）
(七)属性选择器
1. E[attr] 拥0有attr属性的E元素添加样式 如div[class];
2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]
3. E[attr*="val"] attr属性值 包含 val的E元素添加样式
如ul[class="c"] 指class类名中包含有c字母的E元素
4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式
5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式
(八)伪元素
1. E::before给E元素添加第一个子元素 （前面）
2. E::after 给E元素添加最后一个子元素（后面）
3. E::first-letter给E元素第一个字添加样式
4. E::first-line给E元素第一行添加样式
5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)
使用 * 可为所有元素设置样式。
根据标签为元素设置样式
同时设置多个元素组合
类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。
将类选择器指定为具体标签。这样样式的权重就提高了
注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话，就变成了 span下面所有class是help-block的选择器了
HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素（不只是子元素，是后代元素，子集，孙子级，所有的。。。）。
子元素选择器中选择子元素，不包括孙级及以下元素。
用于选择紧挨着的同级兄弟元素。
用于选择后面的所有指定的兄弟元素或者所有元素。
为具有 class 属性的h1标签设置样式
约束多个属性
具体属性值设置样式
^ 以指定值开头的元素
$ 以指定值结尾的元素
属性内部任何位置出现值的元素，包含关系
~ 属性值中包含指定词汇的元素
| 以指定值开头或以属性连接破折号的元素
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
HTML
CSS
执行效果：
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML
CSS
执行效果：
c.元素选择器：通过note节点名称匹配元素。
HTML
CSS
2.属性选择器：
注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器
示例如下：
实现效果如下：
示例如下：
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
参考：
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
CSS选择器、CSS属性
style写在head中间，type="text/css"可以不用写，默认就是这个。
规定文字样式、粗细、大小、字体的属性
1、字体不存在用户电脑上时：
不处理时，使用用户电脑系统默认字体
处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体
2、一串字符串既有中文，又有英文时，如何设置两种字体
英文字体是中文字体的子集。【意思是：英文字体不能处理中文，中文字体可以处理英文】
文本装饰、文本对齐，文本缩进的属性
文本装饰-文字的下划线，中划线等
文本对齐：
文本缩进：
格式：
p{
font:20px,"楷体"
}
标签选择器选中的是页面中所有的该标签
作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）
第一步：给需要设置的标签设置id，
第二步：
注意：
1、id在同一页面是唯一的
2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。
根据指定的类名称找到对应的标签，然后设置属性
第一步：给需要设置的标签设置className，
第二步：
注意：
1、className是可以重复的
2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。
4、同一个HTML变迁可以有多个classname
1、id使用“,”class使用#
2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；
id相当于身份证，所以同一个页面上的HTML标签不可以有一样的id；
3、class相当于人名，所以，一个HTML标签可以有多个Class
id相当于身份证，所以，一个HTML标签只能有一个id
4、一般情况下设置样式，使用class；如果需要js配合，使用id
格式：
先祖位置可以是HTML标签，可以是class名，可以是id
后代位置可以是HTML标签，可以是class名，可以是id
可以随意组合
只会查找直接子元素
格式：
1、都可以使用HTML标签、id名、class名
1、后代使用空格，子使用
2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签
定义：两个选择器相交的部分
格式：
选择器1选择器2{
}
选择器1和选择器2之间没有任何符号，没有空格，没有
选择器1和选择器2之间有逗号。
相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式
通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签【n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y】
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
| [ attribute ^= value ] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 a 元素。 | 3 |
| [[ attribute =value] 选择器") | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 a 元素。 | 3 |
| [ attribute = value*] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 a 元素。 | 3 |
1、属性的取值是以什么开头的
[ attribute |= value ]----------------CSS2
优先使用CSS3的。
2、属性的取值是以什么结尾的
3、属性的取值是否包含某个特性的值的
[attribute~=value]
*{
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网