Jump to content
php.lv forumi

css selector


Yahh

Recommended Posts

Izmeklējos pa google, bet neatradu atbildi uz sekojošu jautājumu

 

vai ir iespējama šāda lieta:

 

lapā ir vairāki elementi ar ID, kas sākas ar "dvAAA", bet galā tiek piekabināti citi simboli

<div id="dvAAA_pirmais">pirmais</div>

<div id="dvAAA_otrais">otrais</div>

<div id="dvAAA_tresais">tresais</div>

 

vai var nodefinēt stilu visiem elementiem, kas sākas ar "dvAAA"?

Kaut kā tā:

 

#dvAAA*

{

border:1px solid red;

}

 

rezultātā gribās, lai visi trīs divi (dvAAA_pirmais, dvAAA_otrais, ...) būtu ar border:1px solid red;

Link to comment
Share on other sites

  • Replies 31
  • Created
  • Last Reply

Top Posters In This Topic

# (id) Izmanto tikai vienam specifiskam elementam, kurš atšķiras no visiem citiem.

. (class) izmanto vairākiem vienādiem elementiem, bet tejāpašā laikā, katru no tiem var padarīt par unikālu.

<head>
<style type="text/css">
div.bla { border: 1px solid red; } /* Šeit ir stils priekš visiem elementiem ar klasi "bla" */
div.alb { border-bottom-color: blue; } /* Tu vari izveidot jaunas klases un tad tās pielikt pie jau esošajām. */
</style>
</head>

<body>

<div class="bla">
<p>bla</p>
</div>

<div class="bla">
<p>bla</p>
</div>

<div class="bla alb"> <!-- Ievērojot atstarpi starp klašu nosaukumiem tu pievieno vel kaut kādu izveidoto stilu -->
<p>bla</p>
</div>

</body>
</html>

 

Var arī, kā tu prasiji, bet pareizāk būtu ar klasēm.

 

<html>
<head>
<style type="text/css">
#a div { border: 1px solid red; }
#a_b { background-color: yellow; }
#a_c { background-color: green; }
#a_d { background-color: gray; }
</style>
</head>

<body>

<div id="a">

<div id="a_b">
  <p>bla</p>
 </div>

<div id="a_c">
  <p>bla</p>
 </div>

<div id="a_d">
  <p>bla</p>
 </div>

</div>

</body>
</html>

Edited by player
Link to comment
Share on other sites

player --> var ar klaseem UN ID !!!

<style>
.bla
{
border: 1px solid red;
}

#id1
{
color:#ff0000;
}
#id2
{
 color:#0000ff;
}
</style>
<div class="bla" id="id1">aaa</div>
<div class="bla" id="id2">aaa</div>

jo tas ir CSS !!!

Un tiek izmantoti heriherijas principi

1 limenis ir pats taags

2. limenis klasse

3. limenis ID

---

P.S. apskatieties tachu vienreiz ko noziimee CSS ....

Edited by Grey_Wolf
Link to comment
Share on other sites

.js
var divTags = getElementsByTagNames('div');	for(i=0; i<divTags.length;i++)
{ 
if(divTags[i].id.substring(0, 6)=="dvAAA_")
{

	divTags[i].className = "class_for_all_elements";
}
}
.css
.class_for_all_elements
{
border: 10px solid blue;
}

 

bet no taadiem veidiem iesaku attureeties.

Link to comment
Share on other sites

div

div div blabla.....

nevajag man stāstīt par css specificity

hmm ... un pats saprati ko Uzrakstiji?

ja buus :

div div {....

 

tad tas noziimee ka jaabuut kodaa :

<div>

<div>

.....

-----

+ tas nebuut nav labs stils, jo dazreiz siish varints nestraadaa, vai straadaa ljoti gljukaini...

edit: starpcitu apskaties kaadi tev ir bijushi jautaajumi , un tad stasti ka tev nevajag staastiit par CSS ......

Edited by Grey_Wolf
Link to comment
Share on other sites

Grey_Wolf

Kas tev nepatīk? Esmu slikti, nepareizi, stulbi atbildējis autoram?

 

#3 Komentārā, pirmājā variantā ir parādīts labākais variants. Es nēesmu teicis, ka #5 komentāra variants ir labs, viņš nav labs, jo sākot rakstī vairāk, kā 2-3 stilus var sākties problēmas.

 

Ko es tādu esmu prasijis? Divus jautājumus no, kuriem viens radās neuzmanības pēc, bet otram pats atradu kompromisu.

 

 

#12 p? es parādīju, kā prasija tas p ir tāpat vien ielikts, bez jebkādas īpašas nozīmes.

Edited by player
Link to comment
Share on other sites

es par tiem vairaku limenju tagiem teicu ka vinji medz gljukot.. un taa arii ir :

peimeram uzmini nu :)

<style>
tr
{
color:#ff00ff;
}

tr td  td
{
color:#ff0000;
}

tr td
{
color:#ffff00;
}
</style>
<body>
<table border="1">
<tr>
	<td>
		sarkana ? vai dzeltena a varbuut violeta ?
	</td>
	<td>
		sarkana ? vai dzeltena a varbuut violeta ?
	</td>
</tr>

<tr>
	<td colspan="2">
		sarkana ? vai dzeltena a varbuut violeta ?
	</td>
</tr>
</table>

Link to comment
Share on other sites


×
×
  • Create New...