HTML网页设计：css选择器

一、为什么要用选择器？

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

二、选择器的分类

基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器

1、基本选择器分为：类型选择器（标签选择器）、class选择器（类选择器）、ID选择器、通配符选择器（*）、群组选择器

a、类型选择器(标签选择器) 以文档对象html中的标签作为选择符

I、什么时候用？想改变某个元素的默认样式时或者统一文档某个元素的显示效果时

II、语法？标签{属性：属性值；} 例如：div{width：200px；}

b、Class选择器(类选择器)

I、什么时候用？想要区分某个标签的时，比如想要区分2个div

II、语法？<标签 class=“box”></div> .Class名字{属性：属性值；} 例如：.box{width：300px；}

III、Class可以给多个属性值，多个属性值之间用空格隔开。例如：<div class=“box a1 a3”></div>

c、ID选择器

I、什么时候用？想要区分某个标签的时，比如想要区分2个div；

II、语法？ <标签 id=“box1”></div> #ID名字{ 属性：属性值；} 例如：#box1{width:200px;}

III、注意点：ID有唯一性，属性值只能是1个

d、通配符

I、什么时候用？想让所有的标签同时改变样式的时候

II、语法？ *{属性：属性值；} 例如： *{color：red；}

e、群组选择器

I、什么时候用？当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

II、语法？选择器1，选择器2，选择器3{属性：属性值；} 例如： .box,p,#a2{width：300px；}

2、层次选择权

包含选择器（后代选择器）、子选择器、相邻兄弟选择器、通用选择器

a、后代选择器：E F 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内；

b、子选择器：E>F 选择匹配的F元素，且匹配的元素是所匹配的E元素的子元素；

c、相邻兄弟选择器：E+F 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面；

d、通用选择器：E~F 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素。

3、伪类选择器

动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器

a、动态伪类选择器：

E：link 设置点击前效果

E：visited 设置点击后效果

E：active 设置激活时效果

E：hover 设置悬浮时效果

E：focus 选择匹配的E元素，且匹配的元素获取焦点。

b、目标伪类选择器

target 选择匹配E的所有元素，且匹配元素被相关的url指向，使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

c、语言伪类选择器

I、如果用的是h5，直接设置文档的语言<html lang="en-us">

II、手动在文档中指定lang属性，并设置对应的语言值；

E：lang(language)选择匹配E的所有元素，且匹配元素指定了lang属性

d、UI元素状态伪类选择器

E：checked 匹配选中的复选或者是单选按钮的表单元素；

E：enabled 匹配所有启用的表单元素

E：disabled 匹配所有禁用的表单元素

e、结构伪类选择器

列数	选择器	作用
1	E:fisrt-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
2	E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
3	E F:nth-child(n)	选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(nlength)、 :nth-child(n+length)、:nth-child(-n+length)、:nth-child(nlength+1)
4	:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5	:only-child	选择的元素是它的父元素的唯一一个子元素；
6	:first-of-type	选择一个上级元素下的第一个同类子元素
7	:last-of-type	选择一个上级元素的最后一个同类子元素
8	:nth-of-type()	选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素
9	:nth-last-of-type()	选择指定的元素，从元素的最后一个开始计算
10	:only-of-type	选择一个元素是它的上级元素的唯一一个相同类型的子元素
11	:empty	选择的元素里面没有任何内容
12	:root	选择文档的根元素

f、否定伪类选择器

E：not(F) 匹配所有除元素F外的元素，有时常在表单元素中使用，例如，给表单所有的input定义样式，除了submit按钮之外，此时就可以使用否定选择器。

4、伪元素选择器

::first-letter 第一个文本

::first-line 第一行

::before 元素之前

::after 元素之后

::selection 选中之后的样式操作，仅接受两个属性：background、color

5、属性选择器

个数	选择器	用法
1	E[attr]	希望选择有某个属性的元素，而不论属性值是什么例如：a[href]{color:red;}
2	E[attr=”value”]	除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素例如: a[href=”www.baidu.com”]{color:red;}
3	E[attr^=”value”]	指定了属性，并且指定了属性值，属性值是以value开头的例如：a[title^="text"] {color: red;}
4	E[attr$=”value”]	指定了属性，并且指定了属性值，属性值是以value结尾的例如：a[title$="text"] {color: red;}

HTML网页设计：css选择器相关推荐

Dreamweaver CSs网页设计css规则定义翻译
在Dreamweaver CS网页设计中,对于初学者来说,学习CSS样式基础其实不是很难,现在小编将CSS规则定义翻译如下,希望能给一起学习网页设计的网友更多方便,可供参考与理解. 当然,如果你觉得此 ...
网页设计css分析,基于CSS技术的网页制作实例分析
21世纪我国科学技术水平大幅提高,计算机网络技术成为了推动各行各业事业发展的助推器,可以利用计算机网络快速发布和获取信息,同样在人们的政治生活.经济生活等多个方面发挥着无可比拟的作用.网页设计与计算机 ...
css应用网页设计,CSS技术在网页设计中的运用
多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术,可对每一个HTML的 ...
网页三剑客-css选择器
1.CSS的引入 ①行内样式 <p style="color:red;">设置字体颜色为红色</p> ②引入样式文件,链接式 <link rel=&q ...
网页设计-[CSS+DIV设计实例：超酷的竖排导航栏 ]
HTML: 以下为引用的内容: <div id="navcontainer"> <ul id="navlist"> <li id= ...
Day04 利用flex布局完成PC端网页设计CSS+html部分
没学JS,而且还是不会创建仓库,所还是干巴巴的代码了 HTML <!DOCTYPE html> <html lang="en"><head>&l ...
民宿网页设计css代码,民宿网站
├─build //webpack配置文件 │ ├─config //配置文件 │ ├─src │ │ App.vue │ │ main.js //主文件 │ │ │ ├─components │ │ ...
WEB前端网页设计 CSS Position（定位）
目录 static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位重叠的元素所有的CSS定位属性 position 属性指定了元素的定位类型. posi ...
HTML5网页设计练习-选择器的应用
【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录实验1 1.题目 2.代码 3.网页运行效果实验2 1.题目 2.代码 3 ...

HTML网页设计：css选择器

HTML网页设计：css选择器相关推荐

最新文章

热门文章