css的选择器描述
css的选择器描述
选择器：选择器（selector）是CSS中重要的概念，所有的HTML标记都在通过不同的CSS选择器进行控制的，用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明即可，即可实现各种效果。今天我们来看：css如何引入HTML文件进行了介绍。
1.标签选择器
一个HTML页面中很多不同的标记组成，在css标记选择器就是声明哪些标记采用哪种CSS样式，例如段落的p标签选择器，就是用于声明页面中所有的
标签的样式风格。同样可以通过h1选择器来声明页面中所有的
标记的CSS 风格。
代码和语法如下：
P{ color: red ;}
每个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。
CSS语言对所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。
2.Id选择器
Id选择器只能在HTML页面中使用一次，因此其针对性更强，在HTML标记中只需要用id属性，就可以直接调用CSS的ID选择器
代码和语法如下：
#d1{
width:100px;
height:100px;
color：red;
}
class选择器可以用于多个标记，但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是css可以调用，JavaScript等其他脚本也可以调用，如果一个HTML中有两个相同的id的标记，将会导致JavaScript在查找id时出错，例如JavaScript中的函数getElementById()；正因为JavaScript等脚本也可以调用HTML中设置的id，因此id选择器一直被广泛应用，网站建设者在编写CSS代码时，应该养成良好的习惯，一个id最多只能赋予一个HTML标记，而且在CSS中，id选择器不支持像class选择器那样多风格同时使用，类似id=“one two”是完全错误的语法。
3.类选择器
在前面的讲解的标记选择器一旦声明，那么页面中所有的标记都会相应的产生变化，例如当声明了
标记为红色，那么页面中的所有的
标记都将显示为红色。如果希望其中的某一个
标记不是红色，而是蓝色，这时仅依靠标记选择器是远远不够的，还需要引入类别class选择器
代码和语法如下：
.c1{ background: blue; }
内容
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。
当一个页面中所有的段落标记都设置了样式的时候，所有的样式都在标记选择器中设置，样式如下：p { /*样式设置*/ }；
只有两个特殊的段落样式不一样，就可以采用类选择器定义并在两个特殊的p标记中添加class属性应用两个特殊的样式。
.special1{ /* 特殊的样式1 */ };
.special2 { /* 特殊的样式2*/ }；
对应的两个标记中：
特殊段落1
特殊段落2
4.组合选择器
分组选择器不是一种选择器类型，而是一种选择器的使用方法。当多个对象定义了相同的样式时，就可以把他们分成一组，这样能够简化代码读写。
代码和语法如下：
Html，body，h1{ margin：0；}
分组选择器可以使用逗号把不同组内的不同对象分割。分组选择器与类选择器在性质上有点类似，都可以为不同的元素或对象定义相同的样式，但相比之下，分组选择器具有更大的灵活性，使用好分组选择器可以使得代码看起来更加简洁。
在声明前面几种选择器的时候，如果某些选择器的风格是完全相同的，或者部分相同，这时可以利用组合选择器的方法，集体声明，将风格相同的CSS选择器同时声明，选择器可以是前面的标签选择器、还可以是类选择器以及id选择器。
另外，针对网站中一些相同的网站的部分模块或子页面，他们的样式相同，但每个模块又有自己的特殊的样式，可以对单独的模块进行单独的选择器样式的声明，在对页面中相同的样式采用组合选择器定义同一种CSS样式，后期修改的时候，不用单独的每个修改，只需修改组合选择里面的即可。组合选择器可以减少代码的重复定义。
使用分组选择器时应该坚持以下两个原则：
A、方便原则：不能为分组而分组，如把每个元素、对象中具有相同的声明都抽取出来分为一组，只能给自己带来麻烦，此时，定义一个类会方便。
B、就近原则：如果几个元素相邻，并同处于一个模块内，可以考虑把相同声明提取出来进行分组。理由是便于分组、容易维护，也更容易理解。
5.包含选择器
包含选择器前后部分之间以空格隔开，包含选择器根据左侧选择符指定祖先元素，然后在元素下面找匹配的右侧元素选择符的下级元素。
代码和语法如下：
#banner1 img{ width:100%; height:auto; }
定义包含选择器时，必须保证在HTML结构中第一个对象能包含第二个对象。包含选择器是最有用的一类选择器，它能够简化代码，实现更大范围的样式控制。
注意，包含选择器可以实现跨级包含，即父级可以包含子对象、孙对象或孙的子对象等，搭建如下的结构，在定义包含选择器的时候，应该注意到跨级包含的情况，以免造成错误的控制。
6.标签指定选择器
有时候用户需要控制某元素在一定范围内的对象的样式，这时可以把元素与class或ID选择器结合起来使用，它与包含选择器有点相似，但指定选择器的前后对象之间没有空格，且不再要求前后两个对象之间的结构上必须是包含关系。
代码和语法如下：
a.active{ background: blue; color: #fff ;}
标签指定选择器对于定义样式限定为class或id属性的某种元素上非常有用，它对元素的控制介于标签选择器与id选择器之间，是一种非常实用的选择器类型
前面的是选择器的常用的类型，常见的还有通用选择器，通用选择器很强大，但是使用却很少。通用选择器的作用就像是通配符，它匹配所有的可用元素。与其他语言中的通配符一样，通用选择器是一个星号表示。
CSS选择器笔记
CSS选择器笔记 阮一峰整理 参考网址：456 Berea Street 一、基本选择器 实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/5e4012460.html, { background:#ff0; } https://www.360docs.net/doc/5e4012460.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器
实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例： p[title] { color:#f00; } div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例： p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素
CSS选择器
CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1）ID选择器，根据元素ID来选择元素。 前面以”#”号来标志，在样式里面可以这样定义： #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv，如：
这个段落字体颜色为红色
最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。 我们可以改成这样来定义。
CSS选择器的声明与嵌套
CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。 并且，任何形式的选择器，都是合法的，标记选择器，class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以使用集体声明的方式，将风格相同的选择器同时声明。 [html]view plain copy print? 1. 2. 3.
17. 18. 19.
20.集体声明h1
21.集体声明h3
23.集体声明h4
24.集体声明h5
25.集体声明p1 26.集体声明p2 27.
集体声明p3 28. 29. 30. 全局声明 对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1. 2. 3.
实验14 CSS选择器
实验14C S S选择器1．实验目的 （1）掌握在网页上应用CSS的方法。 （2）掌握CSS的基本语法规则。 （3）掌握CSS的常用选择器。 （4）掌握使用Dreamweaver定义CSS的方法。 2．实验内容 定义“网络与信息安全实验教学”网站首页的样式，如图14-1所示。 图14-1 首页效果图
2 3．实验步骤 一．创建“网络与信息安全实验教学”站点 （ 1）将“实验14”文件夹中的syjx 文件夹复制到D 盘； （2）启动Dreamweaver ，使用“站点｜新建站点”命令创建“网络与信息安全实验教学”站点，并指定syjx 文件夹为“网络与信息安全实验教学”站点的本地根文件夹。 二．定义“首页”的CSS 样式。 （ 1）在Dreamweaver 中打开index.html 文件。 （2）选择“文件 | 新建”命令，新建CSS 文件，保存在syjx 文件夹中，命名为css.css 。 （3）将文档窗口切换到index.html ，单击CSS 面板上的“附加样式表”按钮，将css.css 作为外部样式表链接到index.html ，如图14-2所示。 图14-2 CSS 面板 （ 4）在css.css 文件中定义首页的样式。 b ody{ background:#f6fafd} /*主体背景颜色*/ a { font-family:"宋体"; /*字体*/（文本样式） font-size:15px; /*文字大小*/ color:#FFFFFF; /*白色*/ text-decoration:none; /*无下划线*/ } .menu{font-weight:bold;} /*加粗*/（导航菜单样式） .new_title{ （标题样式） font-family: "宋体"; font-size: 14px; font-style: normal; color: #FFFFFF; font-weight: bold; 样
CSS选择器的权重与优先规则
CSS选择器的权重与优先规则 2011-06-26 我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？ 在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。 那么，又怎么来计算选择器的特殊性呢？下面这张图介绍了特殊性的计算方法： 我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下： 1.第一等：代表内联样式，如: style=””，权值为1000。 2.第二等：代表ID选择器，如：#content，权值为100。 3.第三等：代表类，伪类和属性选择器，如.content，权值为10。
4.第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 例如上图为例，其中#NAV为二等选择器，.ACTIVE为三等选择器，UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113 下面是一些计算示例：
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。 我们再来看一个具体的例子：假如有以下组样式规则，你能判断出HTML代码中的两个标题是什么颜色吗？ 01 #content div#main-content h2{ 02 color:red; 03 } 04 05 #content #main-content>h2{ 06 color:blue 07 } 08 body #content div[id="main-content"] h2{ 09 color:green; 10 } 11 12 #main-content div.paragraph h2{ 13 color:orange; 14 } 15 #main-content [class="paragraph"] h2{ 16 color:yellow; 17 } 18 div#main-content div.paragraph h2.first{ 19 color:pink; 20 } 以下是HTML代码：
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上) 我们已经讲了一部分选择器了，今天还要继续讲一些选择器，以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式，比如背景图像，文字间距等，所以我们还讲些样式。通过以下几点介绍： ?关系选择器 ?动态伪类选择器 ?结构性伪类选择器 ?文字属性 ?段落属性 ?背景属性 ?列表属性 好了，我们先来看一下关系选择器 一、关系选择器 1.E F：后代选择器，找到页面中相应的的子元素及孙子及重孙子元素，因为这些元素都是后代元素，我们把标签的第一层嵌套的元素叫子元素，再一层嵌套及以后嵌套的元素及子元素都叫后代元素。（当然也是相对的）。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种，我们先理一下元素之间的层次关系。